为热图创建颜色的算法是什么?

B S*_*ven 31 charts visualization graph colors heatmap

假设值从0到1归一化,获得颜色以创建这样的热图的算法是什么?

1为红色,.5为绿色,0为深蓝色.

在RMagick/ImageMagick工作.

热图

Mek*_*iki 32

这是一个JavaScript代码段,用于从[0,1]值生成CSS hsl颜色代码

function heatMapColorforValue(value){
  var h = (1.0 - value) * 240
  return "hsl(" + h + ", 100%, 50%)";
}
Run Code Online (Sandbox Code Playgroud)

该算法基于5色热图,

在该算法中,与值对应的颜色是

0    : blue   (hsl(240, 100%, 50%))
0.25 : cyan   (hsl(180, 100%, 50%))
0.5  : green  (hsl(120, 100%, 50%))
0.75 : yellow (hsl(60, 100%, 50%))
1    : red    (hsl(0, 100%, 50%))
Run Code Online (Sandbox Code Playgroud)

很简单!


B S*_*ven 14

我发现这对HSL来说非常容易.

在Ruby中:

def heatmap_color_for value # [0,1]
  h = (1 - value) * 100
  s = 100
  l = value * 50
  "hsl(#{h.round(2)}%,#{s.round(2)}%,#{l.round(2)}%)"
end
Run Code Online (Sandbox Code Playgroud)

此方法将HSL值作为字符串返回0%到100%之间.它可以与RMagick或ImageMagick一起使用.

参考:ImageMagick HSL文档.


Sup*_*gly 11

RGB组件的线性插值在实践中非常有效,并且Bruno链接提到在HSL中进行插值可以提供帮助.

您还可以使用更精选的中间体来散布您的三种基本颜色.查看http://colorbrewer2.org/以获得一些好的颜色进展.然后进一步分解你的步骤:

0    red
0.25 yellow
0.5  green
0.75 cyan
1    blue
Run Code Online (Sandbox Code Playgroud)

  • 这个colorbrewer太棒了! (2认同)