Points are nice and do look pretty, but we’re here for hexagons. So, let’s finally draw them and introduce the D3-hexbin plugin.

It needs the following two things from us and returns two, surely more valuable, things:

• We need to provide a set of points in screen coordinates and the radius we would like to see.
• It returns a grid of hexagon center points (one for each hexagon) and a hexagon path generator.

We then take the new center points and the path generator and—as is custom with D3—draw it ourselves with the renderer of our choice. Let’s first get the hexagon center points and then draw them with SVG. In our ready() function, we will add the following two lines:

function ready(error, us) {
  //previous steps

  var hexPoints = getHexPoints(usPoints);
  drawHexmap(hexPoints);

}

getHexPoints() retrieves the center points and drawHexmap() draws them.