CODEWITHSUNDEEP
svgd3.js
Sergei Rodionov
Sergei Rodionov

Reputation: 4529

Built-in category colors alternative

I have a time chart which can potentially have many series, 20+ is not unusual. d3 comes with category10 color palette that is built-in and makes sense because the colors are different enough so you distinguish one series from another.

https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors

While the category10 palette is fine is there perhaps a more established (for the lack of a better word) array of colors that computer users have found as visually appealing and different enough?

My use case is displaying many series as colored lines on a time chart.

UPDATE 1:

An example of 10+ colors after the first iteration. Note that red and yellow colors are absent since they're often used for thresholds.

steelblue, orange, #339900, fuchsia, firebrick, deepskyblue, 
darkviolet, darkgray, #C0D800, #ff5800 , violet, #00d27f, #0057e7

Screenshot: imgur

Upvotes: 0

Views: 77

Answers (1)

Mark
Mark

Reputation: 108537

d3 has support for up to 20. Once you get past that, picking visual appealing distinctive colors is virtually impossible. The gold standard ColorBrewer only goes up to 12. I once had a project which needed 48 for a line series graph. After exhaustive research, I came up with:

[
 "#00A8F0","#C0D800","#CB4B4B","#4DA74D","#9440ED",
 "#4bb2c5","#eaa228","#c5b47f","#579575","#839557",
 "#958c12","#953579","#4b5de4","#d8b83f","#ff5800",
 "#0085cc","#c747a3","#cddf54","#fbd178","#26b4e3",
 "#bd70c7","#808000","#ffa500","#f280e0","#000080",
 "#ff00ff","#800080","#800000","#6ebf00","#edc240", 
 "#afd8f8","#cb4b4b","#4da74d","#9440ed","#3D96AE",
 "#4572A7","#AA4643","#89A54E","#80699B","#DB843D",
 "#DB843D","#92A8CD","#A47D7C","#B5CA92","#202020",
 "#a21764","#8ab438","#3a5b87" 
]

The non-devs on my team were never happy with it as some of the colors were just too close to each other. I told them to go ahead and do better; they were never able to...

From the master of data visualization Edward Tufte:

The often scant benefits derived from coloring data indicate that even putting a good color in a good place is a complex matter. Indeed, so difficult and subtle that avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm.

Upvotes: 2

Related Questions