-
-
Save msbarry/ab59a22abacc916cd7e8b37302754cf3 to your computer and use it in GitHub Desktop.
Choropleth U.S. county map
This file contains hidden or 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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Independent Farms by County - Choropleth</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script> | |
| <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script> | |
| </head> | |
| <!-- CSS --> | |
| <style> | |
| path { | |
| stroke:white; | |
| stroke-width: 1px; | |
| } | |
| body { | |
| font-family: 'Proxima Nova', sans-serif; | |
| } | |
| .county { | |
| font: 14px sans-serif; | |
| font-weight: bold; | |
| } | |
| .legend { | |
| font-size: 14px; | |
| font-family: 'Proxima Nova', sans-serif; | |
| } | |
| .legend_title { | |
| font-size: 14px; | |
| font-family: 'Proxima Nova', sans-serif; | |
| font-weight: bold; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| left: 75px; | |
| text-align: center; | |
| height: 16px; | |
| padding: 10px; | |
| font-size: 14px; | |
| background: #FFFFFF; | |
| border: 1px solid #989898; | |
| pointer-events: none; | |
| } | |
| p { | |
| font-family: 'Proxima Nova', sans-serif; | |
| font-size:10px; | |
| margin: 20px 0 0 10px; | |
| } | |
| @media (max-width: 400px) { | |
| .d3map { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| <body> | |
| <h1>Independent Farms in the USA</h1> | |
| <script type="text/javascript"> | |
| var width = 960, height = 600; | |
| var color_domain = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000] | |
| var ext_color_domain = [0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000] | |
| var legend_labels = ["< 500", "500+", "1000+", "1500+", "2000+", "2500+", "3000+", "3500+", "4000+", "4500+", "5000+", "5500+", "6000+"] | |
| var color = d3.scale.threshold() | |
| .domain(color_domain) | |
| .range(["#dcdcdc", "#d0d6cd", "#bdc9be", "#aabdaf", "#97b0a0", "#84a491", "#719782", "#5e8b73", "#4b7e64", "#387255", "#256546", "#125937", "#004d28"]); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("margin", "-15px auto"); | |
| var path = d3.geo.path() | |
| queue() | |
| .defer(d3.json, "us.json") | |
| .defer(d3.csv, "https://usafactsstatic.blob.core.windows.net/public/data/covid-19/covid_confirmed_usafacts.csv") | |
| .defer(d3.csv, "https://usafactsstatic.blob.core.windows.net/public/data/covid-19/covid_county_population_usafacts.csv") | |
| .await(ready); | |
| function ready(error, us, convirmed, populations) { | |
| var pairRateWithId = {}; | |
| var pairNameWithId = {}; | |
| //Moves selction to front | |
| d3.selection.prototype.moveToFront = function() { | |
| return this.each(function(){ | |
| this.parentNode.appendChild(this); | |
| }); | |
| }; | |
| //Moves selction to back | |
| d3.selection.prototype.moveToBack = function() { | |
| return this.each(function() { | |
| var firstChild = this.parentNode.firstChild; | |
| if (firstChild) { | |
| this.parentNode.insertBefore(this, firstChild); | |
| } | |
| }); | |
| }; | |
| data.forEach(function(d) { | |
| pairRateWithId[d.id] = +d.rate; | |
| pairNameWithId[d.id] = d.name; | |
| }); | |
| svg.append("g") | |
| .attr("class", "county") | |
| .selectAll("path") | |
| .data(topojson.feature(us, us.objects.counties).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .style ( "fill" , function (d) { | |
| return color (pairRateWithId[d.id]); | |
| }) | |
| .style("opacity", 0.8) | |
| .on("mouseover", function(d) { | |
| var sel = d3.select(this); | |
| sel.moveToFront(); | |
| d3.select(this).transition().duration(300).style({'opacity': 1, 'stroke': 'black', 'stroke-width': 1.5}); | |
| div.transition().duration(300) | |
| .style("opacity", 1) | |
| div.text(pairNameWithId[d.id] + ": " + pairRateWithId[d.id]) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY -30) + "px"); | |
| }) | |
| .on("mouseout", function() { | |
| var sel = d3.select(this); | |
| sel.moveToBack(); | |
| d3.select(this) | |
| .transition().duration(300) | |
| .style({'opacity': 0.8, 'stroke': 'white', 'stroke-width': 1}); | |
| div.transition().duration(300) | |
| .style("opacity", 0); | |
| }) | |
| }; | |
| var legend = svg.selectAll("g.legend") | |
| .data(ext_color_domain) | |
| .enter().append("g") | |
| .attr("class", "legend"); | |
| var ls_w = 73, ls_h = 20; | |
| legend.append("rect") | |
| .attr("x", function(d, i){ return width - (i*ls_w) - ls_w;}) | |
| .attr("y", 550) | |
| .attr("width", ls_w) | |
| .attr("height", ls_h) | |
| .style("fill", function(d, i) { return color(d); }) | |
| .style("opacity", 0.8); | |
| legend.append("text") | |
| .attr("x", function(d, i){ return width - (i*ls_w) - ls_w;}) | |
| .attr("y", 590) | |
| .text(function(d, i){ return legend_labels[i]; }); | |
| var legend_title = "Number of independent farms"; | |
| svg.append("text") | |
| .attr("x", 10) | |
| .attr("y", 540) | |
| .attr("class", "legend_title") | |
| .text(function(){return legend_title}); | |
| </script> | |
| <p>Source: U.S. Census</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment