Working with spatial data for the web
This workshop is designed to be very hands-on, with many examples that can be extended as exercises. It would be impossible to touch everything that we could find interesting in web mapping, so the hope is that after going through these three acts you will feel empowered to swap in your own data and leverage hundreds of examples in your own data visualization projects!
Act I: fundamentals
I've got the whole world, in my hands
This first part of the workshop will focus on understanding the data and quickly getting something on the screen.
First things first: we will play with basic GeoJSON on geojson.io to develop intuition for spatial data.
We can look at this example to get a relative sense of the "size" of one degree of longitude or latitude.
We will use a collection of datasets curated to cover a variety of locations and scales (world-wide down to city-level) in the workshop. This way, you won't feel confined to one geographic area while practicing your new web-mapping skills. Each data folder contains a README that describes where the data comes from and how it was processed:
We will explore the three basic GeoJSON data types with these files:
- Polygons - Administrative boundaries like countries, states, and counties
- Lines - Roads, Routes and Rivers
- Points - Cities, Subway stations
You can find the commands used to process and convert the data in each folder. If you want to convert your own spatial data from one file type to another, you may want to start with Mapshaper before diving into the world of command line tools like ogr2ogr.
I recommend reading More than you ever wanted to know about GeoJSON before the workshop. It's a concise overview and a great reference.
Act II: d3.js
This second part of the workshop will focus on understanding projections and using them with d3 to render custom data-driven maps.
One point we need to emphasize is that projections introduce distortion,
to get a sense for how different projections distort the geometry of the earth play with this example:
A fun modification using images to show distortion:
And a gratuitous animation with a particularly interesting projection.
If you want to understand projections from a fundamental level, checkout this thorough presentation on where projections come from.
Rendering with d3.js
Advanced d3.js usage
Act III: performance
This part of the workshop will focus on how we can render our maps with better performance. We can utilize an extension of GeoJSON called TopoJSON as well as other rendering techniques like using the Canvas API.
TopoJSON is an extension of GeoJSON that encodes topology. One of the biggest benefits of this is that file sizes can be significantly smaller.
Encore: advanced techniques
We may not have time to explore these examples in depth, but they should provide inspiration and exercises for those who wish to venture deeper into the technical possibilities of the tools covered in this workshop.
It's a map, sort of
Using geospatial properties or locations to add context:
For example Circle counties, Try doing this with the world populations.
You can calculate the centroids of each country using d3 or turf.
Advanced canvas interaction
Selecting countries on a canvas globe
Features near mouse in canvas
Circular selection area: