Logo
The Vocabulary of Tech
Published on

Covid Chart

Compare Covid metrics for one or more US states with world countries

About The Chart

Compare Covid metrics for one or more US states with world countries.

How to Use

  1. Choose states/countries, time frame, and daily vs cumulative totals
  2. Bookmark (in the browser) to save your chart
  3. Share
    • To share the chart you have built, use the 'Copy' button to get a stand-alone URL
    • To copy the chart as a png graphic, right-click and save. The graphic can be shared as-is since all filters are indicated in the chart.

Key Features

Interactive and customizable charts:

Filters (countries, time-frame) enable exploration, personalization

Fast:

The filters in the form communicate directly with the chart for instant results because the chart is built in the browser (not on a server like Tableau or DataWrapper).

Simple:

  • Only deaths are shown, not cases or hospitalizations. Deaths is the most reliable and consistent (though not timely) metric.
  • Only 'per capita' (per million) numbers are shown. Multiple line charts imply comparison, and the only way to compare countries of different population sizes is 'per capita', in this case, per million.
  • Only the rolling 7-day average is shown, because the daily noise is useless and distracting: a rolling average is the best way to view trends, because more than half of states don’t report new data every day.
  • If you need the kitchen sink, see these charts: countries or states)

Custom aggregates:

  • High GDP Countries (HGDP): GDP over $1T, GDP per capita over $30K. See the "Stories" tab for more info.
  • USA Economic Equivalents (USEE): Non-USA countries with GDP over $1T, GDP per capita over $30K

Data storytelling:

  • On the 'Stories' tab, charts are paired with explanatory text. The user can be guided through a series of charts, progressively telling a story.

Problems Solved

Most Covid charts by default count deaths starting with the onset of Covid, even if you specify a different start date on the chart

This makes it impossible analyse a particular period of the pandemic. ...more

Solution: Total (cumulative) deaths are counted starting with the date chosen, not starting with the onset of Covid. This enables visualization of individual Covid waves. For example, you may want to see totals for the Delta wave only, or totals starting with widespread availability of vaccines.

Most (if not all) Covid charts show individual US States and world countries in separate charts

This makes it impossible to visually compare specific US states with countries around the world.

Solution: Compare specific US states to countries in the same chart. Example

Cases and hospitalizations are not reported consistently

For example, Israel's per-capita tests are 2 times that of the USA, Denmark 4X USA. So, if you test more, you find more cases. See more about the variation in testing: Covid tests per capita

Solution: Only deaths are shown in the chart, not cases or hospitalizations. Deaths is the most reliable and consistent metric for comparing countries and states. Deaths are not timely, however. Deaths lags the other indicators by 3-6 weeks. Deaths are not prefect, there are inconsistencies across countries.

Read more about methodologies and issues (from the two data sources for this Covid chart):
Our World In Data
New York Times

Tools and Technical Details

Nextjs

  • layout and form are SSR, while the chart is CSR.
  • data acquisition: API route with REST.

Reactjs - Hooks

  • Custom solution with Hooks, Context, to sync the form and UI state to the URL and title tag: enables sharing, bookmarking.

Vega - data visualization

  • Multiple line chart used for comparisons over time.

Arquero (data manipulation)

  • Aggregate indicators (ex: the HGDP block of countries)
  • Merge US States with world countries, US Census data

UX, collaboration and sharing:

  • URL and title tag reflect the interactive chart selections.
  • A "share" dialog makes it clear that the chart is shareable (should the user not notice that the URL in the location bar changes each time a selection is made)