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';
​
  // set mapboxGL access token
  mapboxgl.accessToken = accessToken;
  
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-74,40.7],
    zoom: 10
  })
  
  // add map navigation controls
  map.addControl(new mapboxgl.NavigationControl());
  
  // do stuff on map load
  map.on('load', function() {
    // do the rest of the stuff for the visualization
    
    // load the data
    d3.json(dataURL, function(error, data){
      
      // error handling
      if (error) throw error;
      
      console.log(data);
      
      // add our source
      map.addSource("crashes", {
        type:'geojson',
        data: data,
//         cluster: true, // to make more sense of the data, takingpoints near each other and represent them in one circle
//         clusterRadius: 10,
//         clusterMaxZoom: 12,
      });
      
      // add the layer to the map
//       map.addLayer({
//         id: 'crashes',
//         type: 'circle',
//         source: 'crashes',
//         layout: {},
//         paint: {
//           'circle-color': {
//             property: 'crash_type',
//             type: 'categorical',
//             stops: [
//               ['no_injury_fatality', '#fecc5c'],
//               ['injury', '#fd8d3c'],
//               ['fatality', '#f03b20'],
//               ['injury_and_fatality', '#bd0026']
//             ]
//           },
//           'circle-opacity': 0.8,
//           'circle-radius': {
//             base: 1.75,
//             stops: [
//               [12,2],
//               [22,180]
//             ]
//           }
//         }
//       });
      
      
    }); // end d3.json
    
    // load hexbin data
    d3.json(hexBinURL, function(error, hexbins){
      
      if (error) throw error;
      
      console.log(hexbins);
      var colorRamp = ['#fef0d9','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#990000']
​
      map.addSource('hexGrid', {
        type: 'geojson',
        data: hexbins
      });
      
      map.addLayer({
        id: 'hexGrid',
        type: 'fill',
        source: 'hexGrid',
        layout: {},
        paint: {
          'fill-color': {
            property: 'bin',
            stops: colorRamp.map(function(d,i) {
              return [i,d];
            }),
          },
          'fill-opacity': 0.5
        }
        });
    }); //end d3.json hexbin
          
    
  });// end map on load
    
</script>
</body>
</html>
​
    