内置类别颜色替代

  • 本文关键字:颜色 内置 svg d3.js
  • 更新时间 :
  • 英文 :


我有一个可能具有许多系列的时间表,20 并不罕见。D3带有内置的类别10调色板,并且是有道理的,因为颜色足够不同,因此您将一个系列与另一个系列区分开。

https://github.com/mbostock/d3/wiki/ordinal-scales#categorical-colors

虽然category10调色板很好,还有一个更既定的(缺少更好的词)颜色,计算机用户发现视觉上吸引人且足够不同?

我的用例在时间表上显示了许多系列作为彩色线。

更新1:

第一次迭代后10多种颜色的示例。请注意,由于经常用于阈值,因此缺少红色和黄色。

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

屏幕截图:imgur

d3最多支持20。金标准配色器只能达到12。我曾经有一个项目需要48个线系列图。经过详尽的研究,我想到了:

[
 "#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" 
]

我团队中的非Devs从来都不满意,因为某些颜色彼此之间太近。我告诉他们继续做得更好。他们永远无法...

来自数据可视化大师爱德华·塔夫特(Edward Tufte):

着色数据所获得的通常很少的好处表明 将良好的颜色放在一个好的地方是一个复杂的问题。的确如此 避免灾难的困难和微妙 将颜色带入信息的原则:最重要的是,没有伤害。

最新更新