Tracking Covid-19 Infection Risk With Local Forecast

The Covid-19 pandemic has been called the black swan that no one saw coming, taking the world by storm. While each country fights to stop the spread of the disease among their people using information and advice from the WHO, a new Harvard study shows that there may be a connection between weather conditions and the rate of the spread.

To sum up the study, it states that certain environmental factors might have an impact on the transmission rate of Covid-19. 

These factors include:

• Wind speed
• Precipitation
• Air pressure
• Humidity
• Temperature
• Ozone(O3)
• Sulfur Dioxide(so2)
• Solar radiation

The study captured these fields in their Relative COVID-19 Risk due to Weather and Air Pollution (CRW).

“CRW compares the relative changes in reproductive number for the disease due to weather factors (average and diurnal temperature, ultraviolet (UV) index, humidity, pressure, precipitation) and air pollutants (SO₂ and Ozone). For example, a shift over a season in CRW from 1 (the 95 percentile in our sample) to 0.7 in a given location points to a 30% reduction in estimated reproduction number over that period due to weather and air pollutants (i.e. assuming everything else is constant).”

— Harvard 

Based on this information, I decided to make a web application that shows how to track the value of these factors for different geographical locations. The application will be the world map and when the user clicks on a certain location, the app will place a marker in that spot, and inside a card will show the current value for fields presented in the study.

A demo can be seen in the next .gif.

Let’s Build It

As you've probably already guessed, we need an API from which we can acquire the weather data and map of the world.

For weather data, we’ll use ClimaCell Weather API, because it provides all the required environmental factors and for the map, we’ll use Open Street Map. This map API is not that powerful and easy to use and customize as the map from Google or other tools, but the benefit it has compared to the others is that it is the only one that can be used for free, is an open-source project.

To make things simpler for you I already wrote the code for this map including the marker and the click event and I wrapped it up together with the boilerplate for this project in a zip file.

Step 1 - Project Setup

The first step is to download the code from that zip file and create a free account on ClimaCell to receive an API key.

The folder finished represents the final form of the code we’ll be writing right now.

We’ll do the work in the folder unfinished. So go ahead and open this folder and locate the variable const CC_KEY = "<your_api_key>";  inside index.html. Here, you need to place your secret API key.

This file already has some code written, so let me explain it first:

• <div id="map"></div> - is a placeholder for the map
• <div class="data-card hide" id="data-card">…</div> - represents the card that we’ll use to display the value for the desired fields, temperature, wind speed, and so on. We’ll simply toggle its visibility and interpolate the weather data in the empty span tags.

The code that is already written in <script></script> is composed of two parts.

• queryBuilder() - is a function that we’ll use to append query parameters in an URL
• window.onload - in this event, we’ll call the function initMap which is from the file map.js and we’ll supply as parameters the id of the element where we want to place the map and the callback to be executed when a click event is triggered. The callback will receive the coordinates of the location the user clicked and the click event.

Step 2 - Acquire Weather Data

At this point, we can start writing our own code. The first thing that we need is to call the ClimaCell API and get the weather data for a given geographical location.

In this function we’ll send an HTTP request to the API with the fields for which we want to receive data, along with the next parameters:

• lat,lon - the latitude and longitude of the location
• unit_system - si - International System or us for USA System
• apikey - our own API key

Because we can move and click on the map, we allow users to click on a location for which there is no weather data. Therefore, if we provide an invalid location to the API and it returns a 404 error, the function will return the value undefined by simply calling return.

If we call this function now, we’ll see the following output:

Step 3 - Update the Card With New Data

Now that we know what the data returned by ClimaCell looks like, we can write a function to update the UI card. By default, it only has the labels.

The function is very simple, it actually is the same operation with Copy & Paste for each HTML element.

Another feature of the application is the ability to move the card across the screen based on the position of the cursor when the click event fires.

To do this, you can simple update the top and left position of the card, because the HTML element has the position:fixed.

x

.data-card {

  position: fixed;

  ...

}

At the same time, we need a function to toggle the visibility of the card.

We could use the method toggle 

document.querySelector("#data-card").classList.toggle('hide') 

but by using add and remove controlled by an argument action we can have more control over this action. 

Step 4 - Wrapping It Up 

All the functions that we need are done, now we need to update the main function and create the logic of the application.

The updated code looks like this:

clientX and clientY properties contain the cursor position when the click event has been triggered.

Conclusion

The Harvard study includes the formula used to calculate that risk index, named CRW and it can be seen in the following picture.

You can take this demo application and improve it even further, by acquiring historical data and using it in this formula or even adding AI and doing a linear regression similar to that used in the Harvard study.

As more studies appear, it will become clearer which environmental factors have the most impact (if any). In this article, I’ve only just brushed the surface of what you can do with weather and map API in terms of tracking various weather variables. The rest is up to you.