Change coloring of slider bars on "Mitigation" page containing Mitigation Calculator to Align with Data Visualization Norms

[joshjacobson]

• "R with the above measures" should go from green -> yellow -> red. Typically red is associated with 'bad', and "green" is associated with good, but that is not properly portrayed currently. The transition from green to yellow should start at 0.7 and at values above 1 it should be red (which gets darker at higher values).
• Change "R without any measures" to have the same color scheme
• Change the "blue" section in the "measures" bars to instead appear as a gray overlay of the underlying yellow bar (so it will appear as a darker/grayish yellow section, that can be more clearly interpreted as a sort-of confidence interval). Add a dark gray dot indicating the initial/default set point.

[hazarane]

@joshjacobson I'm not sure I understand the first point of this ticket. In the "R with the above measures" the red color represents confidence interval (std), so it doesn't directly relate to the resulting values of the R estimate. If we change the color of the confidence interval based on the resulting R value, it gives an impression that some std is good and another one is bad :) and it's not accurate, also given the fact that std in the main calculator is static as far as I know. Maybe we can show the resulting R value estimate in a different color?
In case I didn't understand correctly what you mean here, can you please elaborate? Cheers!

[joshjacobson]

@hazarane I thought the red was basically applied randomly; it wasn't clear to me that it portrayed a confidence interval.

The reason for that is while I do notice that the red color does sometimes move, it doesn't seem to properly portray confidence interval. For example, in the below images, the value does not lie within the red portion... I'd expect it to near-always be near the center of the red if it were properly portraying confidence interval.

If we do want it to portray confidence interval, I suspect there's something to fix here about the color behavior. Then, instead of red, I'd want to apply the color scheme of the third bullet (gray overlay).

One alternative would be to apply the color scheme as I suggest, and instead have color denote how positive/negative the situation is. A second alternative would be to do both, changing the underlying color scheme to my suggestion and using the gray overlay to indicate confidence.

So our options are:

1. Fix this so that color properly moves according to outcome, and then apply the gray overlay instead of red
2. Change this as originally suggested, with no indication of confidence interval
3. Change this as originally suggested, and add the gray overlay for confidence interval

I prefer option 3 if the confidence interval indicator can be easily fixed, but if it would take significant time, I prefer option 2.

[hazarane]

@joshjacobson we fixed the confidence interval, and for now we went with the option 1 + we showed the color on the resulting R number itself. It's on staging, please have a look. Changing the color scheme of the sidebar would be a bit more complex also I'm not sure it's very clear what that would mean as we don't show the numbers on the sidebars.
Please let me know, cheers!

[joshjacobson]

@hazarane Thanks, this looks pretty good. In fact, is there a way to subtly make the resulting R value more prominent... maybe bump up the font-size and/or font-weight just a little?

I don't think it makes much sense to have a confidence band on the "R without any measures" slider, since that's just an input. Can we remove the shading from that one specifically?

Additionally, can we implement the request from task 3 above, "Add a dark gray dot indicating the initial/default set point."

And can the gray shading stop with a line, rather than fade into yellow, so that it more clearly denotes a confidence interval?

Thanks.