Visualizing how the Coronavirus pandemic unfolded in the United States

How state-level policy actions in the U.S. impact new COVID-19 cases and deaths

Carni Klirs
Jul 8, 2020 · 5 min read

As part of our ongoing partnership with the Johns Hopkins University Coronavirus Resource Center, Graphicacy designed a timeline of policy events for each of the 50 United States and the District of Columbia. The goal of this data visualization is to allow readers to display any actions taken by the Governor of a state alongside a chart showing either Daily New Cases or Daily New Deaths. Restrictions/closings, openings, deferring decisions to counties, and other actions are represented by markers so the reader can see if that policy action had any impact on the outbreak.

An animation of a user exploring a line chart of Coronavirus cases in Maryland, with a list of policy events
An animation of a user exploring a line chart of Coronavirus cases in Maryland, with a list of policy events

Johns Hopkins University (JHU) previously developed a timeline visualization of policy events in the Hubei province of China, which served as the model for our new visualization for the U.S. JHU was interested in partnering with us to make the charts easier to digest and intuitive for a wide audience of users.

“How did events unfold in Hubei, China”, showing a policy events on top of a chart of Coronavirus cases
“How did events unfold in Hubei, China”, showing a policy events on top of a chart of Coronavirus cases

A look into our design process

We then recommended displaying new daily data rather than cumulative data. In the original chart built for Hubei province, the lockdown was strict enough that the number of new daily cases dramatically decreased during the month of February, so much so that the shape of the curve visibly bends, even when looking at cumulative cases. By March, the outbreak was mostly contained, and there were very few new daily cases. This allows the user to see how policy actions affected the shape of the outbreak. However, for the U.S., where the outbreak was never fully contained, charting the data in a cumulative view looks more like a straight line, rather than a squashed curve. Here is Maryland, for example:

An example of charting the data in a cumulative view and how it looks more like a straight line, rather than a squashed curve
An example of charting the data in a cumulative view and how it looks more like a straight line, rather than a squashed curve

Months into an outbreak, when there are a large number of total cases, a cumulative chart makes it much harder to spot the difference between adding 500 new cases versus 1,000 new cases. Alternatively, charting new daily cases, the difference between 500 and 1,000 new cases is immediately apparent.

This is a good example of why it’s important to have a data exploration phase as part of the design process, where we can work with real data and test out different charting options. For this project, we did this exploratory work in Flourish.

Switching to daily data, however, introduces a second problem: the daily COVID-19 data are quite noisy and involve some weekly variance, when there is a lull in reporting over weekends, and a catch-up on Mondays and Tuesdays. So we introduced a moving average line, to smooth out the variability and make it easier to see the overall trend:

An example of how we introduced a moving average line, to make it easier to see the overall trend.
An example of how we introduced a moving average line, to make it easier to see the overall trend.

Live data and user interactions

The policy event content for any individual state turned out to be quite extensive–a list of 50 to 100 events–with any given event description being as long as a full paragraph of text. To keep the tool compact and readable, we added a box below the chart to display a single day of events at a time. To add context, the box also displays a cumulative count of cases and deaths up through that day.

The final layer to consider when building a visualization are the user interactions. How should the user navigate through this tool? What would they expect to be able to do, and does our tool easily allow them to do that?

Above the chart, we added previous and next buttons, which let the user move from event to event in a sequential manner. Alternatively, users can click directly on the chart itself to jump directly to that event. We also introduced a “focused” mode, which zooms in to show an eight-week time span centered around the active event, which can be toggled on at any time.

A line chart of Coronavirus cases in Maryland, with a list of policy events
A line chart of Coronavirus cases in Maryland, with a list of policy events

While each of these choices in our design process might seem minor, they all add up to a cleaner, more informative chart and a more intuitive user experience. Explore this tool yourself and see what is happening in your state.

Graphicacy partners with clients to tell engaging stories with data. Graphicacy’s team combines storytelling, thoughtful human-centered design and deep technical capabilities to build and deploy strategic, data rich digital projects. Graphicacy’s team has created data visualizations and infographics for top-tier organizations and companies, domestically and internationally, including the Bill & Melinda Gates Foundation, the Center for American Progress, the AFL-CIO, the Anti-Defamation League and many others.

Graphicacy

Visualize a better world

Carni Klirs

Written by

Senior Information Designer at Graphicacy

Graphicacy

We tell engaging stories through data visualization. Our team combines storytelling, human-centered design & deep technical capabilities to build data rich digital projects.

Carni Klirs

Written by

Senior Information Designer at Graphicacy

Graphicacy

We tell engaging stories through data visualization. Our team combines storytelling, human-centered design & deep technical capabilities to build data rich digital projects.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store