Heat Map Colours about air-quality-web HOT 6 CLOSED

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.

from air-quality-web.

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}

from air-quality-web.

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.

from air-quality-web.

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.

from air-quality-web.

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

from air-quality-web.

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

from air-quality-web.