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.
Last active
December 16, 2015 06:38
-
-
Save darrenjaworski/5392389 to your computer and use it in GitHub Desktop.
Choropleth with time slider
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; | |
| } | |
| 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="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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment