Cambridge Bike Theft

<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();

​

      function update() {

        var selectedData = nestedData.find(function (d) { return d.key === L.DomUtil.get("select").value; }).values;

        data.features = features.map(function (feature) {

          return Object.assign(feature, {

            properties: {

              LSOA11NM: feature.properties.LSOA11NM,

              LSOA11CD: feature.properties.LSOA11CD,

              total: selectedData.find(function (d) {

                return d.key === feature.properties.LSOA11CD

              }) ? selectedData.find(function (d) {

                return d.key === feature.properties.LSOA11CD

              }).value : 0

            }

          })

        });

​

        geojson && geojson.clearLayers();

        geojson = L.geoJson(data, {

          style: style,

          onEachFeature: onEachFeature

        }).addTo(map);

      }

    });

  });

</script>