Project description:

To mark the terrifying milestone of half of a million lives lost in the U.S. to COVID-19, Reuters created a single long visualization to represent every single one of them. This story uses elegant design and heartbreaking detail to humanize a tragedy of unimaginable scale. Each death was represented as one dot, forcing the reader to scroll through a timeline of loss. Throughout the story, readers learned details about individuals who had died and the lives they led.

Impact reached:

The story resonated with readers, who shared it widely. Many praised the piece for its powerful representation of death. Nathan Yau featured it on his popular blog, Flowing Data, where he praised it for reflecting the true meaning behind such a tragedy.

Techniques/technologies used:

Overall, the page was built in HTML and styled with CSS. The chart was made in Javascript.

In order to render all 500,000 dots without crashing the browser, it used canvas lazy-loaded in chunks. It also used javascript’s native Intersection Observer for updating the date on scroll. The library D3 was used to create the miniature version of the chart in the upper right.

What was the hardest part of this project?

The story set out to show the true scale of COVID deaths in the United States, but doing that posed emotional, design and technical issues. In earlier drafts, a dot or square equaled a thousand deaths. This approach made for a simple chart, but it didn’t resonate with the team who worried it lacked humanity.

The final approach, to include a dot for each person, required clever technical thinking in order to ensure the page loaded quickly and readers with any kind of connection could experience it. It forced the author to confront each death and identify opportunities to tell individual stories.

This approach put the people behind each death in the spotlight without sacrificing a complete view.

What can others learn from this project?

When covering a massive tragedy, you don’t have to choose between showing the totality of its impact or highlighting the individuals. We can use data-visualization to put people front and center and not remove a story’s humanity.

Technically, they can also learn that there are approaches (such as canvas and lazy loading) to get many elements on a page without sacrificing performance.

Project links:

graphics.reuters.com/HEALTH-CORONAVIRUS/USA-CASUALTIES-CHRONOLOGY/xklpyomnrpg/