How can I design this graph (select line colors and number of lines) so that it's intelligible?

Question

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):

Making thicker lines to indicate higher scores:

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:

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:

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

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

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

Answer 2

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