US Elections 2016 Results Tracker

US Elections 2016 Results Tracker

Organisation: Guardian US (United States)

Publication Date: 04/07/2017

Size of team/newsroom:large

Description

Guardian US live coverage of the Presidential, House and Senate election results was an ambitious project with the goal of providing the fastest, richest, most digestible — and yes, most entertaining — view of the firehose of results data coming from the Associated Press. Beyond merely visualising the data, our election data app analysed, contextualised and explained the results, avoiding ‘chart fatigue’ by presenting some information as text, generated by a combination of algorithms and expert reporters. This was for two reasons in particular: firstly, our audience is global, and we can’t rely on the reader having extensive knowledge about the US political process. Secondly, we felt that traditional election apps have largely failed to provide value over and above television coverage. We knew that a large part of our audience would be watching the results on TV — at home, at viewing parties and in bars — and that we would be a ‘second screen experience’ for many of them. Accordingly, we tailored our app to provide the kind of understanding that would allow readers to feel like they were a part of this huge cultural moment, and to prompt and take part in conversations with their companions. (Internally, we referred to it as the ‘make-me-sound-smart app’.) We had another important goal with this app — to live up to the expectations created by our coverage of the primaries, which featured 8-bit representations of the presidential candidates riding around the screen spray-painting counties as they won them. Readers adored these characters, building communities around them on social media that would gather for online ‘viewing parties’, and it was important that we brought the characters back on the big night. Clinton and Trump, plus new 8-bit characters for Harry Reid, Mitch McConnell, Nancy Pelosi and Paul Ryan, held court at the top of the screen, offering their own takes on the live data mixed in with the odd bit of trash talk and live tweets that we pulled in from Twitter. In addition to the choropleth map, which reveals county-level detail as you zoom in, the app provides a tabular view of the data allowing interested readers to drill into the raw numbers.

What makes this project innovative? What was its impact?

The impact of the app was astounding: millions of readers around the globe helped make it the highest trafficked piece of content the Guardian had ever published, by a significant margin. As a result, the tracker garnered 21 million page views on election night. Stylistically and tonally, and in terms of the way it contextualised the data rather than merely visualising it, it was clearly differentiated from its competitors. As an example of contextualisation: at 9.03pm, one of our army of ‘bots’ — which were scouring incoming data for interesting tidbits — noticed that incumbent Illinois Republican senator Mark Kirk had been defeated. Was this significant or surprising? Tapping the item in the on-screen ‘What you need to know’ feed took you to Illinois, where some pre-written ‘in brief’ text explained that it was in fact a ‘likely Democratic pickup’. Drilling further down into individual counties revealed selected information about demographics, educational levels, wealth, and other data taken from the US Census Bureau, giving readers an additional layer of context within which to understand the results. Doing this at scale — 3,143 counties, 435 congressional districts and 50 states, each with explanatory text generated by either an algorithm or a human — required careful planning, close collaboration with our political reporters, and a good deal of testing. Technologically, we pushed the boundaries far beyond the norm. We used sophisticated low-level graphics techniques to create a silky smooth interactive map that responded instantly to interaction, even on older phones. Design-wise, our app was a departure from our peers, eschewing the scrollable ‘rich article’ format in favour of a responsively-designed fullscreen experience with a native app feel. This posed hairy design challenges, but provided a level of focus and clarity that is hard to replicate in other design paradigms.

Technologies used for this project:

The core of the experience is the interactive map. Normally, rendering a county-level map involves significant trade-offs — in order to achieve acceptable performance on mobile, pan and zoom transitions are often disabled, or the geometry is simplified to reduce the amount of data involved and speed up rendering. We were having none of that: we wanted slick, beautiful, detailed maps with interactivity and transitions that would feel at home in a sci-fi show. To that end, we designed a custom rendering pipeline on top of a low-level WebGL graphics library called regl. This gave us incredible performance and control, but meant implementing a lot of things from scratch, such as using vertex shader techniques to draw county boundary lines out of millions of triangles. Loading the detailed geometry was another challenge. To get a fast initial render, we invented a technique called Progressive TopoJSON combined with a proprietary binary format that could be processed in a web worker. This lets us load the county geometry lazily, without wasting any data — something impossible with normal TopoJSON. We also took advantage of recent advances in the web platform to provide push notifications about key results updates to readers who opted in — we anticipated getting a few hundred subscribers, but ended up with well over 30,000. This allowed readers to keep track of the results on their phone’s lock screen, meaning that they didn’t even need to keep the app open to stay current. Tapping the lock screen notification led them straight back to the full results experience. The user interface was created using Ractive.js, our in-house library, while the 8-bit avatars were animated using canvas. The data was processed in a Node.js app running on EC2, which crunched the data into a compact representation and delivered fast incremental updates every 15 seconds. Users reported that our app was reliably quicker to update than others using the AP’s data feed.
Follow this project
Wait
Comment

Comments (0)

You have to be connected to contribute

You have to be connected to follow

Leave this project and no longer be informed about this project

By joining this project, you will be informed by email when an update or a new contribution is posted on the website.

Thank you for your active participation !
Best,

The GEN Community Team