D3 Examples - ischool-geo-viz-00

Template
Here you will find an HTML template for the geo-viz workshop. We'll be adding javascript code to the section between the opening and closing <script></script> tags in the index.html file. There are already some variables there to help us get started with.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>iSchool GeoVisualization Workshop</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="//d3js.org/d3.v4.min.js"></script>
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
        <link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
​
  <!-- this div with an id of "map" will be used to create our map -->
  <div id='map'></div>
  
<script>
​
  // javascript code goes here!!!
  
  // url to our "raw" geo data
  var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson";
  
  // url to hexbins
  var hexBinURL = "https://gist.githubusercontent.com/clhenrick/5787a12a8bf3b02821839e4f9556d997/raw/f18f34a319380ba471078baec382970dbc64a9ff/processed.json";
​
  // access token to use with MapboxGL
  var accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';
​
 // make sure we pass our access token to mapboxgl, otherwise our map won't load!
mapboxgl.accessToken = accessToken
​
// create a new map using our div#map
// set the style, zoom, and center
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-74.0059, 40.7127],
    zoom: 10
});
  
  //add zoom in out control
map.addControl(new mapboxgl.NavigationControl());
​
  // function to call once the map has loaded
map.on('load', function() {
    console.log('map loaded!');
​
  // we'll use d3.json to load the point data asynchronously
    d3.json(dataURL, function(error, data) {
​
    // report an error if their was a problem getting the geojson data
        if (error) throw error;
​
    // filter out data with no geometry, otherwise MapboxGL throws an error and won't load data
        data.features = data.features.filter(function(d) {
            return d.geometry;
        });
​
    // add the source to the map styles
        map.addSource('crashes', {
            type: 'geojson',
            'data': data,
            // cluster: true,
            // clusterRadius: 10,
            // clusterMaxZoom: 12
        });
​
    // add the map layer
        map.addLayer({
            id: 'crashes',
            type: 'circle',
            source: 'crashes',
            'layout': {},
            'paint': {
                'circle-color': 'orange',
                'circle-opacity': 0.8,
                'circle-radius': 5,
            }
        });
    
    map.on('load', function() {
    console.log('map loaded!');
​
    // we'll use d3.json to load the point data asynchronously
    d3.json(hexBinURL, function(error, data) {
​
        // report an error if their was a problem getting the geojson data
        if (error) throw error;
    
    // create an hashmap to hold our distinct bins
    // we can use this to create a legend for our map later
    const bins = data.features.reduce((acc, feature) => {
      const binNumber = feature.properties.bin
      const binValues = feature.properties.binVal
      if (!acc[binNumber]) {
        acc[binNumber] = binValues
      }
      return acc
    }, {});
    
    //console.log(bins)
​
    // add the source to the map styles
    map.addSource('hexGrid', {
      type: 'geojson',
      'data': data,
    });
    
    // add our hexbin map layer
    // note that we style it using the color ramp array from above
    map.addLayer({
      id: 'crashesHexGrid',
      type: 'fill',
      source: 'hexGrid',
      'layout': {},
      'paint': {
        'fill-color': {
          property: 'bin',
          stops: colorRamp.map((d, i) => [i, d]),
        },
        'fill-opacity': 0.6
      }
    });
​
    }); // end d3.json
  
}); // end map.on('load')
  
  
  
  
</script>
</body>
</html>
​
    