D3 Examples - test-geo-viz

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;
  
  
  //instantiate map object
  var map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/dark-v9",
    center: [-74,40.7],
    zoom: 10
  });
  
  //add map navigation and controls
  map.addControl(new mapboxgl.NavigationControl());
  
  //do stuff on map load
  map.on('load',function() {
    // load your data
         d3.json(dataURL, function(error, data) {
                    if (error) throw error;
                    console.log(data);
           
           // 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': {
                    property: 'crash_type',
                    type: 'categorical',
                    stops: [
                        ['no_injury_fatality', '#FECC5C'],
                        ['injury', '#FD8D3C'],
                        ['fatality', '#F03B20'],
                        ['injury_and_fatality', '#BD0026']
                    ]
                },
                'circle-opacity': 0.8,
                'circle-radius': 5,
            }
        });
    
                });
         });
  
</script>
</body>
</html>
​
    