Overweight NY students: #1

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 linear, sequential color scale. Bubbles get bigger and become more red as their percentage of overweight/obese students increases.

<html>
<head>
<script src="https://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("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 });
			}
		}
	});
	
  // scales
  var rScale = d3.scale.linear()
					 .domain([0, d3.max(dataset, function(d){ return d.value; })])
					 .range([2, 20]); 
  
  var colorScale = d3.scale.linear()
						 .domain([0, d3.max(dataset, function(d){ return d.value; })])
						 .range(["yellow", "red"]);
  
  // form csv as json
  var jsonData = { name: "overweightKids", children: dataset };
				  
  // 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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js