This map of plant hardiness zones shows the average annual extreme minimum temperature (from 1976-2005) across the contiguous United States. Data via Bill Morris’ Open Plant Hardiness Zones project.
-
-
Save wboykinm/7001388 to your computer and use it in GitHub Desktop.
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| position: relative; | |
| } | |
| .key { | |
| font: 10px sans-serif; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .caption { | |
| font-weight: bold; | |
| } | |
| .key path { | |
| display: none; | |
| } | |
| .key line { | |
| 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> | |
| var width = 960, | |
| height = 500; | |
| var color = d3.scale.linear() | |
| .domain([5000, 20000000, 1000000000]) | |
| .range(["#4575b4", "#ffffbf", "#a50026"]) | |
| .interpolate(d3.interpolateHcl); | |
| var x = d3.scale.linear() | |
| .domain([-40, 40]) | |
| .range([0, 240]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickSize(13) | |
| .tickFormat(d3.format("+.0f")); | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var context = canvas.node().getContext("2d"); | |
| var path = d3.geo.path() | |
| .projection(null) | |
| .context(context); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("class", "key") | |
| .append("g") | |
| .attr("transform", "translate(60," + (height - 60) + ")"); | |
| svg.selectAll("rect") | |
| .data(pair(x.ticks(10))) | |
| .enter().append("rect") | |
| .attr("height", 8) | |
| .attr("x", function(d) { return x(d[0]); }) | |
| .attr("width", function(d) { return x(d[1]) - x(d[0]); }) | |
| .style("fill", function(d) { return color(d[0]); }); | |
| svg.call(xAxis).append("text") | |
| .attr("class", "caption") | |
| .attr("y", -6) | |
| .text("Population in 2010"); | |
| d3.json("countries2.json", function(error, ophz) { | |
| topojson.feature(ophz, ophz.objects.b) | |
| .features | |
| .sort(function(a, b) { return a.POP_EST - b.POP_EST; }) | |
| .forEach(render); | |
| }); | |
| function pair(array) { | |
| return array.slice(1).map(function(b, i) { | |
| return [array[i], b]; | |
| }); | |
| } | |
| function render(d) { | |
| var pop = d.properties.POP_EST; | |
| if (pop <= -98) return; | |
| context.fillStyle = color(pop); | |
| context.beginPath(); | |
| path(d); | |
| context.fill(); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment