Overweight NY students: #2 by dhoboy

Each bubble is a School District total of the percentage of students either Overweight or Obese in New York State school systems, since 2010. Dataset here.

This is an example of the d3 Pack layout with a quantized, divergent color scale. Color scale thanks to Color Brewer.

Bubbles get bigger as the percentage of overweight/obese students goes up.

index.html

<html>
<head>
<script src="//d3js.org/d3.v3.js"></script>
</head>
<body>
<script>
var diameter = 960;
var format = d3.format(".2%");

// set up pack layout	
var bubble = d3.layout.pack()
				    .sort(function(a,b) {
				    	return b.value - a.value; 
				    })
				    .size([diameter, diameter])
				    .padding(1.5);

// append the svg
var svg = d3.select("body")
		    .append("svg")
		    .attr("height", diameter)
		    .attr("width", diameter)
		    .attr("class", "bubble");		

// pull in csv data
d3.csv("/d/283008a26997e97e0490/Student_Weight_Status_Category_Reporting_Results__Beginning_2010.csv", function(error, rows) {
	var dataset = [];
	rows.forEach(function(entry){
		if ((entry["GRADE LEVEL"] == "DISTRICT TOTAL") && (entry["PCT OVERWEIGHT OR OBESE"] != "")) {
			var pctOverObese = /[\d]+\.[\d]/.exec(entry["PCT OVERWEIGHT OR OBESE"]);
			if (pctOverObese != null) {
			  pctOverObese = pctOverObese[0] / 100; // form percent mathematically 
			  
			  // push data as an object ready for pack layout 
			  dataset.push({ name: entry["AREA NAME"], value: pctOverObese });
			}
		}
	});
	
  // form as json
  var jsonData = { name: "overweightKids", children: dataset };
  
  // scales
  var rScale = d3.scale.linear()
					 .domain([0, d3.max(dataset, function(d){ return d.value; })])
					 .range([2, 20]); 
  
  var colorScale = d3.scale.quantize() 
						 .domain([0, d3.max(dataset, function(d){ return d.value; })])
						 .range(["#006837", "#1a9850", "#66bd63", "#fdae61", 
						           "#f46d43", "#d73027", "#a50026"]);
  				  
  // create and draw nodes
  var node = svg.selectAll(".node")
			    .data(bubble.nodes(jsonData)
			      .filter(function(d) { return !d.children; }))
			    .enter()
			    .append("g")
			    .attr("class", "node")
			    .attr("transform", function(d) { 
			    		console.log(d);
			    		return "translate(" + d.x + "," + d.y + ")"; 
			    });

  node.append("title")
  	  .text(function(d){ return d.name + ": " + format(d.value); });
  
  node.append("circle")
  	  .attr("r", function(d) { return rScale(d.value); })
  	  .style("fill", function(d) { return colorScale(d.value); });
  	  	
}); 

d3.select(self.frameElement).style("height", diameter + "px");

</script>
</body>
</html>