Water Temperature color scheme is representative of accuracy of model through binning/discrete categories. Color selection is colorblind compliant.

[jenniferRapp]

This new issue is in response to Don Cline's comments regarding the Water Temperature mapper. When we receive his slides we will develop a plan for updating the colors scheme and determining the most appropriate way to bin the temperatures or to leave continuous data. At present (Feb 2, 2021) the work is not extremely pressing because Pat may wish for the documentation of the national water temperature model to be completed prior to the release of the app.

[jenniferRapp]

• [ ] Color Blind or 508 compliant - research general guidelines for gov websites.
• [x] Cartography advice. Jen Bruce and Hayley Corson-Dosch (Lindsay will reach out, but want the slide in hand)
• [ ] Use color to show accuracy of the model results. - how could we bin temps appropriately? Issues with this when you get close to the edge of a bin. Make the bins the size of the accuracy? +-3 = 3 degree bins?

Are the data rounded, integer, decimals? 4 decimals from the modelers. Work with modelers to understand accuracy? 30 degrees binned by 3?

Snippet of the data nhm_seg	Date	temp
1	1/30/2021	5.5345
2	1/30/2021	6.0434
3	1/30/2021	6.6671
4	1/30/2021	6.6476
5	1/30/2021	6.0854
6	1/30/2021	6.1223
7	1/30/2021	6.4097
8	1/30/2021	6.7535

[mhines-usgs]

even though we haven't heard anything from our expert inquiries yet, I thought I would look at this for a little while this morning

created tiles locally styled with 3 degree categorical bins, using this color swatch on a white background (the site says it should be colorblind safe) https://colorbrewer2.org/#type=diverging&scheme=RdBu&n=10

close ups

i wasn't sure how to make the legend nicer/more like a set of swatches, but i'm sure Marty can help with that eventually 😄

the tile style shown

"paint": {
                    "line-width": [
                        "interpolate", 
                        ["linear"], ["zoom"],
                        5, 1,
                        6, 2
                    ],
                    "line-color": [
                        "step",
                        ["get", "temp"],
                        "#053061",
                        0, "#053061", 
                        2, "#2166ac",
                        6, "#4393c3",
                        9, "#92c5de",
                        12, "#d1e5f0",
                        15, "#fddbc7",
                        18, "#f4a582",
                        21, "#d6604d",
                        24, "#b2182b",
                        27, "#67001f",
                        30, "#67001f"
                    ]
                  }

pushed that code into this PR in case anyone wants to poke it https://github.com/usgs-makerspace/wbeep-viz/pull/652

[jenniferRapp]

[Monday 5:23 PM] Platt, Lindsay R

Reporting out from the Vizlab meeting about colors Rapp, Jennifer L Hines, Megan K Wernimont, Martin (Contractor) R

I shared the slide that critiqued the color ramp. We had a really great discussion that wove its way through user needs/experiences, designer instinct, and color theory. Below were some of the main points/conclusions.

• Color is hard; especially for skinny lines/geometries (like streams)
• The goals of a visualization will impact the design choices as it relates to visual hierarchy. Thus, coming to consensus with project leads about the desired goal for users of the visualization will help shape the changes made to the color palette.
• This visualization used a valid technique to deemphasize the middle of the color ramp by making it blend in with the background. However, this is usually used when you are talking about deviations from normal/common conditions. In this scenario, we are saying that ~15C is "normal" and emphasizing extreme temperatures. Perhaps, that is not the conclusion people should make with stream temperature. - Constraining to reds/blues in order to leverage existing feelings of hot/cold was a good choice.
• Using a graduated scale (categorical) may help resolve some of the critiques about being able to distinguish colors. Limit categories to 4-5. Any more than that become difficult for a user to understand.
• Try using a tool that has color scales already determined which meet accessibility and interpret-ability standards. Here are a few examples and resources that could help. See ColorBrewer, Scientific Color Map examples (vik or berlin could potentially fit our needs), 18F Color and Contrast guide

[jenniferRapp]

Lets try to implement the color ramp that we have but using 4-5 colors. Try to stay away from colors that look like the background, and see if you can identify a tool to ensure they are each distinguishable from each other and the background.

[mhines-usgs]

I made some adjustments to the above PR to use fewer bins, and played with the legend a little and at least got some map-legend-like swatches instead of the gradient but not quite there yet as I had a hard time aligning the labels to the color swatches. I asked Marty to check out the legend sometime if he has time. I think the background color that provides the most contrast is white.

I plan to spend a little more time Friday looking at adjusting the colors, I think even though the swatches look good and are easily to distinguish there, they're hard to differentiate as lines. It also is probably worthwhile to download some of the older data generated from S3 too so we can see more examples of data depending on time of year, too.

[mhines-usgs]

for the merge we just pushed, putting this contrast test results here, doesn't seem great in the mid range so will look at more options soon. https://contrastchecker.com/ (granted this is for text so reading more here about non-text contrast ratios) https://webaim.org/articles/contrast/#ratio https://contrastchecker.com/?swatch_session=1613147973720

[jenniferRapp]

Discussed today (Megan SL) Pick three different color ramps from Megan's PPT and show why they are good options. Write up a brief explanation for how we tested and selected these three, using the contrast checker and other tools. Then we will have this in our back pocket for the next release. I def would consider sharing with Pat and modelers to help them see how we addressed Don's questions. -[Lindsay] Round or add decimal places? Round the data correctly. And keep the single digit values in the legend. That will better represent the values coming from the models.

[mhines-usgs]

I've been looking at this on and off since Jen and I met last week and took a look at some of the examples I was working with, and it's super challenging to get appropriate levels of contrast with a background color, for the kind of ramp we are looking at using. I can explain more Monday but just wanted to throw this in there in case you all have time to think about that before we meet again.

[jenniferRapp]

We can def take some time to look with you, Megan. I don't have the PPT you were showing me last time you and I spoke.

[mhines-usgs]

Sorry about that, I just put it up on Teams in the Filespace here: https://teams.microsoft.com/l/file/D05CF58C-D511-47C3-8C97-7C7C0134FD49?tenantId=0693b5ba-4b18-4d7b-9341-f32f400a5494&fileType=pptx&objectUrl=https%3A%2F%2Fdoimspp.sharepoint.com%2Fsites%2Fgs-wma-iidd-makerspace%2FShared%20Documents%2FProject%20-%20WBEEP%20NHM%2Fcontrast%20color%20schemes%20investigation.pptx&baseUrl=https%3A%2F%2Fdoimspp.sharepoint.com%2Fsites%2Fgs-wma-iidd-makerspace&serviceName=teams&threadId=19:378d629b177c46ae811160f4dbb602ab@thread.skype&groupId=80983861-ab36-4fdc-a217-17742ba5ee3d

I'm still making edits to it, hopefully it doesn't get too large in the shared space.

There are links and details in the Notes part of the slides.