Display and color code readings on the map

[TangoYankee]

Description

The viewer wants to look at the data points displayed on a map and understand at a glance what the general degree of pollution is for those locations.

• Per conversations with WOEIP, we'll color code the data points on the map to reflect their PM2.5 levels, using the 24 hr average EPA color standard for PM2.5 for our air quality readings on the map (see comment).
• If there are multiple sensor readings for a particular geopoint (same (lon,lat)), I would like the reading for that (lon, lat) point to be the max of all the readings. (As a user, if there are multiple sensor readings for a particular (lon, lat) point, I would like the reading for that (lon, lat) point to be the max of all the readings. #318)

Technical implications and resources

• Starting place to look for potential styling controls in the codebase: web/src/components/map/box.css
• Reference for Mapbox styles
• Related issues: As a user comparing the same path of 2+ data collectors, per 3m, I would like to see the AQ averaged across all of their data points. #317, As a user comparing the same path of 2 data collectors, per 3m, I would like to see the min and max across all of their data points. #316

---

Archived issue description for posterity

Is your feature request related to a problem? Please describe.
AQ Data for PM2.5 particulate matter are collected as an absolute measurement of Parts Per Million milligrams per cubic meter or micrograms per cubic meter. There should be a classification system in order to provide context to how dangerous the air was during a session

Describe the solution you'd like
There should be an algorithm / set of rules to classify the AQ. The rules should be open source, to give users a way of challenging the assumption we made in developing the rules. The rules should reflect best practices for Public Health.

Describe alternatives you've considered
Instead of a classification system, we could present raw statistics, such as min, max, mean, median, and st dev of readings.

Additional context
This classification system should provide users a quick way to accurately gauge the danger posed by air pollution.

Existing classification systems

• WHO Air quality guidelines
• EPA National Ambient Air Quality Standards

---

@gsehrlich edited information about units in which data are collected on 5/3/2022. See issue #464.

[theecrit]

I'm not sure an entirely new classification system is necessary but I like the idea of challenging the limitations of existing classifications. When we're ready to dig into this, we should also be sure to center the conversation around the work WOEIP has already done here—they already have a set of actual environmental indicators (pdf attached, pp13-19).

We'll want to explore what a classification system implies:

• Equity comparisons (WO compared to all of Oakland/AC/CA/et al)
• Impacts (on health, transport, etc)
• Impacts on WOCAP work (since they will be measuring actual changes in WO AQ to evaluate whether the strategies are working or not)

etc.

[kwonangela7]

Per our conversation with him, Brian's recommendation is to use the 24 hr average EPA color standard for PM2.5 for our air quality readings on the map (source)

I think everything Jess mentioned above are still good things we should consider at some point. However, for the MVP let's stick with Brian's recommendation and use a standard for a 24 hour average even though woaq's air quality numbers for a single session (and even the comparison of sessions) are computed with real time data.

[kwonangela7]

@brooksjessup is working on the color coding with @kbrdsk, so I assigned both of them to this one. Since this is a larger ticket, we may end up having several assignees.

[TangoYankee]

I see the third acceptance criteria: "see the min or max of air quality per 3 meters" used to be its own issue- #315 . I think it should be split back into its own issue for three reasons.

1. The first two acceptance criteria are already complex
2. The third criteria appears to be an independent feature
3. I think we will want designs that clarify what it looks like to display the min and max, without cluttering or slowing down the map. Do we have those or can we link to them?

[TangoYankee]

Per our conversation with him, Brian's recommendation is to use the 24 hr average EPA color standard for PM2.5 for our air quality readings on the map (source)

The classification for PM2.5 is available in this chart:

The dustrak measures in mg. The conversion of m to μ is 10^3 μ to m.

[kwonangela7]

@theecrit tagging you for the comment above as I'm not sure if Github sent the notification due to some formatting issue I had when I first posted the comment.

[kwonangela7]

Shoot @TangoYankee -- sorry, I should have made this more obvious on the ticket itself as opposed to just it being a comment but Brooks and Kabirdas actually implemented #2 in Mapbox itself! Kabirdas opened up PR #364 so that we could do stylings in Mapbox (and also use the one Brooks already created for #2, check it out here) that would show up on the website.

However, being that I'm not a web developer myself, I'm not sure if it's better to have it done on Mapbox and use Kabirdas' code to have it show up on the app, or to do it through React (as I'm guessing you did?). Anyway, sorry for this situation where we have two solutions for the same problem!

[TangoYankee]

Having the feature depend on an outside style is fragile. If the map breaks or we need to change it, it is difficult or impossible for another developer to manage it.

The application is designed to use react and mapbox directly in the front end. This allows any developer to have direct access to how the data is displayed. It also gives us more control to optimize its performance and add new features, such as #331 .

[kwonangela7]

I went ahead and moved the third item into #315; thanks for your patience!

@TangoYankee I put this ticket back in needs definition b/c item #2 needs more. What I currently have for designs for item #2 are the wireframes for the Figma prototype linked in a previous comment. However, the design shows more requirements than what's on this ticket, so it needs to be further broken down to be useful for this ticket.

I'm going to try to set up a time with Jess to further clarify, and hope to have an update soon.

Sorry @TangoYankee, I misspoke back when I wrote this comment. #2 does have a design (as you've already implemented). The dot representing the reading along the path should take on the color of the max reading.

In the meantime, let me know if there's any other information that I need to provide to make this ticket ready to work on for a dev. Thanks! Not needed; Tim already finished this ticket!

[theecrit]

@kwonangela7

However, the design shows more requirements than what's on this ticket, so it needs to be further broken down to be useful for this ticket.

Are you referring to the pop-up for an individual geolocation? That is covered by #331 and is not within the scope of this issue, so shouldn't be a blocker. This issue is for the route path display only.

[kwonangela7]

@theecrit -- you're totally right, and I finally got around to updating the comment above. Sorry for the confusion!

[kwonangela7]

@mnorelli, Tim actually has a PR open for this work! #380

I'm going to take you off as an assignee for this ticket since Tim completed it, but I added you as a reviewer to the PR as I thought you'd be a great person to do it! Hopefully this is okay with you, but take yourself as an assignee if not.

(Apologies that I didn't realize this work was already done 😅 )