Along with baby spinach and pastels, TopoJSON is becoming one of my favorite things. When I first heard the term “TopoJSON”, the word “topography” immediately came to mind. But what the “Topo” actually refers to is geospatial topology, which has more to do with relationships between geographic features than the shape of the earth. When we’re making maps, we’re often representing geography as a series of points (for instance, grocery store locations), polygons (country boundaries), and polylines (roadway networks). TopoJSON is a file format that can be used to organize these representations as they relate to each other spatially.
Ok, seriously I’ll stop talking about TopoJSON now…
Many thanks to Ian + Stamen + Mapbox for their generous spirits and encouragement to dive in, regardless of skill level or experience. I really can’t imagine a more welcoming environment in which to learn about the D3 library, see where others are going with it, and get inspired to start using it.
Here’s what we learned!
- Examples! Look at them, learn from them, share them. Ian put together a great compilation.
- TopoJSON/GeoJSON/JSON: Become friends with them! Check out the datasets Ian provided for his tutorial.
- SVG and Canvas are the two main standards for representing spatial data with D3.geo.
- The API: It’s fairly technical, but there’s a lot of great documentation on projections, paths, graticules, geolocation…
- After lots of examples and a quick overview, we started to dig in, following Ian’s instructions on the d3.geo reference page he set up for Maptime. If you’re new to d3.geo, I encourage you to check it out – it’s a great way to get a feel for how things work, and there are neat sliders you can use to adjust inputs. Just click on an input value (in green), and you’ll see a slider pop up. Drag it around, and you can quickly see how things change on the map.
Additional Handy Tips from Ian:
- Don’t be afraid to copy + paste to learn
- Don’t be afraid to ask for help on the mailing list or on stackoverflow
- Be sure to post your code to bl.ocks.org to make it super easy for people to help
- Ian talks about datavis + d3 on twitter: https://twitter.com/enjalot
- Check out these tutorial videos!
And finally, I was so inspired after Maptime, that I built my very first D3 map showing Maptime locations around the world.
Here’s how I did it:
- I visited Mike Bostock’s let’s make a map tutorial
- And then downloaded some data from the Maptime Github and Natural Earth
- From there, I converted Shapefiles to GeoJSON, and consolidated the GeoJSON as TopoJSON (just following the steps in the tutorial)
- Using a combo of the tutorial examples, and the fancy new skills I picked up from Ian and the Maptime crew, I made a map!
If I can do it, you can too. :)
Bulleted Hyperlink Madness (in no logical order):