A simple, yet informative, visualization of the COVID 19 spread.

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.

Available data

The aforementioned 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 quickly and so I ended up with just a bunch of line charts for the aforementioned 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 experience 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

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.

URL: https://gifted-shockley-19f8b9.netlify.app


Pictures