Cambridge Bike Theft

Sources:

https://github.com/martinjc/UK-GeoJSON
https://data.police.uk

<title>Cambridge Bike Theft</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
  crossorigin="" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  crossorigin=""></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
  body {
    padding: 0;
    margin: 0;
  }

html,
  body,
  #map {
    height: 100%;
    width: 100vw;
  }

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }

.info h4 {
    margin: 0 0 5px;
    color: #777;
  }

.info h1 {
    font-size: 48px;
    text-align: center;
  }

.info p {
    text-align: center;
  }

.legend {
    line-height: 18px;
    color: #555;
  }

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
  }
</style>
<div id="map"></div>
<script>
  d3.json("E07000008.json", function (error, data) {
    if (error) throw error;

d3.csv("output.csv", function (error, bicycleTheftData) {
      var nestedData = d3.nest()
        .key(function (d) {
          return d["Month"] < "2015-09" ? 0 :
            d["Month"] < "2016-09" ? 1 :
              2;
        })
        .key(function (d) { return d["LSOA code"]; })
        .rollup(function (leaves) { return leaves.length; })
        .entries(bicycleTheftData);

var features = data.features;

var map = L.map('map').setView([52.194096, 0.137282], 13);

map.createPane('labels');
      map.getPane('labels').style.zIndex = 650;
      map.getPane('labels').style.pointerEvents = 'none';

var positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
      }).addTo(map);

var positronLabels = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
      }).addTo(map);

function getColor(d) {
        return d > 500 ? '#800026' :
          d > 100 ? '#BD0026' :
            d > 50 ? '#E31A1C' :
              d > 10 ? '#FC4E2A' :
                d > 5 ? '#FD8D3C' :
                  d > 2 ? '#FEB24C' :
                    d > 1 ? '#FED976' :
                      '#FFEDA0';
      }

function style(feature) {
        return {
          fillColor: getColor(feature.properties.total),
          weight: 2,
          opacity: 1,
          color: 'grey',
          dashArray: '3',
          fillOpacity: 0.5
        };
      }

function highlightFeature(e) {
        var layer = e.target;

layer.setStyle({
          weight: 4,
          color: '#666',
          dashArray: '',
          fillOpacity: 0.7
        });

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
          layer.bringToFront();
        }

info.update(layer.feature.properties);
      }

var geojson;

function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
      }

function onEachFeature(feature, layer) {
        layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight
        });
      }

var info = L.control();

info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
        this.update();
        return this._div;
      };

// method that we will use to update the control based on feature properties passed
      info.update = function (props) {
        this._div.innerHTML = '<h4>Bike thefts in Cambridge</h4>' +
          (props ?
            '<h1>' + props.total + '</h1>'
            : '<p>Hover or touch an area</p>');
      };

info.addTo(map);

var dropdown = L.control({ position: 'topright' });

dropdown.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'dropdown');
        this._div.innerHTML = '<select id="select" name="select"><option value= "0">Sep 2014 - Aug 2015</option><option value="1">Sep 2015 - Aug 2016</option><option value="2" selected>Sep 2016 - Aug 2017</option></select> ';
        return this._div;
      }

dropdown.addTo(map);

var legend = L.control({ position: 'bottomright' });

legend.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'info legend'),
          grades = [0, 1, 2, 5, 10, 50, 100, 500],
          labels = [];

// loop through our density intervals and generate a label with a colored square for each interval
        for (var i = 0; i < grades.length; i++) {
          div.innerHTML +=
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
        }

return div;
      };

legend.addTo(map);

L.DomEvent.on(L.DomUtil.get("select"), "change", update);
      update();

geojson && geojson.clearLayers();
        geojson = L.geoJson(data, {
          style: style,
          onEachFeature: onEachFeature
        }).addTo(map);
      }
    });
  });
</script>

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