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()), which will scale sizes from between 3.5 to 15 pixels:

radiusScale = d3.scaleSqrt().domain([0, maxCount]).range([3.5, 15]);

You can now use it when you draw the hexagons, which you should also sort ascendingly so that the larger ones aren’t covered by the many small hexagons around them:

function drawHexmap(points) {
  var hexes = svg.append('g').attr('id', 'hexes')
    .selectAll('.hex')
    .data(points.sort(function(a,b) { 
        return a.datapoints - b.datapoints;        
    }))
    .enter().append('path')
      .attr('class', 'hex')
      .attr('transform', function(d) { 
        return 'translate(' + d.x + ', ' + d.y + ')'; 
      })
      .attr('d', function(d) { 
        return hexbin.hexagon(radiusScale(d.datapoints)); 
      })
      .style('fill', function(d) { return 
        d.datapoints === 0 ? 'none' : colorScale(d.datapoints); 
      })
      .style('stroke', '#ccc')
      .style('stroke-width', 1);
}

You get hexagons not only colored, but also sized by the number of markets within the hexagon:

We double encode the number of markets as color and size here. That’s sometimes useful, but you have two encoding channels at your disposal here, which you can use for two variables to produce a bi-variate hexbin map. It's your choice.

We’ve covered a few options to improve and add to our hexbin map. There are certainly more options to have fun with. For example, we haven’t touched on zooming and panning, which is, of course, a standard map interaction technique and would be a good addition for people to dive into smaller hexagons. I’m sure that you can think of more ways to build on it.