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.

Built with blockbuilder.org

forked from clhenrick's block: ischool-geo-viz-00

forked from neha01mittal's block: ischool-geo-viz-00

<!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>

<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 controls
  map.addControl(new mapboxgl.NavigationControl())
  
  // do stuff on map load
  map.on("load", function() {
    // load data
    d3.json(dataURL, function(error, data) {
      if (error) throw error;
      data.features = data.features.filter(function(d) {
			return d.geometry;
		});
      console.log(data)
      // add our source
      map.addSource("crashes", {
        type: "geojson",
        'data': data,
        cluster: true,
        clusterRadius: 10,
        clusterMaxZoom: 12
      });
      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]]
				},
			}
         
        }
      });
    }); // ends d3.json
  
    //load hexbin data
    d3.json(hexBinURL, function(error, hexbins) {
      if (error) throw error;
      
      console.log(hexbins);
      var colorRamp = ['#f1eef6','#d4b9da','#c994c7','#df65b0','#e7298a','#ce1256','#91003f']
      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
      }
    });
    });
  }); // ends map on load
  
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js