Our Planet's Air is an interactive map visualising the real-time different air pollutants in major cities. This idea arose from the need for people to have a visual representation of a problem to be moved to address it more urgently. My hope is that people will see this as a global issue and feel more motivated to work towards solutions.
Javascript, D3.js, HTML, CSS
Users can click each button to display or hide the visualisation of that specific pollutant on the map. This pollution data is collected from the World Air Quality Index API upon page refresh.
Users can hover over each city to display a tooltip giving the name, population, and pollution numbers for each city. The AQI level and the levels of different pollutants such as NO2 and CO also display real-time data upon page refresh.
const promises = [];
for (let j = 0; j < capitals.length; j++) {
const promise = json(
`https://api.waqi.info/feed/geo:${capitals[j].lat};${capitals[j].lng}/?token=${aqikey}`
);
promises.push(promise);
}
const array = Promise.all(promises).then((array) => {
for (let j = 0; j < capitals.length; j++) {
capitals[j]["aqi"] = array[j];
}