#daqs

This visualization is based on the data of another project I am currently working on independent of classes:

The DAQS system uses the existing bus network to provide mobile sensing over a repetitive and suitable route. Two types of air quality units are used: high-sensitivity units fitted with high-grade electrochemical sensors and low-cost units fitted with cheaper electrochemical sensors that have been used successfully in other studies for air quality monitoring. On selected routes, buses are fitted with high-sensitivity units and the bus stops on those routes are fitted with low-cost units. The bus stops provide the needed coverage and real time data for the system while the buses serve as a calibration reference each time they pass a bus-stop. This is because data from both sets of sensors are uploaded to a database in real time and the data is calibrated then processed before making the information available to end users. This achieves accuracies comparable to the more expensive sensor at the cost of the cheaper sensor. Therefore it becomes affordable to have a city well encompassed by air quality sensors, resulting in dramatically fewer coverage ‘dead-zones’ and a constant feed of information.

This data is provided to the Firebase database in real time using the json query method. I created an initial visualization using basic graphing techniques in p5.js without the use of any libraries as seen in previous project submissions. However, I believe this is not a satisfactory way to convey the information to a wide audience in an effective manner. This is because it is very hard to determine the quality of the air from the sketch as well as any technical information about each of the parameters being measured. My new attempt for this class makes use of the grafica.js library. With this library, I was able to make a much more clear and useful interpretation of the data. Now it is easy to read the values of each parameter, understand whether the reading means that parameter is affecting your health and lastly, information about the parameter itself. While I have set up the connection to the firebase data in the previous plotting program attempt, I decided not to port that across for this demonstration. This is because the sensors being used in the first prototype which supplied the data to firebase were having technical difficulties resulting in a lot of the readings being constant and therefore not interesting visually when plotted. Once I collect more data from the monitoring devices, I will port across the firebase data connection to this visualization.

I had substantial difficulty working with the grafica.js library because it was set up differently to functions I had created in the past. However, the process of understanding this was very useful to add another dimension to my p5.js capabilities and for future projects.

My future plan for this is to create a date and time slider to that the user can see past readings instead of just the most recent 100 hours. Also, I plan to have a second ‘snapshot’ page which provides a summary of the most recent air quality data so the user can see all at once, all of the air quality parameters they are breathing in at that point in time.