Based on preliminary ContAQT design, the TILES AQI Research team decided to redesign the AQI data visualization. Before commencing the redesign, our team aimed to redefine what we wanted to portray through our data visualization chart. Yixuan Li and Jaeri Suh conducted brainstorming sessions, and the resulting learning goals are as follows (These learning goals are evolving as the process progresses.)
- AQI is constructed with 6 different factors (taking the highest value).
- AQI values can be the same for different dates, but the driving factors are different.
- AQI levels are divided into 6 different levels, and the higher the AQI, the worse it is.
Our team then identified the remaining issues from the original design that need improvement. These insights were gleaned from previous researchers’ evaluation reports and our team’s product teardown process.
- Despite the interactivity of dragging one of the components up to the maximum value of the other 5 chemical components, thus changing the entire value of the AQI number, it is still hard to discern why and how this number takes the highest value.
- Due to the shape of the hexagons, it seems as though the AQI is the combined value of the other six chemicals.
- It does not effectively convey the fact that each chemical has a different value due to the entire color change of the shape from the maximum value.
From these insights, our team worked on various charts and models to determine how we can make our learning goals more intuitive and meaningful to people. Assuming that these interactive charts will be presented outside the public space, we had to ensure that the chart is attractive but at the same time intuitive as much as possible, since people won’t spend too much time trying to understand what these values mean if it’s hard to comprehend.
1. Ver 1.0 for AQI Daily chart
This is the first iteration we redesigned, created in d3. Our research team replaced the hexagon shape with circles to express that AQI is constructed by these six chemicals. We also made it draggable up and down, changing the background color when the maximum value of the number changes. However, the difference from the original design was that we retained the distinct color for each number of chemicals instead of merging them into one color. The reason was to show that these components still retain their individual significance. The AQI number is only impacted by the maximum number of chemicals; the entire set of chemicals does not change their value due to changes in other chemicals.
An animation is also incorporated into this daily chart. The high value will appear first, followed by the other five components accordingly, demonstrating what determines the AQI of the day.
2. Ver 1.0 for AQI Monthly Chart
For the monthly chart, we had two learning goals. We wanted people:
1. to understand that every day the driving factor of the AQI can be different
2. to compare the monthly AQI trend for each component of the month.
This animated data visualization idea was inspired by Heat Map and COVID Viz. The x-value represents the date of the month, and the y-value represents the six chemicals that influence the Air Quality Index. We ensured that the opacity and size of the rectangles were more prominently displayed when it’s the driving pollutant, so that people can intuitively see the trend of the AQI. From this chart, the audience can observe that each chemical’s value is different every day by comparing their size and color of the rectangle horizontally. At the same time, the audience could vertically see which chemical was the daily AQI driving factor by again comparing the size and color that is most prominent in the vertical line. Also, this can be more easily depicted by the animation we inserted. When the data visualization is played, the highest value of the rectangle will jump up to the gray AQI area to show that this is the driving pollutant of the day. Then eventually, the audience can compare the AQI trend of the month by again comparing the size and the opacity of the rectangles.
For example, on day 4, the driver pollutant is PM2.5, indicated by the yellow color and the largest size, while on day 7, the driver pollutant is O3, characterized by a lighter opacity and thus a lower value of the AQI that day.
However, issues still remain, especially with this data visualization. When you first look at it, it’s hard to understand what all this actually means. Because there are no numerical numbers, the audience will find it hard to discern the exact values or why this rectangle is being pulled up without any prior knowledge.