Learning D3.js 5 Mapping - Second Edition

Encoding data as hexagon size

So far, we have encoded data only as color. d3.hexbin() makes it very easy to encode data by hexagon size. Theoretically, you just have to go to your drawHexmap() function and change a single line:

  .attr('d', function(d) { return hexbin.hexagon(d.datapoints); })

You just add a hexagon-specific radius to your hexbin path generator (as an optional argument to the .hexagon() method), which in our case above makes sure that each hexagon gets a radius as little or large as this hexagon’s count of farmers' markets. However, that would look excessive as most would get a radius of 0 and some would get a radius of over 100. I’ll spare you the visual.

Instead, we will add the variable radiusScale to the mix (in rollUpHexPoints() ...