D3 Examples - hexbin

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
​
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3.hexbin.v0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
​
    <script src="colorbrewer.js"></script>
    <script src="leaflet.hexbin-layer.js"></script>
​
    <style type="text/css">
      html, body { margin: 0; padding: 0; height: 100%; }
      #my-map { min-height: 100%; }
      .hexagon { opacity: 1 }
    </style>
  </head>
  <body>
    <div id='my-map' data-source="dest.geojson"></div>
    <script type="text/javascript">
      (function () {
          var max, scale,
              classes = 11,
              scheme = colorbrewer["Blues"][classes],
              container = L.DomUtil.get('my-map'),
              map = L.map(container).setView([44.8404400, -0.5805000], 13);
​
          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>
​
    