Johns Hopkins University
Coronavirus Resource Center
Graphicacy worked with our partners at Johns Hopkins University to design and engineer COVID visualizations that are easy for users to quickly understand as part of their renowned Coronavirus Resource Center. Users can explore the current conditions of COVID in their state and see whether or not progress is being made in the fight against the pandemic, both in the form of small multiple charts visualizations in the image directly below or in a map-based format visualization that follows.
Johns Hopkins came to Graphicacy to assist in making these particular COVID visualizations easy for the general public to understand: trends in how COVID is increasing or decreasing in any particular state in relation to key indicators set by the White House as benchmarks for reopening. Our team was intent on creating engaging interactives, while allowing users to quickly understand the trends in the data and the context of those trends.
One of the persistent challenges of designing COVID data visualizations is that a single metric only tells part of the story. To gain a better understanding on whether an outbreak is improving or worsening in a given state, the number of new cases should be looked at alongside how robust that state’s testing program is (tests performed per 1,000 people), and what percentage of those tests are positive. Due to the variability in states’ self-reported data, weekly trends and moving averages help to further clarify the current condition of an outbreak.
To aid in that type of overview, we designed a sortable, filterable table (image above) that displays all three metrics alongside each other, using small multiple charts displaying the most recent 14 days of data, as well as weekly trend icons that allow for a quicker, at-a-glance read.
We also designed a tile map view, displays any of the metrics from the overview table, to identify regional trends.
The overview table is data-rich and invites careful exploration. To help users understand each of the chart components, we designed an explainer graphic that gives instructions on how to read each chart, and explains any calculations being made under the hood:
As part of an ongoing relationship with Johns Hopkins School of Medicine and the International Vaccine Access Center at the Johns Hopkins Bloomberg School of Public Health, this project allowed the Graphicacy team to engage in what we do best: dig in with our client partners to examine complex data, then create data visualizations and visual narratives that are topical, relevant, and effective.