COVID-19 in the United States

Tracking the spread of COVID-19 in the United States

View Website

CONTEXT

Personal Project

TIMELINE

One Week

ROLES

Data visualization, web design and development

TOOLS

HTML, CSS, JavaScript, D3.js, Vega-Lite

Screenshot of COVID-19 in the United States

Overview and objective

With the Coronavirus outbreak, many informative graphs and dashboards were created on the web. Having interacted with a number of them, I found them to be slow, unresponsive, and at times overwhelming. Frustrated with the slowness of news sites and dashboards, I decided to re-create some of the useful visualizations that I have seen around the web, with an emphasis on performance. I aimed to have the site load in less than 4 seconds, which is around the ideal load time for webpages. This would result in less frustrations for me and other users who are possibly going to be visiting the website every day to find the latest numbers.

The components

The webpage has two sections:

  1. Critical information about the coronavirus that every person needs to know

  2. Visualizations which inform viewers on the latest numbers around the country

While designing the layout, I was mindful of the implicit hierarchy of the data. I followed a top-down approach in representing information, starting with the overall number of cases and deaths in United States and breaking up the data based on U.S. states.

Website layout sketches where I identified the sections for visualizations and their order.
Website layout sketches where I identified the sections for visualizations and their order.
Early sketches for some of the visualizations I implemented.
Early sketches for some of the visualizations I implemented.

Total COVID-19 cases and deaths in the United States

In order to compare the difference in cases and deaths, I decided to merge two scales in one visualization instead of using a unified scale or two separate visualizations. In the first case, since the number of cases are much larger than deaths, the line that represents deaths would have been flattened, making any form of comparison meaningless.

First visualization: Line chart. Using two scales prevents flattening of "deaths" and still be able to compare the relative increase of each category.
First visualization: Line chart. Using two scales prevents flattening of "deaths" and still be able to compare the relative increase of each category.

Challenges in showing multiple information

In the early version of this visualization, I used only one scale for showing both cases and deaths to simply the graph for the viewer. However, I found that a unified scale would have limited the red line (deaths) in the first sixth of the scale, looking almost flat. This wouldn't have been useful for demonstration purposes. Using separate axes, however, allowed me to observe the increase in deaths more accurately. In addition, the two metrics are comparable now. One can see the rate of change for each category, noticing that there has been a major increase in the number of deaths from mid-April.

COVID-19 Map of cases in the U.S.

After the audience has looked at the historical data for the aforementioned metrics, they will be able to look at the overall number of cases in each state and easily compare the difference through the choropleth. Each state is coloured based on a logarithmic scale that goes from light pink (less than 100 cases) to dark pink (500K cases and above).

The user can interact with this map by hovering over each state to see the specific number for each state. In the example below, Montana is hovered over, where it’s highlighted in black.
The user can interact with this map by hovering over each state to see the specific number for each state. In the example below, Montana is hovered over, where it’s highlighted in black.

Problem: Diverging colours or single hue?

A few visualizations which I had seen around the web had used diverging colours. However, such scheme usually indicates a phenomena that go in two opposite directions. The number of cases, however, is only going to increase—there is no positive side to this data. Using a single hue properly represents the sequential nature of the data.

Problem: Diverging colours or single hue?

A few visualizations which I had seen around the web had used diverging colours. However, such scheme usually indicates a phenomena that go in two opposite directions. The number of cases, however, is only going to increase—there is no positive side to this data. Using a single hue properly represents the sequential nature of the data.

Using a single scale allows us to directly compare each state to one another.
Using a single scale allows us to directly compare each state to one another.

Final thoughts

This project had quite a learning curve for me. I had primarily made visualizations on Observable in my notebooks using Vega-Lite and D3, but I had never implemented them on a website. However, wrapping up the project made me feel more confident in my ability to learn on my own and debug using Chrome’s developer tools.