A continuation of my original post. This time with student teacher ratio and an expanded timeline. I'm going to be upgrading this one to version 2.0 of a time slider with a map. Data courtesy of the Oklahoma Policy Institute.
xxxxxxxxxx
<meta charset="utf-8">
<style>
.county-border {
fill: none;
stroke: white;
pointer-events: none;
}
.axis text {
font: 10px sans-serif;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<html>
<body>
<input id="slider" type="range" min="1987" max="2010" value="1987" step="1" />
<span id="range">1987</span>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fryn/html5slider/html5slider.js"></script>
<script type="text/javascript">
onload = function() {
var $ = function(id) { return document.getElementById(id); };
$('slider').oninput = function() { $('range').innerHTML = this.value; };
$('slider').oninput();
};
</script>
<script>
//choropleth
var width = 800, height = 400;
var value;
var color = d3.scale.linear().domain([7, 25]).range(["#F7FBFF", "#08306B"]);
var projection = d3.geo.conicConformal().parallels([35 + 34 / 60, 90 + 46 / 60]).rotate([98 + 00 / 60, -35 + 00 / 60]).translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
d3.json("ok-countiesStudentRatio.json", function(error, ok) {
var counties = topojson.feature(ok, ok.objects.counties);
projection.scale(1).translate([0, 0]);
var b = path.bounds(counties), s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection.scale(s).translate(t);
svg.selectAll("path").data(counties.features.filter(function(d) {
return d.id;
})).enter().append("path").attr("class", "county").attr("d", path).style("fill", function(d) {
return color(d.properties.eightyseven);
}).append("title").text(function(d) {
return d.properties.county + " County";
});
svg.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
return a !== b;
})).attr("class", "county-border").attr("d", path);
d3.selectAll("input").on("change", function change() {
var value = this.value;
d3.selectAll("path").style("fill", function(d) {
switch (value) {
case "1987":
return color(d.properties.eightyseven);
break;
case "1988":
return color(d.properties.eightyeight);
break;
case "1989":
return color(d.properties.eightynine);
break;
case "1990":
return color(d.properties.ninety);
break;
case "1991":
return color(d.properties.ninetyone);
break;
case "1992":
return color(d.properties.ninetytwo);
break;
case "1993":
return color(d.properties.ninetythree);
break;
case "1994":
return color(d.properties.ninetyfour);
break;
case "1995":
return color(d.properties.ninetyfive);
break;
case "1996":
return color(d.properties.ninetysix);
break;
case "1997":
return color(d.properties.ninetyseven);
break;
case "1998":
return color(d.properties.ninetyeight);
break;
case "1999":
return color(d.properties.ninetynine);
break;
case "2000":
return color(d.properties.aught);
break;
case "2001":
return color(d.properties.one);
break;
case "2002":
return color(d.properties.two);
break;
case "2003":
return color(d.properties.three);
break;
case "2004":
return color(d.properties.four);
break;
case "2005":
return color(d.properties.five);
break;
case "2006":
return color(d.properties.six);
break;
case "2007":
return color(d.properties.seven);
break;
case "2008":
return color(d.properties.eight);
break;
case "2009":
return color(d.properties.nine);
break;
case "2010":
return color(d.properties.ten);
break;
}
});
});
});
//end choropleth
//key
var w = 140, h = 400;
var key = d3.select("body").append("svg").attr("id", "key").attr("width", w).attr("height", h);
var legend = key.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");
legend.append("stop").attr("offset", "0%").attr("stop-color", "#08306B").attr("stop-opacity", 1);
legend.append("stop").attr("offset", "100%").attr("stop-color", "#F7FBFF").attr("stop-opacity", 1);
key.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)").attr("transform", "translate(0,10)");
var y = d3.scale.linear().range([300, 0]).domain([7, 25]);
var yAxis = d3.svg.axis().scale(y).orient("right");
key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("Student teacher ratio");
//end key
d3.select(self.frameElement).style("height", height + "px");
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
Updated missing url https://raw.github.com/fryn/html5slider/master/html5slider.js to https://cdn.jsdelivr.net/gh/fryn/html5slider/html5slider.js
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js
https://raw.github.com/fryn/html5slider/master/html5slider.js