D3 Examples - ischool-geo-viz-copy

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 - AK
  mapboxgl.accessToken = accessToken;
  
  //instantiate the map object - AK
  var map = new mapboxgl.Map({
    container: "map", //using div id map from line 18
    style: "mapbox://styles/mapbox/dark-v9",
    center: [-74,40.7], //map center co-ordinate for longlat
    zoom: 10
  });
  
  //add map navigation control for zoom
  map.addControl(new mapboxgl.NavigationControl());
  
  //do stuff on map load
  map.on("load", function(){
         
         //load our data with anonymous func
         d3.json(dataURL,function(error,data){
                if(error) throw error;
                console.log(data);
           
           //set source and layer for map object
           map.addSource("crashes",{
             type: "geojson",
             data: data
             //cluster: true, //if too many points to plot
             //clusterRadius: 10,
             //clusterMaxZoom: 12 
           });
           
           //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"]
                 ]      
               }, //can also pass color directly like "orange"
               "circle-opacity": 0.8,
               "circle-radius": { //or direct number passed
                 base: 1.75,
                 stops: [
                   [12,2], //at zoom level 12 give 2px
                   [22,180]//at zoom level 22 give 180px
                 ]
               }
             }            
           });
    
  });//end d3.json
    
    //load hexbin data
    d3.json(hexBinURL, function(error,hexbins){
      if (error) throw error;
      console.log(hexbins);
      var colorRamp = ['#feebe2','#f88176','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177'];
      
      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 hexbins
         }); //end map on load
  
  
</script>
</body>
</html>
​
    