Bivariate Hexbin Map

This example shows how to use the d3.hexbin plugin for hexagonal binning on a map with the d3.geo.albersUsa projection. Approximately 3,000 locations of Walmart stores are shown. These are binned into hexagons, and the hexagon area encodes the number of stores that fall into each bin. Color encodes the median age of Walmart stores in that area, with the oldest stores in black and the youngest stores in blue. Inspired by earlier work by Zachary Forest Johnson.

forked from mbostock's block: Bivariate Hexbin Map

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke-linejoin: round;
}

.land {
  fill: #ddd;
}

.states,
.hexagons path {
  stroke: #fff;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="hexbin.min.js"></script>
<script>

var width = 960,
    height = 500,
    parseDate = d3.time.format("%x").parse;

var color = d3.time.scale()
    .domain([new Date(1962, 0, 1), new Date(2006, 0, 1)])
    .range(["black", "steelblue"])
    .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
    .size([width, height])
    .radius(8);

var radius = d3.scale.sqrt()
    .domain([0, 12])
    .range([0, 8]);

var projection = d3.geo.albers()
    .scale(1000)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")
    .defer(d3.tsv, "readme-walmart.tsv")
    .await(ready);

function ready(error, us, walmarts) {
  if (error) throw error;

walmarts.forEach(function(d) {
    var p = projection(d);
    d[0] = p[0], d[1] = p[1];
    d.date = parseDate(d.date);
  });

svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);

svg.append("g")
      .attr("class", "hexagons")
    .selectAll("path")
      .data(hexbin(walmarts).sort(function(a, b) { return b.length - a.length; }))
    .enter().append("path")
      .attr("d", function(d) { return hexbin.hexagon(radius(d.length)); })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style("fill", function(d) { return color(d3.median(d, function(d) { return +d.date; })); });
}

</script>

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

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

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