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.
Last active
March 10, 2021 09:17
-
-
Save darrenjaworski/5397202 to your computer and use it in GitHub Desktop.
Choropleth with time slider - 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; | |
| } | |
| </style> | |
| <html> | |
| <body> | |
| <input id="slider" type="range" min="1987" max="2010" value="1987" step="1" /> | |
| <span id="range">1987</span> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://raw.github.com/fryn/html5slider/master/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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment