clhenrick/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    03 Hex Bins

In this step we visualized our crashes data using geospatial binning. Hexagons are one shape that is commonly used for this but others include squares or triangles. These "hexbins" were created separately for your convenience as we don't have enough time to create them in this workshop. If you're interested you can view this Github Gist to see how they were made using the Turf and Simple Statistics Javascript libraries.
Things to Try Out:


Try using a different color ramp from Color Brewer. Make sure to stick with a sequential scheme that has 7 classes as that's how many classes our aggregated data has.


Try adding the original crashes data layer underneath the hexbin layer, can you see the relationship between the two?


Try adding popups to the hexagons: https://www.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/


Helpful links


Turf hexbin documentation

Built with blockbuilder.org
forked from clhenrick's block: ischool-geo-viz-template
forked from clhenrick's block: ischool-geo-viz-02

  
## index.html
<!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";

var hexBinURL = "https://gist.githubusercontent.com/clhenrick/5787a12a8bf3b02821839e4f9556d997/raw/f18f34a319380ba471078baec382970dbc64a9ff/processed.json";

var colorRamp = ['#feebe2','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177'];

// 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(hexBinURL, function(error, data) {

		// report an error if their was a problem getting the geojson data
		if (error) throw error;

    // create an hashmap to hold our distinct bins
    // we can use this to create a legend for our map later
    const bins = data.features.reduce((acc, feature) => {
      const binNumber = feature.properties.bin
      const binValues = feature.properties.binVal
      if (!acc[binNumber]) {
        acc[binNumber] = binValues
      }
      return acc
    }, {});

    //console.log(bins)

    // add the source to the map styles
    map.addSource('hexGrid', {
      type: 'geojson',
      'data': data,
    });

    // add our hexbin map layer
    // note that we style it using the color ramp array from above
    map.addLayer({
      id: 'crashesHexGrid',
      type: 'fill',
      source: 'hexGrid',
      'layout': {},
      'paint': {
        'fill-color': {
          property: 'bin',
          stops: colorRamp.map((d, i) => [i, d]),
        },
        'fill-opacity': 0.6
      }
    });

	}); // end d3.json

}); // end map.on('load')

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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";

	var hexBinURL = "https://gist.githubusercontent.com/clhenrick/5787a12a8bf3b02821839e4f9556d997/raw/f18f34a319380ba471078baec382970dbc64a9ff/processed.json";

	var colorRamp = ['#feebe2','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177'];

	// 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(hexBinURL, function(error, data) {

	// report an error if their was a problem getting the geojson data
	if (error) throw error;

	// create an hashmap to hold our distinct bins
	// we can use this to create a legend for our map later
	const bins = data.features.reduce((acc, feature) => {
	const binNumber = feature.properties.bin
	const binValues = feature.properties.binVal
	if (!acc[binNumber]) {
	acc[binNumber] = binValues
	}
	return acc
	}, {});

	//console.log(bins)

	// add the source to the map styles
	map.addSource('hexGrid', {
	type: 'geojson',
	'data': data,
	});

	// add our hexbin map layer
	// note that we style it using the color ramp array from above
	map.addLayer({
	id: 'crashesHexGrid',
	type: 'fill',
	source: 'hexGrid',
	'layout': {},
	'paint': {
	'fill-color': {
	property: 'bin',
	stops: colorRamp.map((d, i) => [i, d]),
	},
	'fill-opacity': 0.6
	}
	});

	}); // end d3.json

	}); // end map.on('load')

	</script>
	</body>
	</html>