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="//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>