: How can I design this graph (select line colors and number of lines) so that it's intelligible? I'm designing a graph for a website using Highcharts. This graph contains lots of outbreak curves

@Steve758

@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.

Vote Up Vote Down

@Berryessa866

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.

Vote Up Vote Down