hexbin

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

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png').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; });
                  max = 20
                  scale = d3.scale.quantize()
                          .domain([0, max])
                          .range(d3.range(classes));
              }

hexagons
                  .attr("stroke", "white")
                  .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