Graffiti in Vancouver

Hexbin layer showing locations of sites with graffiti as identified by Vancouver City staff.

Data from the City of Vancouver's Open Data Catalogue.

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

L.tileLayer('https://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
              attribution: '<a id="home-link" target="_top" href="../">Map tiles</a> by <a target="_top" href="https://stamen.com">Stamen Design</a>, under <a target="_top" href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" href="https://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
          }).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