5

My users pick one or more data sets to graph on a single canvas. The sets are color coded to distinguish between sets (all screenshots are for demonstrative purposes from demo utility):

enter image description here

  • BLUE=temperature inside
  • RED=temperature outside

More and more data sets are becoming available as the project develops, so the user picks from a larger and larger list of measurements:

enter image description here

  • BLUE=temperature inside
  • RED=temperature outside
  • GREEN=other temperature inside
  • PURPLE=pressure outside
  • ORANGE=beam energy fluctuation
  • BLACK=neutron count

The more instruments we have the more colors we need, so we necessarily start filling out the hex color wheel:

  • BLUE=temperature inside
  • RED=temperature outside
  • GREEN=other temperature inside
  • PURPLE=pressure outside
  • ORANGE=beam energy fluctuation
  • BLACK=neutron count
  • LIGHT BLUE=photon count
  • DARK PURPLE=water flow rate
  • GRAY=RF intensity
  • ...

I understand with dozens of data sets (and growing), there is no way a user can see every set simultaneously with sharply contrasting colors. However, what I would like is a list of (many) predetermined colors, spaced as sparsely on the color wheel as possible, to assign to data sets as we keep adding instruments. This way, the first data sets have the same colors they originally had even though we keep adding new ones (backwards recognizability), and the new ones are as different as possible from the existing list.

My question is: do designers have a standard color list I can use to associate with new instruments to maximize contrast between any two series?

7
  • To solve this, I was considering picking the following colors for the data series: 1) arbitrarily picking any point on the color wheel, 2) using the color at the pixel maximally far from the first, 3) using the pixel maximally far from the previous two, 4-30ish) repeat until many colors chosen... Before I put the time into doing this, I was hoping the UX world already had an established (and probably better) color list for this purpose. Commented Jan 25, 2016 at 17:01
  • The colour wheel option seems appropriate at first but some colours have far better differentiation by humans than others, and you'd be limiting yourself to one dimension (hue) of a multi-dimensional kind of dataset (e.g., hue, saturation, brightness). There's often a lot more differentiation between degrees of saturation than between degrees of hue.
    – Kit Grose
    Commented Jan 25, 2016 at 22:17
  • Slight deviation from the question...but why are your users plotting different types of data on the same chart? In what context would it be useful to see a single graph with flow rate, beam energy fluctuation, and temperature?
    – Nate Green
    Commented Jan 26, 2016 at 15:43
  • @NateGreen, This is the UI for "data review" of the various instruments in an experiment at a nuclear physics lab. It helps to see time slices of certain combinations of sensor records to analyze what happened in the experiment. As we need more eyes and ears, we add sensors in various places. Commented Jan 26, 2016 at 17:17
  • @user1717828 I gathered that...I guess I was just wondering why you'd want to see things with different units on the same scale. Seems like it'd be misleading. I didn't see the demo link at first, though, and that helped clear things up a bit. Seems to me like for this particular use case, something more like a polygraph might be helpful, so you could spot patterns visually without having to worry about running out of colors or mixing apples with oranges.
    – Nate Green
    Commented Jan 26, 2016 at 19:11

4 Answers 4

7

color brewer is designed for maps but it will give you colours that are optimised to be as differentiable as possible.

It has a maximum of 12 colour classes

enter image description here

2
  • I was hoping for more than 12, but I will have to take it and expand upon it if this is all there is. Commented Jan 27, 2016 at 13:45
  • Take a look at @ZoeK's answer - the Datavis list has up to 20 colours
    – icc97
    Commented Jan 27, 2016 at 14:04
3

There are a few pre-made category color sets for Datavis, made by Mike Bostock, that go up to 20 colors:

enter image description here

However, in my POV they are not very interesting aesthetically, so if you are into a custom or advanced color work, you could try the ColorBrewer by Cynthia Brewer, as @icc97 said.

2
  • 1
    Those sets by Mike Bostock are useful as they give a wider range than the color brewer ones. He's integrated the ColorBrewer colours into d3.js as he notes at the bottom of the Datavis link you posted
    – icc97
    Commented Jan 27, 2016 at 0:15
  • Yes, that's right.
    – Zoe K
    Commented Jan 27, 2016 at 7:03
0

There is no standard list, but there are rules how colors come together or contrast. I use Paletton when I have any questions or doubts about colors. There are plenty of options there to research and experiment. I think it might be a good starting point for your list.

0

No, and in fact most of the default colour palettes of standard applications are not particularly suitable because it is difficult to take into account the number of datasets you are going to plot or display.

However, there are a couple of strategies you can consider when you are going to be working with a very large dataset (with many data series):

  1. Provide grouping options based on logical sequences (e.g. date, time, type of measuring device) that allows you to use similar colours that relate to similar values or data seriesso you don't have to juggle too many colour types.
  2. Use not only colours, but different line or stroke patterns (e.g. dashes, dots) that will give users other ways to distinguish between data series
  3. Reduce the amount of information that you show on the screen at any given time, by giving the user options to filter and sort the data series.
1
  • #1 doesn't apply because people often plot like data sets together. #3 doesn't apply because, as explained, if Temperature 4 and Flow 7 are both red, it's only a matter of time until someone wants to see them on the same graph and we'll have as problem. #2 is actually a great solution; I will look into what line/point styles I have available. Commented Jan 26, 2016 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.