Live updating election map
At first glance, creating a cartogram seemed like a particularly tricky problem: how do we get a map designed in Adobe Illustrator into a Mapbox slippy map? Since SVG paths are essentially arrays of coordinates, SVG paths can simply be converted into Geo JSON features One key element to be aware of as you convert an SVG into a Geo JSON is to have a way to identify each feature.
Since we wanted to roughly locate every district in the cartogram to help better represent the political makeup of each state, we made sure that each path had an ID.
Previously, we did this using custom-built data types that modified the properties of the map features and required us to use a forked and heavily modified version of the library that kept us from keeping up with the latest updates in the Mapbox GL JS library.
Luckily for us, the new Feature State API was just released into beta and has been a part of the library now since v0.46.
But, the lack of geographical accuracy is why they’re so useful in the first place.
At the Washington Post, our style is to show the continental United States in an Albers USA projection, a conic equal-area projection that minimizes distortion, with Alaska and Hawaii positioned under the southwestern states.
There is another style of maps that is making its way into the traditional election visualizations: the cartogram.
Cartograms are maps that are distorted by a variable, by population or GDP, for example, to favor information over geography.
They’re designed to give you a quick overview of what’s happening as the results come in.
At the Washington Post, we wanted to display the election maps everyone is familiar with, but we also wanted to provide a fast interactive experience.