Project description:

Using scroll-based animation and 3D rendering, we tracked how the first 100 days of the Covid-19 pandemic as it unfolded from when it was first detected in Wuhan, China to its spread across the globe.

Impact reached:

From the very start of the pandemic, misinformation regarding its origins was rife. This article aimed to provide a coherent, clear and fact-based narrative of how the virus spread across the world. The 3D rendering was chosen to highlight how quickly Covid-19 transmitted across borders and oceans, and to emphasise how seriously the UK should approach it.

Techniques/technologies used:

We used Figma to create mockups and built the interactive in parallel. We used Mustache to template our HTML and Google Docs to generate our JSON (so that the editor could work in parallel). We used Javascript to generate scrolling cards and a combination of HTML Canvas and D3 to build and animate the spinning globe.

What was the hardest part of this project?

The project was the main piece for the Guardian’s “Coronavirus: 100 days that changed the world” series, so we had a hard deadline for its publication and only a week to work on it. We settled on the idea of a spinning globe very quickly but then had to figure out how to get it to work. 

We hadn’t produced a 3D globe before, especially one with so many data points. It was therefore tough to a) accurately show how the virus spread and b) animate the globe at a pace that wasn’t disorientating or confusing for the user.

What can others learn from this project?

That if the idea is simple enough, visual interactive journalism can be the most effective form of journalism that gives the reader a fuller picture than a graph or words ever could.

Project links:

www.theguardian.com/world/ng-interactive/2020/apr/09/how-coronavirus-spread-across-the-globe-visualised