Covid19 - a simple visualization
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.
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:
- we record also the date and the time in a separate variable
- 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. Cheers!