|
<!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="http://d3js.org/d3.v3.js"></script> |
|
<script src="http://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> |
