| license: gpl-3.0 |
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.
forked from mbostock's block: Plant Hardiness Zones
| <!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="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var color = d3.scale.linear() | |
| .domain([-35, 0, 35]) | |
| .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("Avg. annual extreme minimum temperature, °F"); | |
| d3.json("ophz.json", function(error, ophz) { | |
| if (error) throw error; | |
| topojson.feature(ophz, ophz.objects.b) | |
| .features | |
| .sort(function(a, b) { return a.t - b.t; }) | |
| .forEach(render); | |
| }); | |
| function pair(array) { | |
| return array.slice(1).map(function(b, i) { | |
| return [array[i], b]; | |
| }); | |
| } | |
| function render(d) { | |
| var t = d.properties.t; | |
| if (t <= -98) return; | |
| context.fillStyle = color(t); | |
| context.beginPath(); | |
| path(d); | |
| context.fill(); | |
| } | |
| </script> |