Ch7_scaleSqrt

DONE. 180108

This is an exercise from D3 Chapter 7 concerning square root 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; }
  </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>

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