Building d3-hexgrid

click △ to get to the actual thing

Hexagons have a couple of unbeatable skills when it comes to visualising point location data on a map. They subdivide the plane in a consistent way, friendly to the base map's shape and as such to the readers' eyes. They bin data almost as good as circles would, but - unlike circles - can subdivide the plane gap-free.


Why the hassle? Just show all the points? Sometimes great, it frequently produces generally busy areas of overlapping dots - ultimately not showing all the points.


So hexagons. d3-hexgrid is a d3-plugin that generates a gridded hexagon layout for maps. It's a wrapper around the already sterling d3-hexbin which it complements in three ways:


  1. d3-hexbin produces hexagons where there is data. d3-hexgrid produces hexagons where there is a base geography you define.
  2. It calculates the correct cover of edge hexagons, calculating point density rather than absolute numbers of points. This allows for truthful encoding of edge hexagons.
  3. It provides some handy data summaries and extents that support and simplify the (frequently used colour) encoding.

There's a post on how d3-hexgrid works internally over here, and you can get the source from GitHub or NPM.


The actual thing