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

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.

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.

A look into our design process

The first change we recommended was moving away from using a dual-Y axis. While there are many reasons why a dual Y axis can be confusing for readers, it’s also not needed for the primary purpose of this chart. Knowing that goal of this visualization is to let the reader see if specific policy events had any impact on the state of the outbreak, this can be done using either a chart of confirmed cases or deaths. Presenting a single metric at a time cleans up the chart without impacting the core narrative. So we recommended a simple toggle switch to let the user display either confirmed cases or deaths.

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:

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:

Live data and user interactions

After we agreed to a chart direction with the JHU team, we turned to the events timeline. We decided the timeline of dots used on the Hubei visualization worked nicely, as it was compact, and allowed discrete events to share the same X axis as the chart. To aid in spotting the interaction between events and the shape of the outbreak, we added vertical lines for restrictions/closings, openings, and deferring decisions to counties actions.

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.

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.