Behind the scenes

Behind the scenes: 2012 election maps

We kicked off our election mapping with a series of race projections maps for the presidential, U.S. Senate, U.S. House and gubernatorial races. The Fix provided the projections, from solid democratic to solid republican, and everything in between. We decided to focus on a set of demographics and other snapshots of the electorate as our storytelling lens. Each electorate filter had a few ways to slice the data and view either the matching states or counties for that statistic, along with an annotation to help explain what it could mean for the elections.

I knew that we’d need to reuse the projections maps setup for our live election results in November, so I focused a lot of time at the outset of the project deciding on a mapping framework and workflow that would work best for our needs. We needed a different map projection than the standard Google-style mercator seen below, and wanted to create something a little more appropriate for data viz, like Albers or Lambert, which is what we eventually settled on.

After several futile attempts to get Google Maps to play along with a different projection (check out the awesome tessellation effect of one bug below), I found Proj4js, a JavaScript library created to transform coordinates into any mapping projection you want.

Paired with Proj4Leaflet, I began using LeafletJS to do initial rendering tests, and after overcoming some accidentally-artistic user error (seen below), decided it was the way for us to go.

My data guy throughout election mapping was Serdar Tumgoren, and he folded together a massive amount of data for the projections maps, including 2010 Census data, 2004/2008 results and unemployment data for each state and county. Clicking on a geography provided a detail window with a demographic profile and historical results for that area. And lastly, Graphics Editor Karen Yourish helped annotate the views for each demographic filter. We came up with the “In the news” views right before publishing, to allow the map to react to recent news and show how it might affect each election.

When we finished publishing the last of our projection maps, it was time to focus on results. Our number one priority on election night was to deliver up-to-the-minute results in a visually dynamic way. I worked with Digital Design Director Sarah Sampsel to design and build versions for our homepage and other pages throughout the site. And we built out the full-featured map pages for each race type, featuring live state, county and, for House, district results along with historical results for states and counties.

Our results data came from an AP data feed that many newsrooms utilize on election night. Serdar and Jason Bartz built out the API feeds that I and others needed to power our election maps and results displays. It’s an amazing amount of data: every vote, for every candidate, across 4 different types of races, and thousands of different geographies (50 states plus D.C., 3,114 counties, 435 districts). There was plenty of discussion about the format of the data, and how to best minimize the amount of data necessary to deliver a great experience. They did phenomenal work, and made my job a lot easier.

This was the final result for our presidential results margin of victory by county map.

If you’re curious about the process of calling races on election night, check out this post on this subject. And be sure to check out some of the post-election analysis we did with maps: An analysis of the electorate | Where Obama did better — and where he did worse

- Wilson Andrews / The Washington Post