As election results roll in tonight, we’ll be watching the action with The Washington Post. Its site will have up-to-the-second data on the Presidential, Senate, House, and Governor races, with results available state to state, down to the county level. Our friends at Development Seed built the live maps for The Washington Post. I caught up with Derek Lieu and Anand Thakker from Development Seed to chat about their experience building live election maps for a major news site.
I remember when we worked on live results maps during the 2012 elections. The hardest part was just the velocity of the data and the millions of people who wanted the most recent information all night long. What are the challenges you encountered building these maps?
Derek: It’s a really big data challenge. The Associated Press (AP) is providing a constant stream of vote counts for thousands of candidates, which spans hundreds of races over thousands of counties. We are hitting AP’s data API every 7 seconds. We need to ingest that data, immediately repackage it, and get it down into a million browsers in a format where people can understand what’s going on. The first thing we did was build a really robust infrastructure for ingesting and serving the data. Then we added a light viewer on the front end that quickly translates that data into maps. Our team uses vector tiles on the front end and feeds data right into those tiles. That way no one is pulling heavy map tiles off of a server. We can push extremely light data updates, and it’s immediately rendered on the client using Mapbox GL.
So you are updating the data in the vector tiles in real time?
Anand: Exactly. As data arrives from the AP, we just send users what’s new. Changes are merged into the vector tile and Mapbox GL immediately re-renders the map with the new data. This allows us to update the map in real time. Because Mapbox GL is open source, we were able to work with Lucas and the Mapbox GL team to build in the hooks to handle live data updates and data-based rendering. These updates are immediately available to anyone viewing the maps.
I noticed that you aren’t using the default Web Mercator projection. What did you use?
Anand: Yeah, The Washington Post uses Albers projection for all its maps. It is critical for them to project into Albers. This was a deal breaker in selecting the mapping stack. We took some inspiration from AJ Ashton’s Polar projection and are using a similar technique to re-project into Albers on the fly. After the election, we’ll release our Albers projection code as an open repository. We hope it’ll be useful to others, especially U.S. media outlets.
I love how easy it is to see what’s going on at a glance but I can also really dig in and geek out on the data.
Derek: Yeah, we spent a lot of time trying to get the interface just right. We were fortunate to have worked with The Washington Post through the primaries, and that gave us 24 election nights to test, learn, and iterate. We developed a simple way to keep users alerted to what’s new and interesting. Because we don’t know what the results will be, we built flexible analysis tools that The Post can adapt and deploy throughout the evening of and day after to provide context and insight.
Once the polls close, track the results live on The Washington Post and reach out to Mapbox or Development Seed on Twitter to talk!