Color adjustments from Kelin

[dabreegster]

Kelin (UA programme manager with an architecture background) kindly joined a UX session, and we generated lots of ideas to improve ATIP. Here are a few simple ones.

First, change the colors for routes and areas, and add an outline to areas. The outline emphasizes it as a clickable object more, and matches how Felt looks. Before: After:

And second, change the color scale used for showing speed limits. It's based on the first big map in https://knightlab.northwestern.edu/2016/07/18/three-tools-to-help-you-make-colorblind-friendly-graphics/, but we adjusted the middle color, since it's too close to the basemap background color. We adjusted it by using the "mix" tool in gpick, mixing it with the category for 40 mph. Before: After:

Also note that the new color for routes (grey) is sort of a "continuation" of that color scale, a darker version of the "< 20" speed category. This is meant to suggest new route infrastructure proposed will be even better than an naturally slow-traffic street.

We can take any or all of the ideas here. Any opinions?

[Pete-Y-CS]

I think the first changes look great, and the reasoning sounds sound for all changes.

To me the second changes... well it's quite noisy in either case. I think it's hard to follow the map with speed limits but I think that might be a tricky problem to solve. I think the changes make it look better but still difficult, so I kinda like this as what seems like a step in the right direction

[robinlovelace-ate]

These are clear improvements I think, except for the speed limits. I think dark red for the fastest road category is good. Overall thumbs up and will add my review accordingly.

[dabreegster]

Thank you for the reviews / feedback! I reverted the changes to the speed limit layer for now, since that needs more thought. Just changing base intervention colors and adding area outlines.

can some of these configs be usefully split out as, for example, speed-limit-cols.json?

We partly do: https://github.com/acteng/atip/blob/main/src/colors.ts. For some projects, I've tried centralizing most color choices. A downside is loss of context and requiring sufficiently explanatory names for everything. At the moment, I think the codebase is small enough to work as it is (and easy to live-edit with Vite's hot reloading). If/when we properly handle multiple basemaps, then we could revisit how we organize color code. That's a much harder problem -- all color choices depend on the maptiler style, and don't look good against satellite.

[robinlovelace-ate]

Looking good for Manchester where I plan to demo ATIP v2-latest (OK with that as a version name for now Dustin, with thinking still being that v3 will have the updated schemas after #231 ?) to transport planners.

@EmmaVinterATE shared a link to guidance on colourschemes for data visualisation, could you share the link to that if you get a chance Emma?

[EmmaVinterATE]

No problem, here is the link: https://analysisfunction.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/ . Hope this helps!

[robinlovelace-ate]

That is great, thanks Emma, could help in terms of making ATIP feel more gov.uk