In this tutorial, I will show you how to build an interactive web map from scratch, from gathering and formatting the data, to styling your map and adding user interactivity with MapBoxGL.js.
Tutorial parts:
- Data gathering and formatting: first, we will download demographic data from the Census bureau programatically and format it to only retain the information we need.
- Geographic information and GeoJSON creation: second, we will obtain the geographic boundaries from the Census bureau and merge our data with it to obtain GeoJSON files containing both data and geographies.
- GeoJSON to Mbtiles: the GeoJSON files contain all the information we need but can be too heavy to transfer over the internet. Instead, we will cut it in small pieces, called vector tiles, that are much lighter to query.
- Mapbox set up: MapBox will host our tiles and serve them whenver we need them. In this step, we will set up a MapBox account and upload our tiles.
- First map using MapBoxGl.js: In this step, we will build our first map and we will set it up so that the layer displayed depends on the zoom level. You can see the live version of the map here.
- Making the map more legible: We will add a legend to explain the chloropleth colors using D3.js. We will also add the ability to switch between demographic variables using radio buttons. Live version here.
- Adding interaction: To make the map more iteractive, we will add polygon highlighting when the mouse moves over a region, as well as tooltips displaying more information about the currently highlighted region. Live version here.
UNDER CONSTRUCTION, might not work all the time. Watch the repo for updates.