Choropleth with time slider

My attempt to create a timeline slider applied to a choropleth map showing the amount of medicaid spending by county for the state of Oklahoma from 2000 to 2010. Data courtesy of the Oklahoma Policy Institute.

<!DOCTYPE html>
<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;
	}
	
		
div.tooltip {   
  position: absolute;           
  text-align: left;                 
  padding: 2px;           
  font: 12px sans-serif;        
  background: #bbb;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

</style>
<html>
	<body>
		<input id="slider" type="range" min="2000" max="2010" value="2000" step="1" />

<span id="range">2000</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 formatCurrency = d3.format(",");
			
			var div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

var color = d3.scale.linear().domain([560994, 704013191]).range(["#FEE8C8", "#B30000"]);

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-countiesMedicaid.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.aught);
				})
				.on("mouseover", function (d) {
				div.transition()
				.duration(200)
				.style("opacity", .9);
				div.html(
					"<h2>County: " + d.properties.county + "</h2>"
					 + "<table><tr><th>Year</th><th>Medicaid Amount</th></tr>"
					 + "<tr><td>2000</td><td>$" + formatCurrency(d.properties.aught) + "</td></tr>"
					 + "<tr><td>2001</td><td>$" + formatCurrency(d.properties.one) + "</td></tr>"
					 + "<tr><td>2002</td><td>$" + formatCurrency(d.properties.two) + "</td></tr>"
					 + "<tr><td>2003</td><td>$" + formatCurrency(d.properties.three) + "</td></tr>"
					 + "<tr><td>2004</td><td>$" + formatCurrency(d.properties.four) + "</td></tr>"
					 + "<tr><td>2005</td><td>$" + formatCurrency(d.properties.five) + "</td></tr>"
					 + "<tr><td>2006</td><td>$" + formatCurrency(d.properties.six) + "</td></tr>"
					 + "<tr><td>2007</td><td>$" + formatCurrency(d.properties.seven) + "</td></tr>"
					 + "<tr><td>2008</td><td>$" + formatCurrency(d.properties.eight) + "</td></tr>"
					 + "<tr><td>2009</td><td>$" + formatCurrency(d.properties.nine) + "</td></tr>"
					 + "<tr><td>2010</td><td>$" + formatCurrency(d.properties.ten) + "</td></tr></table>"
					)
				.style("left", (d3.event.pageX) + "px")
				.style("top", (d3.event.pageY) + "px")
			})
			.on("mouseout", function (d){
				div.transition()
				.duration(500)
				.style("opacity", 0);
			});

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 "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", "#B30000").attr("stop-opacity", 1);

legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").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([560994, 704013191]);

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("% Hispanic");
			//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