D3 Examples - ischool-geo-viz-02

Things to Try Out:

Change the stop values for the 'circle-radius' property. Remember that stops accepts an array of arrays, where each inner array has a value for zoom level and a value for the circle radius. What happens if we add more than two arrays to our stops array?

Try adding a popup that displays when mousing over a crash location: https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>02: Data Driven Styling</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="//d3js.org/d3.v3.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>
​
// set our access token
mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';
  
var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson"
​
// create a new map using our div#map
// set the style, zoom, and center
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-74.0059, 40.7127],
    zoom: 10
});
  
// add map controls
map.addControl(new mapboxgl.NavigationControl());
​
// function to call once the map has loaded
map.on('load', function() {
    console.log('map loaded!');
​
    // we'll use d3.json to load the point data asynchronously
    d3.json(dataURL, function(error, data) {
​
        // report an error if their was a problem getting the geojson data
        if (error) throw error;
​
        // filter out data with no geometry, otherwise MapboxGL throws an error and won't load data
        data.features = data.features.filter(function(d) {
            return d.geometry;
        });
​
        // add the source to the map styles
        map.addSource('crashes', {
            type: 'geojson',
            'data': data,
        });
​
        // 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': {
                    'base': 1.75,
                    'stops': [[12, 2], [22, 180]]
                },
            }
        });
​
    }); // end d3.json
​
}); // end map.on('load')
​
</script>
</body>
</html>
    

ischool-geo-viz-02

02 Data Driven Styling With MapBoxGL

Things to Try Out:

Helpful links