šŸ‘‹ hi, Iā€™m basile

Portfolio case study: Reuters' 2019 general election results page

Intro to GE2019 page screenshot

A node backend and a modular, reactive front page visualising the UK general election results, as they happened. For Reuters Graphics.

Unfortunately, this page was deleted from the internet.

Front end: the results page

The page was built to be modular, i.e. to work this way:

So the main app itself is broken down into sections which are totally independent from one another.

The root of the main app, which all clients will run, is then quite minimal in terms of data processing, as it does not need to worry about what kind of data wrangling the modular sections downstream require.

Selected graphics

A blue wave… if you don’t know where to look
For the results map, we weren’t quite ready to commit to cartogram only, for fear that our very international audience wouldn’t quite recognise the country.

I felt it was an important thing to include, though, since urban/rural voting patterns are quite different in the UK, and Labour’s importance is visually underwhelming otherwise.

So I built both, and I’m particularly proud of I managed to run 650 tween interpolators at the same time to transition between the two states. Noah, thanks for Flubber once again!

Visualising change and who won from whom
I’m no stranger to ternary plots, which allow to plot three dimensions in an Euclidean space, in 2D. I think The Economist did a chart like this just before the election (if it was you, please email me a link :)).

I wanted to show the swing and who picked up seats from whom, but we weren’t sure how the night was going to play out, and it would have looked very empty for a while. So this was done live and added as a hot commit overnight. And I’m quite pleased (in a non-political way) about how well it shows Labour losing seats to quite literally everyone.

Screenshot of the GE2019 ternary charts

And finally, the classic barcode references, which I think do a decent job of conveying the general sense of distribution (and outliers) as well as the general picture.

Screenshot of miscellaneous bits of the GE2019 page


The backend I put together was two-fold:

In this instance, the role of the backend is to build up, from all the XML files dropped by the PA, a JSON-like representation of the election results as they currently stand.

There are quite a few hoops to jump through and hurdles to clear, such as recounts and corrections, and unfortunately this process can be quite manual (e.g. file names) or edge cases (e.g. the Speaker’s constituency is handled differently by different news organisations).

Inception and duties

I designed, built and maintained this project, under the careful editing of Simon Scarr.

We had code reviews and handovers with colleagues in other offices (Bangalore, Singapore, New York City) in case I’d be incapacitated, or if I needed a rest overnight.

#portfolio #viz