Hexbins are not showing on geo tile map D3.JS

I'll use this example to build my answer. This zoomable example, as opposed to this example one, is zoomable.

Projection Scale

First, I'll just explain the scale using the above example. It uses a projection that has a starting scale of 1/tau: the 2 π radians of the world are stretched over one pixel. The translate is [0,0], so that 0°N, 0°E is at [0,0] of the SVG. The scale and translate of the map is managed by d3.zoom:

projection.scale(transform.k / Math.PI / 2)
  .translate([transform.x, transform.y]);

As k represents the zoom factor, and our starting map width was 1, k represents map width and height. Dividing by tau we get how many pixels of the map correspond to each radian of the earth. The translate centers the map.

The reason why you can't see any hexbins in your example is because you use a scale of that stretches the earth over and area 4194304 pixels wide (1<<22), but your hexbins only stretch over an area the size of your SVG. You see no hexagons because the extent of your SVG represents only a small geographic extent - some area of ocean north of the Bering Sea.

Also for reference: The relationship between map scale and map width is not consistent across all map projections

Adding hexbins (fixed)

If we want hexagonal binning with bins that remain the same geographical size regardless of zoom, we can set the radius and extent to reflect our initial projection (before applying the zoom):

var hexbin = d3.hexbin()
    .radius(0.01)
    .extent([[-0.5, -0.5], [0.5, 0.5]]); 

We can then pass it projected points, using the initial projection, and transform the hexagons based on the zoom while scaling the stroke width of the hexagons based on zoom scale:

Adding hexbins (updated with zoom)

However, if we want to change the bins scale as we zoom in the code is potentially a bit easier, but computationally more complex. To do so we recalculate the hexbins each zoom based on the projected coordinates of the points after applying the current projection:

var hexbin = d3.hexbin()
 .radius(30)
 .extent([[0,0], [width,height]]) // extent of projected data (displayed)
 .x(function(d) { return projection(d)[0]; })
 .y(function(d) { return projection(d)[1]; })

The extent and radius reflect the entire SVG extent - the visible extent to which we are projecting the data after the zoom is applied - the extent we want to add hexagons to. Below I recalculate the hexes each zoom/pan:

Both examples randomly create some data over land masses, this is the primary reason for the slow load

Last thoughts

Both examples leave a fair amount to be desired, the method of organizing coordinate spaces with d3-tile and the hexagons is a bit less intuitive than possible - and can take a bit to get used to. But, for the moment there aren't a lot of alternatives.