28 Mar 2021 / PROGRAMMING

Covid-19 realtime Tracking

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.


Some future improvements I have planned:
  • Scaling the points in abetter way
  • Trying to create the heatmap (not using location Pointers but Pointers ranging over some regions) Some digging required on this.
  • A visualization for historical data (This will be a complex and challenging one as and it will require more computation and based on that rendering on top of the map.)

Data visualizations of the spread of the 2019 novel Coronavirus (COVID-19), based on data from Johns Hopkins University.
Backend API SourceCode:Covid-19-API
Data Source:CSSEGISandData/COVID-19
Source Code:Code
Libraries Used: Google Maps Java script API for Visulaizations.
Avatar of Author

Utsab Chowdhury

Read more posts by this author.