Scatter Plot

Two-dimensional data is commonly visualized using a scatter-plot. Where two dimensions are represented on two different axes, horizontal x and vertical y.

Data

Array of arrays - contain one point for each primary array.

var data = [
  [10, 20], [20, 100], [200, 50],
  [25, 80], [10, 200], [150, 75],
  [10, 70], [30, 150], [100, 15]
]

var svg = d3.select("body")
            .append("svg")
            .attr("width", 250)
            .attr("height", 250)

svg.selectAll("circle")
   .data(data).enter()
   .append("circle")
   .attr("cx", function(d) {return d[0]})
   .attr("cy", function(d) {return d[1]})
   .attr("r", 4)

Size

   .attr("r", function(d) {
     return Math.sqrt(d[0]*d[0]+d[1]*d[1])/20
   })

Color

   .attr("fill", function(d) {
     return "rgb("+d[0]+","+d[1]+",0)"
   })

Labels

// In addition to circles construction
svg.selectAll("text")
  .data(data).enter()
  .append("text")
  .attr("x", function(d) {return d[0]+4})
  .attr("y", function(d) {return d[1]+4})
  .text(function(d) {return d[0] + ", " + d[1]})
  .attr("font-size", "10px")

Array of Objects

Let's make some readable data using array of objects

var data = [
  {country:"USA", gold:10, silver:20},
  {country:"China", gold:20, silver:100},
  {country:"India", gold:200, silver:50},
  {country:"Russia", gold:25, silver:80},
  {country:"Germany", gold:10, silver:200},
  {country:"UK", gold:150, silver:75},
  {country:"France", gold:10, silver:70},
  {country:"UAE", gold:30, silver:150},
  {country:"Canada", gold:100, silver:15}
]

var svg = d3.select("body")
            .append("svg")
            .attr("width", 250)
            .attr("height", 250)

svg.selectAll("circle")
   .data(data).enter()
   .append("circle")
   .attr("cx", function(d) {return d.gold})
   .attr("cy", function(d) {return d.silver})
   .attr("r", function(d) {
     return Math.sqrt(d.gold*d.gold+d.silver*d.silver)/20
   })
   .attr("fill", function(d) {
     return "rgb("+d.gold+","+d.silver+",0)"
   })

svg.selectAll("text")
  .data(data).enter()
  .append("text")
  .attr("x", function(d) {return d.gold+10})
  .attr("y", function(d) {return d.silver+4})
  .text(function(d) {return d.country})
  .attr("font-size", "10px")