D3 Examples - Ch7

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Dataset
    var dataset = [ 5, 10, 15, 25, 17, 10,  8,  7,  6, 13, 
                   14, 19, 22,  4,  6, 10, 13,  2, 12, 20];
    
    var datasetScatter = [[  5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 
                          [410, 12], [475, 44], [ 25, 67], [ 85, 21], [220, 88]];
    
    // Set up SVG
    svgW = 900;
    svgH = 500; 
    var svg = d3.select("body")
      .append("svg")
      .attr("width", svgW)
      .attr("height", svgH)
    
    pad = 100;
    
    // Set up scales
    var xScale = d3.scaleLinear()
        .domain([0, d3.max(datasetScatter, function (d) { return d[0];})])
        .range([pad, svgW-pad]);
    var yScale = d3.scaleLinear()
        .domain([0, d3.max(datasetScatter, function (d) { return d[1];})])
        .range([svgH-pad, pad]);
    var aScale = d3.scaleSqrt()
        .domain([0, d3.max(datasetScatter, function (d) { return d[1];})])
        .range([0, 15]);
    
    // Draw circles
    svg.selectAll("circle")
        .data(datasetScatter)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return xScale(d[0]);})
        .attr("cy", function (d) { return yScale(d[1]);})
        .attr("r", function (d) { return aScale(d[1]);});
    
        // Add text labels for all data points
    svg.selectAll("text")
        .data(datasetScatter)
        .enter()
        .append("text")
        .attr("x", function (d) { return xScale(d[0]);})
        .attr("y", function (d) { return yScale(d[1]);})
        .text(function (d) { return d[0] + "," + d[1];});
​
​
  </script>
</body>
​
    