Ch8_linearAxes

DONE. 180108

This started as an exercise from D3 Chapter 7 concerning linear scales. This evolved into a Chapter 8 exercise using random data scaled with linear scales.

forked from eychang9's block: Ch7_scaleLinear

<!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>

https://d3js.org/d3.v4.min.js