Overweight NY Students: #4

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

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/topojson.v1.js to a secure url

https://d3js.org/d3.v3.js

https://d3js.org/topojson.v1.js