The Guardian: US election visual projects

Country/area: United Kingdom

Organisation: The Guardian

Organisation size: Big

Publication date: 3 Sep 2020

Credit: Ashley Kirk, Helena Robertson, Frank Hulley-Jones

Project description:

The Guardian Visuals team created a series of data-driven projects ahead of the US presidential election. In a controversial campaign where polls were treated with scepticism, we felt it important to produce visuals that explained exactly how the US elects a President. 

In our “build your own election result” interactive, readers could choose how swing states voted to see who they could get elected. 

Meanwhile, “electoral college explained” piece used data and graphics to outline the facts of the system and how, in recent history, it has benefited the Republicans.

Impact reached:

Our “build your own election result” interactive had one of the highest engagement times of any of our team’s pieces in the run-up to the US election. This proves that our community was engaged in the content and wanted to understand just how either candidate could win the election. We can see that thousands of people engaged with this content, showing that we were able to facilitate a better understanding of how the electoral system works. While our straightforward guide to the electoral college was used to supplement our readers’ understanding, it was the interactive that proved the real success with our audience.

Techniques/technologies used:

In our  “electoral college explained” piece, we used an in-house chart tool to generate the more basic bar charts, before adding annotations and refinements in Adobe Illustrator and using an ai2html script to embed them in our CMS. D3.js was used to generate the main structure of the proportional circle map and the tower chart, the latter of which involved assigning the width and height of rectangles by different variables and then lining them up next to each other. Once the basis of these visualisations was generated, annotations were again added in Adobe Illustrator.


The “build your own election result” interactive was built in Javascript, and the structure was initially based on a previous project in which user’s tried to get Theresa May’s Brexit deal through Parliament by assigning who voted ‘For’ and Against’. Additional features were then added, such as animations to iterate through electoral votes as states were added, and switch the portraits of the candidates as one of them surpassed the majority. The project was built to draw its data from a Google Sheet, in order for it to be easily updated as changes were required, without having to edit code and re-deploy the project. 

What was the hardest part of this project?

The hardest part of our “build your own election result” interactive was deciding on the best way to structure the piece; balancing the provision of enough context to guide the user to their 

decision without overwhelming them with information, and allowing enough flexibility to choose how different states voted without too many clicks before you reach the finish scenario. 


We decided early on that one of the most important elements this piece should include was additional information about US states to help the user choose plausible scenarios, and avoid the creation of highly unlikely election result maps. After several iterations, we arrived at a solution that presented a lot of information in a uniform manner for each swing state, combining data in our historical voting indicator with text snippets providing extra context.


For the “electoral college explained” piece the hardest part was working out how best to demonstrate with data and graphics how the system currently favours Republicans. This involved emphasising the value of states with the most electoral votes, how large margins mean little under the winner-takes-all system, and how uneven population distribution across the country affects outcomes. Our upside-down tower chart which sizes states in two dimensions allowed us to tackle the first two of these ideas in one graphic, and delving deeper into key demographic groups in swing states helped us demonstrate the third.

What can others learn from this project?

As someone new to journalism, the most important thing I learnt in creating these projects was to really consider what the reader wants to gain from them. The explainer’s main purpose was 

to provide a factual overview of the electoral system through which readers would gain a better understanding of the election that was taking place. This meant using jargon-free language, providing examples of previous results to explain complex dynamics like winner-takes-all and the popular vote, and using carefully thought out visuals to highlight imbalances in the system. 


As a more technically demanding project, the “build your own election result” interactive required close attention to tiny details that would affect the overall user experience. Before publishing, we had several members of our team look over the project and test it out. From visual journalists who could point out that a smaller sticky header on mobile would make a big difference, to US political correspondents who made suggestions on language that would better suit an international audience. These small adjustments that came from having more eyes on the project made the final piece easier to use and understand, and ultimately a more enjoyable experience for the reader that likely played a part in its success.

Project links: