COVID-19 in Canada

Linked line charts that show COVID-19 figures in Canadian provinces and territories.

The challenge

The epidemiology update website implemented by the Government of Canada presents information on COVID-19 by using maps, charts and tables. While these visual resources allow visitors to explore COVID-19 figures from diverse vantage points, it is not possible to quickly compare cumulative numbers of cases and deaths for a given province or territory.

My goal was to devise an interactive visualization that would allow users to see the progression of cumulative numbers of cases and deaths for provinces and territories over time.

A solution

I implemented a visualization comprising two multi-series line charts. Each line represents a Canadian province or territory.

The charts are linked, i.e., hovering over the line that shows the cumulative number of deaths in British Columbia (BC) on Dec. 15, 2020 would cause tooltips contaning cumulative numbers of cases and deaths on that day to be displayed.

Interactive multi-series line charts
Interactive multi-series line charts show COVID-19 numbers in Canadian provinces and territories.

A Voronoi grid is employed to improve the user experience when interacting with the charts. Thanks to that grid, the mouse pointer does not have to be placed over each line. When the pointer is close to one of the lines, the corresponding tooltip is shown.

In addition to watching the animated GIF, you can interact with the visualization (use a larger screen for better experience)

Implementation details

React.js and D3.js were employed to build the visualization. React renders visualization components, whereas D3 fetches and processes data from Johns Hopkins University, and handles calculations.