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.
Bubbles get bigger as the percentage of overweight/obese students goes up. This example uses the same quantized, divergent color scale as Overweight NY Students: #2.
Color scale from Color Brewer.
This example shows outliers really well.
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| // pull in data | |
| d3.csv("/d/283008a26997e97e0490/Student_Weight_Status_Category_Reporting_Results__Beginning_2010.csv", function(error, rows) { | |
| var dataset = []; | |
| var counter = 0; | |
| 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 | |
| entry["pctOverObese"] = pctOverObese; | |
| entry["pos"] = counter; | |
| counter += 1; | |
| dataset.push(entry); | |
| } | |
| } | |
| }); | |
| console.log(dataset); | |
| // svg size | |
| var h = 500; | |
| var w = 500; | |
| var padding = 30; | |
| // the scales | |
| var xScale = d3.scale.linear() | |
| .domain([0, dataset.length]) | |
| .range([w/4, (3*w)/4]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d){ return d["pctOverObese"]; })]) | |
| .range([h - padding, padding]); | |
| var rScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d){ return d["pctOverObese"]; })]) | |
| .range([2, 20]); | |
| var colorScale = d3.scale.quantize() | |
| .domain([0, d3.max(dataset, function(d){ return d["pctOverObese"]; })]) | |
| .range(["#006837", "#1a9850", "#66bd63", "#fdae61", | |
| "#f46d43", "#d73027", "#a50026"]); | |
| // append the svg | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", h) | |
| .attr("width", w); | |
| // plot the data | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d){ | |
| return xScale(d["pos"]); | |
| }) | |
| .attr("cy", function(d){ | |
| return yScale(d["pctOverObese"]); | |
| }) | |
| .attr("r", function(d){ | |
| return rScale(d["pctOverObese"]); | |
| }) | |
| .attr("fill", function(d){ | |
| return colorScale(d["pctOverObese"]); | |
| }) | |
| .append("title") | |
| .text(function(d){ | |
| return d["AREA NAME"] + ": " + d["PCT OVERWEIGHT OR OBESE"]; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
