1

I'm designing a graph for a website using Highcharts. This graph contains lots of outbreak curves (basically, cumulative disease incidence over time). The point of this particular graph is to be able to quickly and easily compare multiple curves to a public health official's current situation (the "point estimate").

Each curve has a score (between 0 and 100) that refers to how similar to the point estimate it is. I want to display the top X scoring curves and color them according to how good their score is.

I'm having a hard time deciding on two things:

  1. What's the maximum number of curves I can display at once?
  2. How should I color the curves so that they're visually distinguishable and represent the scores?

Things I've tried:

Using ColorBrewer to select colors (darker color → higher score):

enter image description here

Making thicker lines to indicate higher scores:

enter image description here

Neither of these options are particularly good, though, because they don't adjust the lines according to the score. Instead, the lines are colored categorically. If the score of the top scoring line is 100 and the next highest scoring line is 10, the colors are not 1/10th different if that makes sense.

This led me to trying to adjust grayscale lines on a linear scale (e.g., a score of 100 will be completely black (#000000) and a score of 50 will be #808080). However, in practice, lines still aren't really easily distinguished:

enter image description here

Here, despite the fact that there is a 19-point difference between the best scoring line and the worst scoring line, it's almost impossible to tell them apart. Changing the line thickness helps some:

enter image description here

But then if I add too many curves, it just gets too messy. Here's an example (line thickness constant):

enter image description here

I obviously need some guidance. There must be science behind this problem. How should I design this graph?

Improve this question
6
  • Seems to me option 1 works quite well if you opened up the color palette a bit more rather than just using warm tones. Red highest, orange next, green.. blue lowest.. etc. – Scott Jul 10 '15 at 21:39
  • I'd love to, but I don't know of an algorithmic way to do that. I need an algorithm to say 100% is the red highest, 78.9% is such and such, etc. I need an exact mapping. I don't want categorical mapping. The color strength should be determined by the score. – Geoff Jul 10 '15 at 21:44
  • To make my previous comment clearer, I want a deterministic mapping that gives me a color, C, for a score S. f(S) = C. The trick is to define the function f so that the color spectrum makes visual sense. – Geoff Jul 10 '15 at 21:52
  • It really depends on what you are trying to communicate with the graph in the first place. I'd suggest reading through the Edward Tufte books. – DA01 Jul 10 '15 at 22:10
  • But gut-reaction is that you're trying to communicate way too much through colors and line weights. Does the x/y axis not communicate everything you need to communicate? – DA01 Jul 10 '15 at 22:11
1

As for technically realising this, any decent plotting program offers possibilities to customise colour axes as you like. As far as I can tell, Highcharts allows for this: You set stops on your colour axis with colours you define and everything else is interpolated linearly between those colours. This way you can use the full colour spectrum with an “exact mapping” as you call it.

As for choosing the colour, there are dozens of colour schemes available for exactly such purposes, e.g., take a look at this. I cannot tell you what is best for your application, but here are some thoughts:

  • For a maximum number of distinguishable colours, go once around the hue wheel and from dark to light, so e.g., you go black → dark green → slightly dark blue → sligthly light red → (light) yellow → white.
  • Keep colour blindness in mind, especially red–green (as it is the most prevalent). The above scheme does this by placing red and green far away in terms of lightness.
  • You can select your stops such that differences in a certain range of your score are better visible than in others. For example, if the highest scoring curves are most relevant and most important to distinguish, you can arrange select your colour scheme such that it shows more differences in that range, i.e., do not put the stopes equidistantly but such that most of them are in the range of values whose distinction is most important.

How should I color the curves so that they're visually distinguishable and represent the scores?

This really depends on your data and what is important for the viewers. The central question you need to ask yourself is: Can all relevant information be easily seen?

Also consider focussing selecting the ranges of your abscissa and ordinate with respect to the important data and not with respect to all data. For example, if the outlying line in your last example is not really relevant or all the viewer needs to know is that it’s way off scale, then you should let your ordinate stop at 250 k.

Improve this answer
1
  • This is great! I had no idea Highcharts has that option. I initially thought that would solve my issues, but I found another solution that's actually similar to Highcharts stops. See my answer for more info. – Geoff Jul 13 '15 at 22:56
0

@Wrzlprmft made an excellent comment that really helped. Although his solution didn't quite get me 100% of the way there, it did put me on the right path.

This web app is a Django app (Python). As a result, I've decided to use a library called spectra. Spectra has functionality identical to Highcharts' stops with linearGradient. Spectra allows me to do this:

>>> color_scale = spectra.scale(['red', 'blue']).domain([0, 100])
>>> color = color_scale(39.33)
>>> color.hexcode
'#9b0064'

This is exactly what I need.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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