How Joe Biden won the presidency – a visual guide

Country/area: United Kingdom

Organisation: The Guardian

Organisation size: Big

Publication date: 6 Nov 2020

Credit: Ashley Kirk, Pablo Gutiérrez, Alvin Chang and Rashida Kamal

Project description:

The Guardian’s UK and US offices collaborated on a scroll-based project, aiming to make sense of the election result. 

Knowing that our results page would communicate the number of votes that each candidate gained, we focused on a different metric for our analysis: the swing from 2016. This would allow us to track how the American electorate changed after four years of Trump’s presidency. 

Using arrows and beeswarms to communicate swing, while zooming into the key battlegrounds when the reader scrolled, allowed us to communicate the geographic and demographic trends that helped Joe Biden win the presidency.

Impact reached:

On the surface, this piece provided an instant analysis of the election results just minutes after Joe Biden was declared the winner. The maps show that the suburban vote was decisive and that many working class areas in swing states actually turned against Trump. But the piece also paints a picture of American polarisation, using this data as a snapshot of where the country is after four years of Trump. For example, our beeswarm charts show that the polarisation isn’t necessary on urban/rural lines. Rather, education level plays a much larger role in political stratification. More educated areas of the country swing heavily toward Biden, while less educated areas swung toward Trump.

Through visualisation, we were able to present these facts in a straightforward manner to our audience with clarity. Every county was individually presented in our graphics, meaning that there was a transparency in our communication of these trends – something even more important in an election where the result was inaccurately questioned. These factors helped facilitate a better understanding of the issue within our reader community.

Techniques/technologies used:

We used HTML5 programming languages as the core of the project, developed mostly through the d3 javascript library and CSS. For the maps, we knew that efficiency would be very important, in terms of serving a huge amount of arrows and geographical divisions. Therefore, we used Canvas which dramatically reduces the amount of information that needs to be served.

We also use a local database stored on spreadsheets to highlight and add all furniture related to the events – for example, annotations and highlighted counties – coming out of the results. Thanks to this external spreadsheet we were able to update both the text in a quick and efficient manner, responding to the latest news as quickly as possible, allowing the reader to understand the latest geographical and demographic swings as they were announced.

What was the hardest part of this project?

If the US election result was announced on the night, with a landslide result, this project would have been easily launched without many hiccups as soon as the whole race was called. Instead, the whole team had to wait for several days as a handful of states – including the critical Pennsylvania – counted their votes. While the result was most probably going to be called for Joe Biden as mail-in votes swung counts toward him, we were unable to publish this analysis until most counts were finalised and the electoral college win was confirmed. In the process, much of our analysis evolved to be more nuanced. But this meant that our UK team – Ashley Kirk and Pablo Gutierrez – and our US team – Alvin Chang and Rashida Kamal – had to keep passing the relay baton between one another as teams slept while waiting for the result. While we were by no means unique in this regard, with many teams experiencing the same problems, it proved the importance of international collaboration and forward-planning in tackling data-driven visual projects that cover live – and often unpredictable – events.

What can others learn from this project?

Preparation is key. Before the election, we planned out and researched a host of different scenarios for the result – including one where the result wouldn’t be known for several days – so that we limited the number of major decisions that had to be made during the pressure of covering a live event. This proved essential. In retrospect, doing even more would only have made our reporting even more effective.

In anticipation of drawn-out results announcements in which the picture could change over a series of days, we decided that the scroll-based stages of the piece would be driven in part by a spreadsheet, in which several journalists could easily select new states to focus on and input new analysis as results came in. This gave us the flexibility to easily change what we wanted to say as the results became clearer, without the need for several different people to go into the code behind the project.

Project links: