Project description

When the snap election was called the Guardian’s visuals team mobilised and set about building a pair of ambitious live and morning-after analysis pieces to help people make sense of we were sure would be an eventful night with countless twists.

The first centrepiece of the coverage was our live results tracker which provided readers with the constituency level results. Featuring a cartogram and a “battlegrounds checklist”, it was the go-to interactive for readers who were watching the results come in throughout the night. This was live from 10pm on election night, just as the polls closed.

The morning-after analysis interactive was an experimental mobile-first page which answered the key questions that had emerged overnight. These included “did the youth turn out for Corbyn?” and “how did Brexit impact the results?”. Featuring a card-based layout, readers were walked through a series of maps and scatterplots that explored the key themes of the election. This launched just 12 hours after the polls closed – an incredible turnaround for such a detailed analysis piece. This was only possible with the three weeks of research and development that the project team had undertaken in the run-up.

What makes this project innovative?

We believe that this project constitutes the first time any visual journalism team in the UK produced a mobile-first step-by-step analysis page for a general election just hours after the polls closed and constituencies started to declare their results.

We tested the card-based layout early on in the piece’s development and it proved incredibly valuable in breaking down the key takeaways of a complex graphic, ensuring readers left with the key points.

The main innovation of the live tracker was the addition of the “battleground checklist”, which allowed readers to see which seats had changed hands and the majority of those seats. This proved to be a useful prism through which to spot the night’s trends early on. One could clearly see that Labour won a series of safe seats from the Conservatives, whilst the Conservatives only won a scattering of marginals.

The Guardian was also one of the few newsrooms to use a cartogram with hexagonal tiles, rather than a choropleth (geographic map) to visualise the constituency results, visually balancing the results reported from cities and rural areas.

What was the impact of your project? How did you measure it?

The live results page was one of our most-viewed pages of the year and also received a record number of membership contributions.

The morning-after analysis page performed well both in terms of page views and attention time. Most importantly, we were pleased to find that the overwhelming majority of readers who completed the first set of cards went on to complete all others as well.

Our internal tooling also showed that we managed to attract and keep a predominantly mobile audience as we had hoped.

Source and methodology

We subscribed to the Press Association’s live XML data feed for constituency results and converted incoming results to a JSON feed using a Node.js script. This data was used in both the live tracker and the analysis piece.

Demographic data was collected from a variety of ONS sources. We developed an internal tool to standardise the format of these data sets and streamline the process of adding new spreadsheets.

Technologies Used

Live tracker:
We used a Node.js script running on an AWS server to parse the latest XML to a json feed every 60 seconds.

The page itself was built using D3.js and allowed readers to search for their constituency by inputting their postcode.

Maps and scatterplots were created using D3.js on the server side. Our scripts would continually check for newly declared constituencies and write out SVGs comparing the results with different contextual data sets we considered using. Using an internal dashboard, we were able to quickly decide on the graphics we thought told the story of the election night best.

Graphics were also automatically separated into multiple layers so we could easily fade in different data points or map views.

The swiping experience was built with Swiper.js. The desktop view of the analysis page is simply an “unrolled” version of the mobile experience which we think worked very well while still enabling us to focus our resources on optimising the experience for mobile readers.

Project members

Live results page: Visualisation and development by
Will Franklin and Matt Osborne.
Morning analysis: Visualisation and development by Josh Holder and Niko Kommenda, words by Seán Clarke and Caelainn Barr.


Additional links

Project owner administration

Contributor username


Click Follow to keep up with the evolution of this project:
you will receive a notification anytime the project leader updates the project page.