| license: mit |
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
| <!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/[email protected]/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 the map object | |
| var map = new mapboxgl.Map({ | |
| container: "map", | |
| style: "mapbox://styles/mapbox/light-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 our data | |
| d3.json(dataURL, function(error, data) { | |
| if (error) throw error; | |
| console.log(data); | |
| // add our source | |
| map.addSource("crashes", { | |
| type: "geojson", | |
| data: data, | |
| // cluster: true, | |
| // clusterRadius: 10, | |
| // clusterMaxZoom: 12 | |
| }); | |
| // add the crashes 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); | |
| // http://colorbrewer2.org/#type=sequential&scheme=RdPu&n=7 | |
| var colorRamp = ['#feebe2','#fcc5c0','#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.6 | |
| } | |
| }); | |
| }); // end d3.json hexbin | |
| }); // end map on load | |
| </script> | |
| </body> | |
| </html> |