Project description:

Covid-19 was set to claim five million lives around the globe last October. However, the constantly growing death counts had left people numb and confused. This story took a unique visualisation approach in the hope to break the numbness. We connected the visual metaphor of condolence flowers with death counts in an attempt to humanize the number and serve as a reminder for lives that have been cut short by the virus.
 

Impact reached:

The piece was one of the most well-read interactives of the month on our site. Given that it’s almost two years into the pandemic, it was quite a challenge for a repetitive theme to attract this much attention from the audience. In addition, this project was one of the first nontraditional charts our graphics desk has been published so far. It introduces more visual possibilities our newsroom can offer for our readers.

Techniques/technologies used:

1) We conducted visual research and mood boarding in Miro to collect and organise references from publications that had put up visual pieces when the global Covid-19 death count passed the one million mark. And then we came up with the flower visualisation concept as a digital memorial to pay tribute to the lost lives.

2) Data wrangling and visualisation prototype are both done in Observable notebooks. The notebooks allow us to work collaboratively and transparently to easily iterate the design of a nontraditional look of a chart. We first used Arquero, a JavaScript library to perform dplyr-like data queries, to transform Covid-19 data sourced from Our World in Data (OWID). Then we imported the data from one data-wrangling notebook to another to test out different types of flowers with D3.js to encode time series data with animation.

3) We exported SVGs from Observable notebooks and refined the layout in illustrator. The top scrolly made with Vue.js then animate different layers in SVGs with CSS as users scroll through. The bottom exploratory tool adapted D3.js code from Observable notebook and turned it into a Vue.js component.

4) To engage our readers throughout, we relied on the classic Martini glass narration structure to lay out the key moments and details almost two years into the pandemic. It stats with explanatory scrolly to take readers through ebbs and flows of the pandemic globally. Next, it narrows down to profile five countries of interest and lastly it offered an animated exploratory tool for readers to learn more about the situation in each continent.
 

What was the hardest part of this project?

The most challenging part is conceptualisation since the topic has been covered extensively with all types of charts when the world first cross one million deaths. It took us quite some effort to come up with a visualisation solution that is both refreshing and meaningful. Another challenge lies in turning the intricate SVGs performant as they are rendered in a browser. It took trial and error to optimise the file size of our SVG with several layers.
 

What can others learn from this project?

The main takeaway from this project is how to report a topic that has been covered extensively. We deliberately stayed away from charts that other publications have already used. We also drew inspirations outside the visualisation world – the Japanese funeral floral arrangements – for an organic look of the layout.

This time we have also incorporated Observable into our workflow from data wrangling to visualisation. This allows us to make quick updates as live data came in from OWID. We were able to put together an interactive demo for our editors to facilitate the discussion.

Project links:

www.straitstimes.com/multimedia/graphics/2021/10/covid19-5million-deaths/index.html