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
- Air pressure
- 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 (SO2 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).”
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
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.
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
initMapwhich is from the file
map.jsand 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
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
At the same time, we need a function to toggle the visibility of the card.
We could use the method
but by using
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:
clientY properties contain the cursor position when the click event has been triggered.
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.