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:
- What's the maximum number of curves I can display at once?
- 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?