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.
| <html> | |
| <head> | |
| <script src="http://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> |
