Bucket interaction and visualization

[biamalveiro]

Goal

The goal of this PR is to fix the issues identified with the visualization of the buckets. Namely:

• [x] Visual feedback on the button when a bucket is selected
• [x] Bucket selection should reset when changing AQ.
• [x] Add a darker outline around symbols in legend
• [x] How to highlight buildings in the 0 bucket on the map?

Description

In addition to the issues described above, this PR includes some additional experiments around the color encoding used in the bucket visualization:

• 🧪 Experiment 1: Color Scale In addition to the issues above, there might be an opportunity to test different color scales. Our current color scale is similar to viridis, where the lowest value (1) is a darker shade of blue/purple, and the highest value (5) is a light yellow. This means that there's little contrast between 0 (white) and 5, and a large contrast between 0 and 1 - this may be unintuitive when reading the map. A classed sequential color scale could be a better-suited alternative. Decision: While it's agreed that we should revisit the color scale, this will be tackled in a subsequent PR as it required more exploration.

• 🧪 Experiment 2: Highlight Currently, the interaction on the legend works as a filter. This means that when we select a legend item, the behavior is to keep the buildings in the selected bucket in color and use the default color (white) to fill the rest. Because the default color can also mean 0 on the scale, this might cause some confusion. Additionally, it might be useful to keep the context of the other values when highlighting a bucket. We experiment instead with a highlight behavior, where we keep the colors, increase the stroke of the selected bucket, and decrease the opacity of the rest. Decision:: Added in this PR.

Comments

References

https://blog.datawrapper.de/classed-vs-unclassed-color-scales/ https://blog.datawrapper.de/color-keys-for-data-visualizations/ https://blog.datawrapper.de/which-color-scale-to-use-in-data-vis/

[biamalveiro]

hey @andreweland! I've discussed this PR with Simona and got positive feedback on the new legend highlight behavior. Regarding the color scale, I'll have a look at past experiments and we'll experiment with other options in a subsequent PR. Let me know if you have some feedback on the code or if it's all good to merge :)

[andreweland]

No - no more comments, you were right not to wait for me to merge!