A choropleth map of Oklahoma showing the hispanic population statewide. This is an updated vesion of work I published for Oklahoma Watch. It uses D3 and TOPOJSON to render the map from data collected by Katherine Borgerding and Juan Sanchez.
Last active
December 16, 2015 06:09
-
-
Save darrenjaworski/5389469 to your computer and use it in GitHub Desktop.
OK Choropleth
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> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| //choropleth | |
| var width = 800, height = 400; | |
| var color = d3.scale.linear().domain([1.9, 42]).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-countiesHispanic.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.percent); | |
| }).append("title").text(function(d) { | |
| return d.properties.percent + "% of the population is hispanic. Estimated number of hispanic: " + d.properties.number; | |
| }); | |
| svg.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) { | |
| return a !== b; | |
| })).attr("class", "county-border").attr("d", path); | |
| }); | |
| //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([1, 42]); | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment