: Colors for a diagram with unknown number of categories I have to draw a diagram for dynamic data. Each category should have a different color, but I don't know how many categories the diagram
I have to draw a diagram for dynamic data. Each category should have a different color, but I don't know how many categories the diagram is going to show.
I expect this number typically to be between 5 and 10, but more or less is possible. Is there a strategy for choosing the diagram colors in this case, so that
they are distinguishable,
they do not hurt the eye,
they do not create affiliations where there are none?
I thought of the following:
Choose one color and use tints/shades
PRO: fits in well with the rest of the website
CON: hard to distinguish
Choose a few colors and use tints/shades
PRO: fits in well with the rest of the website, probably enough colors to be distinguishable for the expected amount of categories
CON: the different colors impose an unwanted meaning, e.g. greenish categories somehow belong together and are different from blueish categories
Choose a few colors and use additional patterns
PRO: like the above
CON: like the above, with meaning not only in colors but also in patterns
Choose a few colors and repeat
PRO: fits in well with the rest of the website
CON: one color stands for multiple categories
Try to find different colors for all categories (speaking of hues)
PRO: distinguishable for the expected amount of categories
CON: off-putting, not easy to calculate
There must be an approach to this problem? I've been searching and thinking for days, but couldn't find a satisfying solution.
You can think of the diagram as a (stacked) bar chart. Other types are possible, although I think this would not essentially change the question (or answers). Of course, the diagram will also be equipped with a legend and tooltips.
More posts by @Gail6891361
1 Comments
Sorted by latest first Latest Oldest Best
I did a very similar thing in a project of mine. In it, I used this color library to generate some colors for me. If you view the demo, you'll see the colors being used. It essentially does your second method, "Choose a few colors and use tints/shades".
To reduce the number of similar colors that are hard to distinguish, you can use an algorithm to see how close together they are and generate a new color for ones below a certain threshold (make sure that the threshold is actually achievable given the number of colors you need). You can find a very simple one (checking a linear difference, which isn't how we perceive color change1,2, but is really easy to implement) in my color picker project.
You can also generate sub-sets of colors for related categories. Since you provide no information about said categories, it's hard to give advice as to how to do so.
But from a design perspective, I may not do it this way. It depends on the types of data that you have. If you have a set number of category always, I'd likely choose some set color palette and link each color to a category one-to-one. More details could be helpful in determining whether or not this is preferable.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.