28 Mar 2021 / PROGRAMMING
Idea
So A while back I was thinking of making something similar to John Hopkins University Covid-19 dashboard, which is capable of showing the spread virus over a map overlay with scaled circular markers.
So for doing this 2 necessary ingridients are required
1. A
data source and
2. A backend for sanitizing the data and
formatting to JSON.
For first problem with a little bit of digging I found that were
lots of APIs available as data-source but the best reliable one
available is a familiar name, the public data-source apis of
COVID-19 Data Repository by the Center for Systems Science and
Engineering (CSSE) at Johns Hopkins University.
GitHub Repo
The second problem is designing a simple server which will expose APIs returning JSON formatted data as the original data source returns data in CSV, but since I wanted to spend my efforts working the visualization part, with some digging already found one such solution by a fellow github user (Source Code). With some minor tweakings and deploying to Heroku I got my data with me
Now My first Idea was using heatmaps for this so with aliitle bit of study of Google maps javascript heatmap library and designing an initial prototype with the data poins I had about 190 location points and the no of confirmed cases, hence I had the coordinates and the intensity but the problem is the points are far too spread out in coordinates hence the points became dots with some 2 or 4 level of zooming in to the map.
Next I moved on to the idea of weighted circles, now to point out the actual dash board which inspired me to do this also has same representation but they have far more datapoints and the markers are much more scaled. TBH I struggled with scaling part quite a bit which I will come to. So how to do weighted circles over google maps can be found here with little bit of tweaking I got the map up and running without the scaling part, next part was scaling so I needed to scale the cases in a particular location within 0 to 1 so this actually creates a problem (any insights could be helpful) as the data ranges from 0 to more tha 30000000 the normalized unit lies in extremes for locations with little number of cases and hence the circle size becomes a point which is not visible also note that the transparency of the circles depends on this normalized data. So after some trial and error I found that adding a base weight and reducing the added factor by the normalized point we can get fairly good results but the problem is the locations with less cases will be having nearly similar circle sizes but here the transparency width factor is kept relatively high so it will be sensitive to low weight data points. So finally the end result was satisfactory for a day's work :)
Note: If you are seeing the map without data points just refresh the page also expect some performance drop to the zooming feature as quite a number of datapoints are drawn on top of the map.
Utsab Chowdhury
Read more posts by this author.