Opened 3 years ago

Closed 3 years ago

#22174 closed defect (fixed)

Choose what colors we should use for the consensus-health line graphs

Reported by: tom Owned by: linda
Priority: Medium Milestone:
Component: Metrics/Consensus Health Version:
Severity: Normal Keywords:
Cc: teor, linda Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

A more comprehensive bug than https://trac.torproject.org/projects/tor/ticket/22108

https://consensus-health.torproject.org/graphs.html has two types of line graphs, the pure line graphs and the stacked area graphs.

We should identify 11 colors for the line graph (we expect to use the first 9 but let's hedge a little) that are user friendly, distinct, accessible to color blind people, etc.

And we should identify 5 colors for the stacked area graph. I had avoided using red because red implies 'bad' and technically none of the colors in the area graph is 'bad'. (Well, maybe Unmeasured could be considered 'bad'...?)

Child Tickets

Change History (4)

comment:1 Changed 3 years ago by tom

Owner: set to linda
Status: newassigned

comment:2 Changed 3 years ago by linda

This is a complex question, but it depends what kind of data you are trying to represent. Data is commonly split into three categories:

a) increasing values along a single dimension
b) diverging values around the center of a scale
c) discrete categories

This will determine the kind of colors you would want to use. For a), it is typical to have few colors and use varying shades of darkness to display information example, whereas this is not true for b) and c). Since I don't know the type of information the health consensus data will look like, you will need to have a look at it before determining what coloring scheme to use.

For your fallback directory graphs, I suggest one of these:

I think you want a divergent palette for your fallback directory data, based on the colors you have already chosen. The underlying assumption is that the data ranges from "not healthy to healthy."

For your bandwidth graphs, I again suggest one of these:

This is because I assumed that some things are good and other things are bad, and you want to illustrate this AND distinguish the data at the same time. "above" and "unmeasured" don't seem like good things, while "shared" may be neutral or good, and "above" and "exclusive" sound good (although they may not be, but I don't know what this is referring to). If the purpose of the colors is to just distinguish between the 5 choices with all of the choices being unrelated, use a qualitative palette.

For your line graphs, I suggest:

This is because if color is solely to distinguish between the different lines, you should use a qualitative palette. It looks like you want to distinguish the different relays.

Those above links are from a tool called ColorBrewer, where Cynthia Brewer did a bunch of research, wayyy more than I have. So I can assure you that the colors from those palettes are "good." Good, meaning that it 1) doesn't use red or green to contrast things 2) doesn't have colors that look "stronger" than another (your red in the fallback directory graph is "stronger" than the green) 3) space the colors evenly 4) are aesthetically pleasing.

(Her research is incorporated into R's ggplot, and a whole bunch of things that are the standard for information visualization. So I defer to her expertise on this one. The colors were chosen based on perceptual patterns in choropleth maps, but most of the same advice applies to using color in any type of plot to distinguish data patterns. )

As you will see in the links above, the palette offer multiple coloring options. Take the this link--- and look at the gradient of green vs the gradient of red. That can send a different type of message, due to psychological associations with color. Green looks like a calm map of the highlights while red seems like a doomsday map. So, all the colorblindness-proofing and color-distinciveness being equal, pick the palette that sends the message you want to send.

I suggest using this tool above and picking one of those palettes, but if this is not satisfactory, or if you want to verify my claims, try poking around online with keywords such as "information visualization," "visually distinct colors," or "color perception." I hope this helps!

ヽ(•◡•)ノ

Last edited 3 years ago by linda (previous) (diff)

comment:3 Changed 3 years ago by linda

Cc: linda added

comment:4 Changed 3 years ago by tom

Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.