D3 Examples - Ch8

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; }
    .axis path,
    .axis line {
      stroke: red;
      shape-rendering: crispEdges;
    }
    .axis text {
      font-family: Century Gothic;
      font-weight: bold;
      font-size: 14px;
      fill: green;
    }
  </style>
</head>
​
<body>
  <script>
    // Dataset
        var datasetScatter = [];    
    var numDataPoints = 50;
    var xRange = 100 + (Math.random() * 900);
    var yRange = 100 + (Math.random() * 900)
    for (var i = 0; i < numDataPoints; i++) {
      var newNum1 = Math.floor(Math.random() * xRange);
      var newNum2 = Math.floor(Math.random() * yRange);
      datasetScatter.push([newNum1, newNum2])
    }
    
    //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([3, 10]);
    
    // 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];});
    */
​
    // Add axes
    var xAxis = d3.axisBottom(xScale);
    var yAxis = d3.axisLeft(yScale);
    
    svg.append("g")
        .attr("transform", "translate(0," + (svgH-pad) + ")")
        .attr("class", "axis")
        .call(xAxis);
​
    svg.append("g")
        .attr("transform", "translate(" + pad + ",0)")
        .attr("class", "axis")
        .call(yAxis);
    
  </script>
</body>
​
    