Code for a workshop on geo-visualization at UC Berkeley's iSchool on 2017-04-10
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
00_template
01_load_some_data
02_data_driven_styling
03_hex_bins
04_map_controls
data
img
.gitignore
README.md
package.json

README.md

GeoVisualization Workshop at iSchool

hex-bin-geo-viz

This repository contains the code for the workshop given at UC Berkeley's iSchool on 2017-04-10. It covers creating an interactive web map using MapboxGL, GeoJSON, and Turf.

Link to the workshop slides

TOC

We'll start by creating an interactive map using MapboxGL.JS and discussing adding a custom layer using some GeoJSON data of vehicle collisions in New York City.

Next we'll style the data using a property from our GeoJSON and discuss potential issues that arise from overlapping point data.

We'll then look at one solution to aggregating point data using hexagonal binning with help from Turf.JS.

Finally we'll add some basic map controls for hiding and showing our map layers.

Viewing the Examples

In order to view the examples locally on your computer, you'll need a web server. If you have Python accessible on your command line, cd to the root of this repo and do:

python -m SimpleHTTPServer 8000

Then open your web browser to localhost:8000 and click one of the links above.

About the Data

Data used in this workshop comes from the NYC Open Data portal's vehicle collisions for March, 2017. The data has been processed ahead of time for the sake of simplifying the number of steps necessary to create the visualizations in this workshop.