I’ve always wanted to be better at making fancy data visualizations, interactive maps and so on - the sort of thing you’d see in The New York Times or on FiveThirtyEight.
A friend recently showed me how D3js worked, and I decided to try building a visualization myself to get my hands dirty. First off, here’s a nice graph sorta thing from the D3 website, made by Mike Bostock - the creator of D3js. I embedded it on here with an iframe.
Let’s try and build our own world map. I’ve been really going for it with Anki and learning capitals lately - and I figure a great way to supplement my knowledge could be making a world map which would tell me country names and capitals.
I realized I knew next to nothing about data visualization, so I watched parts of this excellent Youtube course by Curran Kelleher. Kelleher started off with an explanation of what SVGs were - I was surprised to realize vector graphics were so optimized. SVGs enable zooming without a loss in clarity. Everything scales, because an SVG is essentially a group of graphics that are all sized relative to each other and the canvas, so to speak. I played around a little bit:
You can change color:
I decided to make a world map, that would serve two purposes:
- It’s a cool map of the world
- It’ll help me keep track of the number of countries I don’t yet know the capital of
Other things I’d like:
- A little box in the top right telling me how many countries are left
- A country goes from red to green if I know it’s capital
Other than a short stint with ArcGIS in high school, the world of geospatial encoding was largely foreign to me. I didn’t realize this was what I was getting into.
I did a whole bunch of googling and a lot of reading through docs, and finally stumbled on d3plus-geomap but the tool I ended up using d3-geomap. Rendering maps as vector graphics is a fascinating process.
The map is rendered by reading a bunch of TopoJSON files, one for each country. TopoJSON is a topological geospatial data format conceived of by the legendary Mike Bostock. Through my explorations, I found that Mike Bostock is the de facto king of the data visualization world. As an Ex-NYTimes Data Viz expert and creator of D3js, Bostock is literally everywhere. It seems like he is now head-first into Observable HQ, as this post describes.
Topology is the study of mathematical objects - and how they behave under various deformations/transformations, the TopoJSON file format tries to encode topological data with JSON by storing sequences of coordinates in line fragments called arcs.
The d3-geomap module helps make vector map creation from TopoJSON files relatively straightforward. This is essentially all the JS I needed to write, after creating a div with id
map to render the components in:
var map = d3.geomap() .geofile('./d3-geomap/topojson/world/countries.json') .draw(d3.select('#map'));
My next steps include: creating a way to show countries whose capitals I know in one color, and other countries in a different color. I also want the tooltips to display both the name of the country as well as the capital. I made a
csv file for this, and will go through it in part 2.
Here’s our vector graphics rendered zoomable map for now: