Heat Map Colours

[robinharris]

Currently the heat map colours rarely change. Could we use only the latest datapoint to set the colour (based on the DEFRA scale for PM2.5) with the objective of seeing much more variation in the colours on the map?

[sbrl]

Hey, great point, @robinharris! There's a lot of work that needs to be done on the heatmap. Currently, the heatmap colours are defined here in a Javascript object literal. This works great, but I need to look up the official colours and translate them into this system to improve the fidelity of the display.

Do you have a link to the official air quality scale though? I've seen several competing colour schemes.

[bsimmo]

So the scale is 0 to 1 in the code.

"PM25": { // 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple) max: 75, gradient: { "0": "hsla(111, 76%, 42%, 0.00)", "0.233": "hsl(111, 76%, 42%)", // green "0.593": "orange", "0.827": "red", "1": "purple" } https://uk-air.defra.gov.uk/air-pollution/daqi?view=more-info&pollutant=pm25#pollutant

I'm not a web site never made webpages really, but going into the source and then the guess at the css sheet, a quick search and I think this is what you need? bg_low1{background-color:#9cff9c;color:#000}.bg_low2{background-color:#31ff00;color:#000}.bg_low3{background-color:#31cf00;color:#000}.bg_moderate4{background-color:#ff0;color:#000}.bg_moderate5{background-color:#ffcf00;color:#000}.bg_moderate6{background-color:#ff9a00;color:#222}.bg_high7{background-color:#ff6464;color:#000}.bg_high8{background-color:red;color:#fff}.bg_high9{background-color:#900;color:#fff}.bg_very_high10{background-color:#ce30ff;color:#fff}

[sbrl]

Yeah, @bsimmo. It's actually used as a gradient that I pass to the library - hence between 0 and 1 with the maximum value.

Unfortunately, while that CSS is helpful, I have to define it in the place indicated. Any CSS is automatically generated through the build process you see. If you're interested in picking through the code, I can recommend cloning this repository and looking through it.

Thanks for the link though - it's very helpful! I'll use that as a reference.

[bsimmo]

CSS was more for the hex colours used. bg_low1 = 0-11 bg_high8 = 59-64 on the official defra scale website

If we add devices, you could have the same 10 point colour scale and then just call as needed for PM2.5 PM10 or in future O3, NO2 etc, just the µg/m³ changes for each measure.

[sbrl]

Ah, I see. I've taken the hex colours from the official website and am substituting them in now.

I have a system that allows me to have a different colour scheme for each reading type - but I think I broke the bit where you switch reading types a bit ago and didn't notice. Something else to look into!

The heatmap is my current area of focus, after recently focusing on the device graphs for a while. It will take a while, but I've got some great ideas on how I want to improve it :D

[sbrl]

Fixed. It should be deployed in the next 1/2 hour. If not, let me know :-)