Each bubble is a School district percentage of students either Overweight or Obese in New York State school systems, for the 2012 - 2013 school year. Transition between Elementary school and Middle/High school data to see how School districts’s data changes. Hover over bubbles to see percentages.
Color scale adapted from previous visualizations of this dataset. Thanks to Color Brewer.
Bubbles are plotted according to School district location and get bigger and redder as the percentage of overweight/obese students increases.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.ny {
fill: #D0D0D0;
}
body {
margin: auto;
position: relative;
width: 960px;
}
label {
font: 14px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 100px;
}
</style>
<body>
<form>
<label><input type="radio" name="grade-level" value="elementary" checked>Elementary</label>
<label><input type="radio" name="grade-level" value="middle_high">Middle/High</label>
</form>
<script src="//d3js.org/d3.v3.js"></script>
<script src="//d3js.org/topojson.v1.js"></script>
<script>
var width = 960,
height = 700;
// svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var grade = "Elementary", // starting value set
format = d3.format(".2%");
// point radius scale
var r = d3.scale.linear()
.range([2, 20]);
// map projection
var projection = d3.geo.mercator()
.center([-76,43.35])
.scale(6000);
// path generator
var path = d3.geo.path()
.projection(projection)
.pointRadius(function(d){
if (d.properties){ // return a scaled r if the path generator is drawing a point
return r(d.properties.pctOverObese);
}
});
// color scale
var color = d3.scale.quantize()
.range(["#006837", "#1a9850", "#66bd63", "#eee8aa", "#ff7f00", "#d73027", "#a50026"]);
// draw map
d3.json("ny_state.json", function(error, ny_state) {
var new_york = topojson.feature(ny_state, ny_state.objects.ny);
svg.append("path")
.datum(new_york)
.attr("class", "ny")
.attr("d", path)
// plot data on map
d3.csv("/d/283008a26997e97e0490/Student_Weight_Status_Category_Reporting_Results__Beginning_2010.csv", form_the_data, function(error, rows) {
var data = rows.map(function(d) {
return { "type": "Feature", "id": d["LOCATION CODE"],
"properties": { "name": d["AREA NAME"], "grade_level": d["GRADE LEVEL"], "pctOverObese": d["pctOverObese"],
"LATITUDE": d["lat"], "LONGITUDE": d["long"]
},
"geometry": { "type": "Point", "coordinates": [d["long"], d["lat"]] }
}
});
color.domain([0, d3.max(data, function(d){ return d.properties.pctOverObese; })])
r.domain([0, d3.max(data, function(d){ return d.properties.pctOverObese; })])
var elementary = data.filter(function(d) {
return (d.properties.grade_level == "ELEMENTARY");
});
var middle_high = data.filter(function(d) {
return (d.properties.grade_level == "MIDDLE/HIGH");
});
// Data join, starting with elementary
var places = svg.selectAll(".place")
.data(elementary);
// Enter
places.enter()
.append("path")
.attr("class", "place")
.attr("d", path)
.attr("fill", function(d){ return color(d.properties.pctOverObese); });
places.append("title")
.attr("class", "title")
.text(function(d){ return d.properties.name + ": " + format(d.properties.pctOverObese); });
// transition
d3.selectAll("input").on("change", change);
function change() {
grade = this.value;
// Update
if (grade == "middle_high") {
places.data(middle_high, function(d) { return d.id; });
places.selectAll(".title")
.data(middle_high, function(d) { return d.id; });
}
if (grade == "elementary") {
places.data(elementary, function(d) { return d.id; });
places.selectAll(".title")
.data(elementary, function(d) { return d.id; });
}
places.transition()
.duration(750)
.attr("fill", function(d){ return color(d.properties.pctOverObese); });
places.transition()
.delay(800)
.duration(750)
.attr("d", path);
places.selectAll("title")
.text(function(d){ return d.properties.name + ": " + format(d.properties.pctOverObese); });
}
});
});
// looking at elem -> middle/high percent overweight/obese students for the school year 2012 - 2013
function form_the_data(d) {
var GPS = /-?[\d]+\.[\d]+, -?[\d]+\.[\d]+/.exec(d["Location 1"]);
var pctOverObese = /[\d]+\.[\d]/.exec(d["PCT OVERWEIGHT OR OBESE"]);
if (((d["GRADE LEVEL"] == "ELEMENTARY") || (d["GRADE LEVEL"] == "MIDDLE/HIGH")) &&
(GPS != null) && (pctOverObese != null) && (d["SCHOOL YEARS"] == "2012-2013")) {
GPS = GPS[0]; // grab the result string from returned .exec() array
GPS = GPS.split(","); // split lat and long into separate pieces
d["lat"] = +GPS[0];
d["long"] = +GPS[1];
pctOverObese = pctOverObese[0] / 100; // form percent mathematically
d["pctOverObese"] = pctOverObese;
return d;
}
}
d3.select(self.frameElement).style("height", height + "px");
</script>
{"type":"Topology","objects":{"ny":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","id":"New York","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]],[[7]],[[8]]]}]}},"arcs":[[[8061,260],[-233,-92],[9,33],[155,64],[55,24],[29,11],[26,12],[23,10],[26,4],[62,6],[27,-3],[-10,-20],[-81,-8],[-88,-41]],[[7195,298],[3,-23],[13,-20],[10,-26],[-61,-107],[-40,-48],[-8,4],[-10,0],[-19,-16],[-21,-17],[-16,-18],[-21,-5],[-25,-16],[-18,-6],[-10,4],[-3,14],[6,12],[11,9],[1,23],[-4,26],[12,20],[17,11],[15,16],[7,21],[5,34],[4,61],[3,35],[12,20],[15,13],[22,-13],[35,-9],[20,10],[16,12],[17,14],[9,-2],[5,-10],[2,-14],[-4,-9]],[[8367,321],[-124,-45],[-65,-3],[-10,16],[63,0],[46,22],[53,25],[91,36],[82,33],[33,18],[82,56],[44,20],[42,22],[62,29],[67,43],[28,4],[0,-19],[-60,-21],[-34,-20],[-104,-64],[-98,-55],[-63,-34],[-135,-63]],[[7286,454],[-18,-11],[6,68],[11,57],[21,51],[60,168],[8,32],[6,19],[13,-5],[1,-26],[-16,-44],[-12,-34],[-1,-32],[8,-37],[-16,-44],[-33,-81],[0,-30],[-4,-29],[-34,-22]],[[9466,1239],[-5,-23],[9,-19],[0,-17],[-13,5],[-15,17],[-25,16],[-29,-1],[-23,-6],[-16,21],[-1,30],[13,25],[26,24],[1,28],[16,4],[6,-24],[23,-23],[12,-5],[19,-6],[-3,-23],[5,-23]],[[9719,1320],[-8,-7],[0,-18],[5,-19],[-6,-15],[-9,-15],[-10,-16],[0,29],[-2,31],[-7,20],[-18,6],[-17,-1],[-7,9],[8,12],[9,16],[-4,25],[28,-30],[22,-11],[16,-5],[0,-11]],[[9506,1410],[-16,-23],[-21,-18],[-16,-8],[-19,41],[-50,-39],[-87,-110],[-4,-23],[20,-7],[9,-9],[10,-6],[-7,-29],[-28,6],[-24,-8],[-8,-10],[-1,-22],[4,-22],[2,-28],[-5,-20],[-11,16],[-11,27],[-14,0],[-8,-30],[-28,-1],[-6,-2],[-14,-9],[-13,1],[-17,-23],[-12,-18],[1,-23],[-25,-27],[-22,-25],[-25,-5],[-20,-7],[-11,-44],[14,3],[13,-1],[13,-6],[11,-12],[26,26],[25,-5],[25,-15],[29,-13],[25,1],[30,28],[10,21],[7,26],[4,25],[15,9],[26,8],[28,47],[24,51],[32,11],[20,-1],[7,15],[-14,55],[13,11],[19,-1],[7,-33],[3,-32],[36,-8],[8,29],[19,5],[8,25],[3,19],[8,14],[25,-9],[34,-68],[4,41],[5,43],[17,21],[14,-3],[41,-84],[6,-23],[12,-12],[26,7],[49,29],[48,54],[24,17],[21,-14],[22,6],[1,52],[16,9],[15,-19],[18,-14],[0,13],[-15,31],[35,13],[36,-20],[22,-8],[-9,-22],[-26,-37],[-56,-16],[-101,-68],[-99,-53],[-91,-63],[-76,-48],[-123,-82],[-70,-46],[-44,-30],[-43,-16],[-25,-5],[16,35],[1,24],[-15,14],[-32,4],[-15,-7],[-6,-18],[3,-23],[9,-22],[1,-20],[-15,-17],[-50,-41],[-80,-43],[-125,-56],[-25,-12],[-10,-1],[-8,8],[8,9],[8,1],[60,28],[35,15],[-17,7],[-20,0],[-26,-3],[-34,19],[-21,-25],[-27,-30],[-47,-1],[-33,15],[19,-18],[-6,-29],[-19,-19],[-25,-23],[-33,-8],[-13,44],[-27,-16],[-20,-4],[-26,-33],[-83,18],[-13,-5],[-13,-36],[-28,-5],[-36,-10],[-19,-9],[-20,17],[-19,4],[-14,-8],[-2,-23],[-4,-24],[-16,-12],[-27,11],[-41,2],[-27,20],[-18,-17],[-18,-25],[-17,-19],[-54,-8],[-69,-47],[-38,-10],[-129,-31],[-72,-13],[-83,-52],[-21,-21],[-12,-8],[-14,5],[10,12],[1,20],[-16,18],[-35,-10],[-19,-25],[0,-34],[132,-2],[39,-2],[-8,-19],[-159,-4],[-57,6],[-20,9],[-56,-13],[-107,-65],[-53,-28],[0,30],[112,57],[77,43],[17,22],[9,18],[-3,11],[-12,12],[-22,20],[-21,17],[-18,7],[-28,-11],[-22,-8],[-11,-9],[-7,-10],[-11,-18],[-2,-20],[12,-31],[8,-41],[-18,-11],[-7,14],[-18,1],[-19,0],[-7,-13],[-12,-7],[-59,-12],[-20,3],[-10,19],[14,9],[3,14],[-8,17],[-32,18],[-13,32],[6,42],[15,23],[14,34],[-4,29],[18,28],[5,13],[9,8],[13,11],[14,9],[12,35],[4,41],[33,67],[28,34],[27,-19],[21,5],[12,-13],[48,46],[56,-11],[27,-47],[9,45],[-18,42],[11,50],[20,3],[13,-22],[10,-29],[9,-14],[15,12],[7,26],[-4,26],[-41,22],[2,24],[14,26],[19,1],[39,-22],[11,-40],[16,-33],[9,16],[-10,82],[27,70],[85,33],[57,7],[9,-28],[-3,-10],[-17,-19],[-15,8],[-11,-10],[18,-27],[30,-3],[2,18],[3,18],[18,-4],[0,-23],[17,-9],[9,11],[-4,18],[10,7],[-2,17],[-20,37],[-11,20],[11,41],[29,-20],[39,-7],[-12,-42],[11,-15],[15,-16],[20,8],[20,4],[23,-13],[16,1],[4,30],[-7,25],[-23,-2],[-27,2],[-13,32],[3,16],[7,17],[9,-1],[20,-16],[7,-24],[29,-12],[32,-3],[41,-10],[38,-25],[25,-7],[10,-6],[14,1],[58,24],[24,25],[15,34],[-6,37],[22,14],[28,11],[18,-9],[-7,-46],[16,-1],[12,7],[4,16],[-7,24],[10,5],[36,-19],[50,9],[137,-9],[89,13],[62,-9],[107,36],[86,5],[28,14],[82,75],[88,72],[23,41],[11,25],[40,9],[38,42],[31,49],[19,21],[69,46],[17,3],[20,-4],[16,-11],[7,-20],[-7,-25]],[[9856,1716],[-23,-30],[-13,-18],[-30,4],[-20,-9],[2,25],[13,13],[6,22],[13,-1],[10,-20],[7,15],[5,20],[22,4],[29,4],[18,12],[24,-1],[-9,-21],[-24,-12],[-30,-7]],[[6191,9999],[160,-25],[36,1],[22,-3],[126,1],[126,1],[126,1],[127,2],[126,1],[126,1],[126,1],[126,1],[126,1],[127,1],[126,1],[126,1],[126,1],[60,1],[5,-26],[7,-51],[6,-33],[1,-14],[0,-18],[-5,-29],[-4,-18],[-6,-15],[-21,-44],[-5,-13],[-7,-27],[-2,-14],[-2,-26],[1,-13],[2,-15],[6,-19],[5,-13],[6,-10],[24,-33],[4,-10],[3,-10],[1,-11],[0,-15],[-1,-19],[-4,-32],[-4,-20],[-12,-45],[-4,-27],[-2,-50],[-2,-26],[-21,-85],[-2,-13],[-1,-13],[2,-49],[9,-80],[4,-19],[18,-48],[53,-115],[13,-36],[7,-32],[1,-13],[1,-21],[-1,-21],[-3,-32],[-7,-37],[-8,-27],[-24,-58],[-4,-12],[-3,-14],[-1,-15],[1,-18],[18,-100],[2,-22],[-1,-44],[-4,-47],[-5,-24],[-6,-16],[-14,-13],[-15,-11],[-14,-13],[-12,-16],[-6,-10],[-4,-11],[-2,-13],[-4,-47],[-5,-30],[-44,-178],[-15,-32],[-3,-14],[0,-15],[6,-20],[6,-12],[16,-28],[4,-10],[3,-14],[1,-19],[-1,-61],[1,-34],[12,-96],[6,-28],[5,-19],[9,-19],[4,-9],[3,-10],[1,-14],[0,-18],[-3,-29],[-7,-34],[-1,-14],[1,-13],[23,-54],[4,-10],[2,-18],[0,-23],[-2,-46],[-4,-25],[-66,-219],[-4,-20],[-2,-25],[0,-48],[2,-27],[7,-25],[9,-22],[3,-6],[2,-1],[5,2],[14,8],[14,13],[6,9],[6,10],[3,12],[6,39],[4,11],[5,10],[7,8],[7,5],[9,3],[9,1],[9,-1],[20,-6],[10,-5],[7,-10],[5,-12],[18,-80],[11,-19],[6,-6],[12,-14],[9,-18],[0,-49],[-1,-16],[0,-46],[-2,-72],[-1,-93],[-2,-110],[-2,-123],[-2,-131],[-2,-135],[-2,-136],[-2,-131],[-2,-123],[-2,-110],[-2,-93],[-1,-71],[0,-47],[-1,-16],[0,-24],[-4,-36],[-13,-78],[-11,-33],[15,-114],[14,-1],[-6,-23],[-10,-52],[-33,-160],[-33,-160],[-34,-160],[-33,-160],[-33,-160],[-33,-161],[-33,-160],[-33,-160],[-17,-81],[-8,-41],[34,-54],[-5,-102],[-5,-103],[-5,-103],[-5,-102],[-5,-103],[-5,-102],[-4,-103],[-5,-103],[-5,-102],[-5,-103],[-5,-103],[-5,-102],[-5,-103],[-5,-102],[-5,-103],[-5,-102],[-2,-43],[23,-54],[18,-41],[17,-39],[19,-36],[-21,-20],[-61,-51],[-77,-63],[-70,-58],[-56,-46],[-18,-16],[7,-16],[31,-64],[31,-65],[4,-7],[6,-5],[3,-4],[4,-7],[6,-19],[4,-15],[6,-25],[-10,-10],[3,-10],[-6,-22],[-27,-52],[-3,-9],[-28,0],[-15,-3],[-12,-14],[-56,-82],[-16,-35],[-7,-40],[-7,-10],[-15,1],[-15,-2],[-6,-20],[-4,-51],[19,-29],[9,-28],[-41,-6],[-45,3],[-36,-18],[-41,2],[-7,29],[0,17],[8,23],[13,46],[8,26],[-5,29],[-11,12],[30,97],[11,92],[18,91],[4,45],[0,182],[-4,83],[-14,76],[-12,35],[-15,23],[-42,50],[-21,48],[5,38],[10,36],[-2,44],[-24,-24],[-13,-18],[-7,-18],[-4,-32],[4,-19],[5,-18],[10,-75],[9,-29],[13,-37],[26,-24],[18,-33],[1,-39],[-5,-97],[18,-190],[0,-57],[-126,101],[-125,102],[-125,101],[-125,101],[-125,101],[-126,102],[-125,101],[-125,101],[-7,44],[-19,48],[-12,22],[-9,36],[-7,17],[-9,7],[-15,-5],[-12,-8],[-14,0],[-16,20],[-24,20],[-62,-5],[-31,8],[-18,22],[-12,25],[-16,21],[-56,18],[-22,25],[-17,35],[-64,182],[-16,21],[-4,22],[8,115],[0,46],[-17,84],[4,20],[17,19],[4,21],[-5,48],[-16,21],[-22,10],[-26,19],[29,48],[5,20],[-16,9],[-12,9],[-18,42],[-34,16],[-28,32],[-16,7],[-70,-15],[-21,21],[-7,49],[-3,55],[-7,41],[-27,25],[-40,24],[-30,31],[1,30],[-16,0],[-28,0],[-172,0],[-172,0],[-172,0],[-172,0],[-172,0],[-172,1],[-172,0],[-173,0],[-172,0],[-172,0],[-172,1],[-172,0],[-172,0],[-172,0],[-172,0],[-172,0],[-172,1],[-172,0],[-172,0],[-172,0],[-172,0],[-172,0],[-172,1],[-172,0],[-172,0],[-173,0],[-172,0],[-172,1],[-172,0],[-172,0],[-172,0],[-172,0],[-46,0],[0,75],[0,65],[0,64],[0,65],[0,64],[0,65],[0,65],[0,64],[0,65],[0,75],[0,75],[0,75],[0,76],[0,75],[0,75],[0,75],[0,74],[164,103],[194,121],[194,121],[195,122],[194,121],[71,83],[56,109],[12,90],[-8,39],[-26,28],[-30,13],[-30,22],[-32,33],[-17,25],[-12,25],[4,47],[8,33],[-1,19],[-10,19],[-14,19],[-17,28],[-10,19],[-3,21],[0,32],[5,22],[8,18],[5,19],[3,28],[1,24],[-7,199],[-6,39],[-42,143],[-104,271],[120,76],[168,106],[247,156],[80,33],[291,-2],[292,-2],[292,-2],[292,-1],[292,-2],[292,-2],[292,-1],[292,-2],[7,5],[7,6],[7,5],[7,6],[7,5],[7,5],[7,6],[7,5],[54,122],[55,122],[54,121],[54,122],[54,122],[54,121],[54,122],[54,122],[32,42],[101,107],[7,14],[4,17],[5,18],[12,17],[13,8],[140,72],[27,18],[20,37],[0,12],[-11,54],[-1,15],[37,57],[104,96],[214,115],[35,20],[19,29],[13,38],[18,56],[51,72],[46,68],[69,120],[154,177],[155,178],[144,166],[90,105],[178,136],[69,23],[21,12],[55,55],[21,14],[74,34],[46,39],[22,9],[23,2]]],"transform":{"scale":[0.0007906386012049199,0.00045111385208520903],"translate":[-79.76300663544788,40.499434562000104]}}