kaijagahm / ygdpDashboard

Interactive dashboard for YGDP survey data
3 stars 0 forks source link

(INT) (PTS) change color scales #26

Open kaijagahm opened 3 years ago

kaijagahm commented 3 years ago

I've picked out some color scales for the app, but we're not sure these are final. We might want to change them. However, choosing colors is harder than it sounds. Here are our constraints:

  1. We need three different color palettes: (A) one for values that range between 1 and 5 (either discrete or continuous; can use the same palette); (B) one for values that range between -4 and 4 (continuous only); and (C) one for a boolean accept/reject based on selected criteria.

  2. Palettes must be colorblind-friendly

  3. Since we're trying to illustrate that there are two ends of a scale from "reject" to "accept", rather than just showing degrees of acceptance, we ideally want the palettes to range from one color to another, not to range e.g. along a gradient of light to dark for a single color.

  4. Can't do red and green because it's not colorblind friendly.

  5. It's tempting to use red and blue, but that's pretty problematic: we used red to mean "hot spot" and blue to mean "cold spot" in the map book, but when it comes to points (and in the absence of the hot/cold language), some people have the opposite association with those colors. I, for example, strongly associated red with "reject" and (less strongly) associate blue with "accept".

  6. Jim really liked the purple/green palette that's currently in use on the YGDP website, with green meaning "accept". I tried using it, and the problem is that the color between purple and green is a really icky grayish brown. Can solve this by specifying more colors to define the continuous palette. But the most logical color to fade through is white, which means that ratings of 3 show up as white circles, which blend into the map. This is probably not an insurmountable problem, but it was enough to make me veer away from the green/purple palette.

  7. The two palettes need to be pretty different (i.e. not sharing any colors, or at least if they share a major color like "blue", they shouldn't have the same shade of that color). We don't want people to get confused and try to draw comparisons between the colors in the two palettes. They're on totally different scales.

kaijagahm commented 3 years ago

Current color schemes (A) ranges from blue for a rating of 1 to a slightly orangey yellow for a rating of 5. (B) ranges from purple for a rating of -4 to yellowy orange for a rating of 4. (C) has yellow for "meets criteria" and black for "doesn't meet criteria".

kaijagahm commented 3 years ago

This site is very useful for testing out color palettes. To make sure that the gradient looks smooth, you can look at the little rectangles of color that show up along the upper bar to see if the fade looks continuous. You can adjust hue, saturation, brightness, etc., and you can test different types of colorblindness.

Screen Shot 2020-12-08 at 14 35 53