A simple, yet informative, visualization of the COVID 19 spread.
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:
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 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.