please wait

  • Arminder Gill Feb-12-2019 07:15:50 AM ( 5 months ago )


    I have a map I've created with d3-tile. I've added code to show hexbins gathered from the dataset based on longitude and latitude. But the hexbins are not showing. I've only found examples that plot plain cartesian data in hexbins, not latitude longitudes with hexbins laid over a map made with d3-tile. Why are my hexbins not showing?


    Here's how I define the projection, tiles and hexbins:

    var projection = d3.geo.mercator()
       .scale((1 << 22) / 2 / Math.PI) 
       .translate([width / 2, height / 2]);
    var tile = d3.geo.tile()
      .size([width, height]);
    // define hexbins
    var hexbin = d3.hexbin()
       .size([width, height])

    And here's how I process my data and add hexbins to the map:

    data.forEach(function (d) { =;
        d.lon = +d.lon;
    points = [];
    // x,y maps to lng,lat - ref[2]
    data.forEach(function (d) { =;
       d.lon = +d.lon;
       var x = projection([d.lon,])[0];
       var y = projection([d.lon,])[1];
       points.push([x, y]);
    // bin coords
    var bins = hexbin(points);
    var bins_n = []; // points per hexbin
    bins.forEach(function (d) {
    // second of two scales for linear hexagon fill - ref[1]
    var extent = d3.extent(bins_n);
    var fill_scale2 =
  • Nageshwer Reddy Feb-12-2019 07:17:22 AM ( 5 months ago )

    That's a very large value for a scale - if you log the projected x,y coordinates (or points in your case), you'll probably see coordinates that aren't within the bounds of your svg. The scale for d3-tile is usually 1/Math.PI/2: it projects the world to a one pixel square and then uses the zoom to translate and scale it across the screen. It is not the most intuitive method. The projection is causing your issues, but with the zoom, the hexagon is a little bit more complex than usual. I'm a bit busy at the moment, but will take a closer look in a bit.

  • Apoorva Saxena Feb-12-2019 07:18:19 AM ( 5 months ago )

    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()
        .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()
     .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.


Please login

Similar Discussion

Recommended For You