How to build a Covid Dashboard?
Slide and Touch/Click inside
It is an interesting challenge every data-science enthusiast has today – to create meaningful insights. There is a surge in the number of COVID-19 dashboards, developers are creating across the globe. The last article focused more on the Data and ML part, and this one will focus on the Visualization. Afterall a picture says a thousand words! So I created a simple dashboard on Corona Stats by Country; the one seen in the banner image. The data is updated 3 times a day. There are many DVA tools in the market both commercial and opensource, some are also combined with business intelligence. The popular commercial ones are –
- Tableau
- Microsoft PowerBI
- Sisense
- Qlik
- Oracle, SAP, TIBCO, Salesforce all have solutions around it.
On the OpenSource side, most of the data science frameworks and languages support it, for example, Python has Matplotlib, Pandas, Seaborn, Plotty, etc. And one of the popular (I wouldn’t say easy, but certainly very comprehensive) isD3.js. D3 is the short form for Data-Driven Documents. So in this article, we will explore, How to create a simple, yet awesome WorldMap with live Corona cases by using nothing, but plain HTML and JS.
Let’s do it stepwise :
Step 1: Find a trusted and reliable data source (API) for statistics.
It is imperative that the data shown on your website is trustable and accurate from the last refresh. There are many organizations tracking the current situation such as Governments, HealthCare agencies, and Universities, specifically the John Hopkins Center for System Science and Engineering
There are also independent groups who are building APIs on top of these reliable sources to make it easily consumable for upstream development. I liked below for its comprehensiveness.
And additionally this blogpost from MuleSoft.
I have used CovidTracking https://covidapi.info/api/v1/global/latest for this article.
A sample cURL response looks like this
{
"count": 184,
"date": "2020-04-08",
"result": [
{
"MOZ": {
"confirmed": 17,
"deaths": 0,
"recovered": 1
}
},
{
"TLS": {
"confirmed": 1,
"deaths": 0,
"recovered": 0
}
},
{
"GRD": {
"confirmed": 12,
"deaths": 0,
"recovered": 0
}
}, ....]The request doesn’t require any input, the response has countrywide data for today.
Step 2: Conceptualize the dashboard.
This step is where we conceptualize how the dashboard should like, A single dashboard can have multiple viewpoints. For simplicity, here I have chosen only a WorldMap with overlayed statistics when cursor points on the country. The darkness level in the blue color indicates the country with more infected cases. Black ones do not have data; for example Greenland.
Step 3: Transform / Clean the data to suit your dashboard requirements.
The loading of the live CovidTracking data is simple. A JQuery function $.getJSON makes a GET call to the server identified by the URL. The response is a JSON object stored in the variable items.
function loadCovid19Data() {
var url = "https://covidapi.info/api/v1/global/latest";
var items;
$.getJSON(url, function (items) {
popData = ConvertToTSV(items);
});
console.log(popData)
return popData
}The unmodified JSON object is then passed to a transformation function ConvertToTSV(). I needed to fit the response into a specific format required by D3’s data loading API. This is the JS transformation code, basically, create an array of Countries, extract Corona statistics and push it to the array. This was required because each country is the ‘key’ and the value is of datatype Object “MOZ”: { “confirmed”: 17, “deaths”: 0, “recovered”: 1 }, like a dictionary of Objects identified by Country as Key.
function ConvertToTSV(objArray) {
const data = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var aList = data['result'];
var confirmed = [];
for (i = 0; i < aList.length; i++) {
var item = aList[i];
for (key in item) {
value = item[key];
var pop = new Object();
pop.id = key;
pop.confirmed = value.confirmed;
pop.deaths = value.deaths;
pop.recovered = value.recovered;
confirmed.push(pop);
}
}Step 4: JavaScript / D3 code
There are lots of sample D3 code available for WorldMap. I have used this variant. Note that the WorldMap is an SVG object, with the attribute class equals ‘map’.
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
.attr('class', 'map');
The D3 data loading needs 2 information (either as a file or as a JSON object)
- world_countries.json, for drawing the WorldMap.
- Covid19Tracking JSON response, for our data of interest to be shown.
This means we need to “join” these 2 data. In this case, the Country Code (also referred to as id here) is the Key used to marry both.
When D3 loads multiple data sources, it is advisable to use a blocking queue() function. If the data is static, it can be loaded as CSV/TSV file. In my case, since I want to monitor the latest statistics, it needs to be pulled per request using $.getJSON function as described above, unless you are some sort of cache.
Note here that world_countries.json is static information because it simply has the coordinate information to draw the WorldMap.
queue()
.defer(d3.json, "world_countries.json")
//Commented .defer(d3.tsv , "covid19sats.tsv)
.await(ready);
function ready(error, data) {
var confirmedById = {};
var deathsById = {};
var recoveredById = {};
// process your data ...
The overlayed statistics is again a simple HTML snippet
// Set tooltips
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong>Country: </strong><span class='details'>" + d.properties.name + "<br></span>" + "<strong>Confirmed: </strong><span class='details'>" + format(d.confirmed) + "</span>" + " <BR> <strong>Deaths: </strong><span class='details'>" + format(d.deaths) + "</span>" + "<strong> <BR> Recovered: </strong><span class='details'>" + format(d.recovered) + "</span>";;
})
Step 5: Test and Host It!
The best part of D3.js is that it doesn’t need any special installation. For development and local testing, you just need a browser, but it is advisable to run it under any HTTP webserver. The easiest is way to do it is
npm install http-server
http-serverthis will run a web server at port 8080, and you can access the page using http://localhost:8080/index.html
For hosting it on the internet there are again multiple simple ways –
- Free Webhosting with Gdrive
- On a public cloud like AWS (or Azure / GCP )
- And easiest of all is the GitHub Pages, which I have used.
All source files can be found here in my Github Repo
That’s all for now, thanks for reading.