Covid19 - a simple visualization

Published on

Like a bunch of other guys out there I simply had to give it a go: visualize the COVID-19 outspread. The result is available here and the GitHub repo is available here.

Chart!

Available data

The aformentioned data source is almost too good to be true: one long and properly formatted JSON file with the number of conformed cases, recovered and deaths updated daily and covering presumably all countries.

Initially I wanted to do it in D3.js, but I opted for chart.js because I wanted to take it for a spin for a while now. I it a very capable charting solution with an almost overwhelming number of options The documentation is thorough and I was able to find all the desired options pretty quick.

I barely scratched the surface of chart.js capabilities, but at the end of the day, I had only a couple of things in my mind that I wanted to be able to see quicly and so I ended up with just a bunch of line charts for the aformentioned metrics (conformed, deaths, recovered). I eventually downloaded a JSON dataset of the world population, so I was able to calculate additional metrics:

  • confirmed per 100.000 inhabitants
  • deaths per 100.000 inhabitants and so on.

Localstorage

Bear in mind that I have no expirience with Progressive Web Applications (PWA), but I wanted to play around with Localstorage, so my workflow was the following:

  • the user downloads both json files the first time he visits the site, they end up in the localstorage as javascript strings
  • we record also the date and the time in a separate variable
  • any subsequent visit to the site checks the local storage keys and if the data is fresh enough it loads in in a javascript array.
  • from there, we fire up a function that pulls out the parameters like which countries and which metric we want to visualize and finally calls the Chart.js instance

Full website view

The code is really simple and self-explanatory so I won’t comment it here. There is a cool Brad Traversy video (as usual) pinpointing the major features of the Chart.js library, and I find it a very viable alternative to plotly (the heavy gun) and D3.js (the H-bomb of the charting world) when it comes to simple interactive charting of not overly complex data.

Stay safe, stay at home. Cheers!