D3 Examples - Automatic Hexbinning

Automatic Hexbinning - d3.carto

Automatic hexbinning in d3.carto.map allows for the creation of granular or high resolution heatmaps.

The map.createHexbinLayer function takes two variable: a point d3.carto.layer (either CSV or XY Array) and a resolution (in degrees). It creates a feature carto layer that automatically bins the points in the source layer and which you can then add to the map easily.

In this example, I generate two different hexbin resolutions: One at 2-degree and one at .75 degree, so that you can see how simple it is. The original point objects are found in the properties.node attribute of each hex feature and can be used to count the number or average the population, etc.

This requires a slightly modified hexbin.js (also in this gist) to work.

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Automatic Hexbinning</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
​
  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
​
</style>
<script>
      function makeSomeMaps() {
    map = d3.carto.map();
​
    d3.select("#map").call(map);
    
    tileLayer = d3.carto.layer();
    tileLayer
    .type("tile")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
    
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("all_sites.csv")
    .label("CSV Points")
    .cssClass("pinkcircle")
    .renderMode("canvas")
    .markerColor("black")
    .markerSize(.5)
    .x("xcoord")
    .y("ycoord")
    .on("load", makeHexbins)
    
    map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
    map.centerOn([100,30],"latlong").setScale(3);
    
    function makeHexbins() {
      var colorScale = d3.scale.linear().domain([1,5,30]).range(["green","yellow","red"])
      hexbinLayerLarge = map.createHexbinLayer(csvLayer, 2);
      hexbinLayerSmall = map.createHexbinLayer(csvLayer, .75);
      hexbinLayerLarge
      .label("2 Degree Hexbin")
      .visibility(false)
      .on("load", function() {hexbinLayerLarge.g().selectAll("path").style("opacity", .5).style("fill", function(d) {return colorScale(d.properties.node.length)})})
​
      hexbinLayerSmall
      .label(".75 Degree Hexbin")
      .on("load", function() {hexbinLayerSmall.g().selectAll("path").style("opacity", .5).style("fill", function(d) {return colorScale(d.properties.node.length)})})
      
      map.addCartoLayer(hexbinLayerSmall);
      map.addCartoLayer(hexbinLayerLarge);
      
    }
​
  }
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
<script src="hexbin.js" type="text/javascript">
</script>
</footer>
</body>
</html>
    