Leaflet + D3js: Hexbin

This hexbin map shows the proximity of earthquakes (magnitude 3.0 or greater) in the Canterbury region of New Zealand during the month of September, 2010.

The map is created using Leaflet. The hexbin layer is a custom Leaflet layer which uses d3js to generate a svg hexbin overlay. The source for the custom leaflet layer is viewable here.

Earthquake data sourced from GeoNet.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
          }).addTo(map);

// Async call for data. Source URL is loaded from container element's
          // 'data-source' attribute.
          d3.json(container.dataset.source, function(collection) {
              // When data arrives, create leaflet layer with custom style callback.
              L.hexLayer(collection, {
                  applyStyle: hex_style
              }).addTo(map);
          });

/**
           * Hexbin style callback.
           *
           * Determines a quantize scale (https://bl.ocks.org/4060606) based on the
           * map's initial data density (which is based on the initial zoom level)
           * and applies a colorbrewer (https://colorbrewer2.org/) colour scheme
           * accordingly.
           */
          function hex_style(hexagons) {
              // Maintain a density scale relative to initial zoom level.
              if (!(max && scale)) {
                  max = d3.max(hexagons.data(), function (d) { return d.length; });
                  scale = d3.scale.quantize()
                          .domain([0, max])
                          .range(d3.range(classes));
              }

hexagons
                  .attr("stroke", scheme[classes - 1])
                  .attr("fill", function (d) {
                      return scheme[scale(d.length)];
                  });
          }
      }());
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.hexbin.v0.js to a secure url

Modified http://cdn.leafletjs.com/leaflet-0.5/leaflet-src.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.hexbin.v0.js

https://cdn.leafletjs.com/leaflet-0.5/leaflet-src.js