< Your Name | Code 2 Portfolio

Project #10 Souveillance Tool: Dark Breathing

link to code

link to API Information

Description

This is data visualization of air pollution. We know the serious issue of air pollution and global warming. But we do not exactly know what we are breathing in. I think here is the dark pattern. The goal of this project shows the components of polluted air we are inhaling now and raise the awareness of our health and life as well as environmental issue in terms of souveillance perspective. The API data was provided by OpenWeather and I brought all pollutant components they serve to this project. You can simply click the main city at bottom and check the air pollution of the city. Furthermore, if you input the coordinates information, you can see the air quality of every place on this planet.

Design Process

Once I got the API key, I made arrays of eight main cities and their latitude and longitue. And then for the input data, I loaded whole Json data whereas I loaded one data set sepearately for the city bbuttons. I wanted to retrieve the multiple API data by using array but faced so many loading errors. I needed to put only one data set for one city. Total eight components of air pollutants are presented here as a number of circles by color. For more accurate data information, I put the separate board that clearly shows the level of pollution of the eith component. By simply seeing the colors, people can quickly notice which pollutants are there in each city.

Reflection

This last project of CC class was so-time consuming and had trouble in finding API data and getting the key access. I really wanted to visualize Covid-19 and other virus situation in the world but failed. However, I may be able to apply the simailar visualization method later. If possible I think it will be a great idea to use different APIs. Since this is about air pollution and human health, I may combine this with other APIs such as medical data containing repiratory issues.

Credit

breaking API url and adding values: https://cclab-portfolio-jiayue.glitch.me/p10.html:

W14 API examples: Jules Kris💖