Plant Hardiness Zones

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.

<!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>

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js