Visualizing air quality

Mapping AQI using heatmaps

thirteen23
4 min readOct 1, 2022

--

We recently helped design and prototype a mobile application for a startup out of Stanford that’s developing wearables to help monitor and improve personal air quality. Much of the application revolved around tracking air quality based on input drawn from the device and the user’s location. Throughout the application, air quality is reflected as a measure of the air quality index.

In this article, we provide a brief overview of how air quality is measured and demonstrate how to create a simple heatmap to visualize the information.

What is the air quality index?

The air quality index (AQI) is used by government agencies to communicate how polluted the air is at a specific location. Different countries have their own indices, but a general index follows.

In general, AQI is based on a scale of 0 (good air quality) to 500 (hazardous air quality). Major pollutants contributing to AQI include PM (particulate matter), ozone, carbon monoxide, sulfur dioxide, and nitrogen dioxide.

As AQI rises, public health risks increase to the point where the air can be quite hazardous.

Visualizing AQI

In addition to measuring air quality directly from our device, we also wanted to provide a view that reported air quality based on location. This helped users understand the air quality in their area and whether they should use their device.

Interestingly, air quality can actually differ within just a few city blocks. So much so, taking a slightly different route to and from work can have a measurable impact on one’s air quality — an interesting use case for our application.

For our project, we were most interested in Korea, as that would serve as our first market for the product’s trial.

Creating an air quality heatmap

Similar to a weather map, our application provided local forecasting using a heatmap to display surrounding pollution. It turns out there are more than 20,000 known air quality monitoring stations positioned around the world. Many of these are open and accessible as part of the public domain.

Several cloud-based services are also available for tracking AQI. Most offer easy integrations with popular mapping tools, including the World Quality Index project, AirNow, AirVisual, and BreezoMeter.

For the purposes of our quick tutorial, we’ll create a similar map using Leaflet and a set of custom map tiles from BreezoMeter’s services (available with an account). With a little HTML and some JavaScript, you can easily create a similar view.

Using the template above, once you add your API key, you should have a browsable heatmap of the world’s air quality.

Simple air quality heat map using Leaflet

Thinking about air quality at home and abroad

While we don’t tend to pay too much attention to air quality in the United States, in South-East Asia or the Western Pacific, people are much more familiar with their index. Globally, it is said that air pollution contributes to approximately 7 million deaths a year.

And yet, while air pollution in the US has generally decreased since the Clean Air Act of 1963, airborne particulates still contribute to poor health conditions in our country. Recent studies indicate that over 30,000 deaths a year can be attributed to poor air conditions in poorer regions of the US. More and more, people are beginning to pay attention to air pollution.

Most recently, Apple jumped on the train. In its latest update, Apple added a small AQI indicator in the bottom right of its maps application.

AQI in the latest update to Apple maps

Got an air tracking project? Let us know! In the meantime, here are a few other articles we ran across.

Be sure to also check out our other mapping explorations on Medium!

Find us on Facebook, Twitter, and Instagram or get in touch at thirteen23.com.

--

--

thirteen23

We are an experience design studio dedicated to the future of software. https://thirteen23.com