1

我有一个用 d3 构建的标准 50 状态地图，其中我根据各种数据集动态着色状态。无论数据集是什么，这些值都在 0 到 1 的范围内进行归一化，其中 1 对应于具有最高值的状态。我正在寻找一种使用标准化数据点的值来计算状态阴影的方法。

过去，我选择了一种我喜欢的基色——比如#900——并将fill每个状态的 设置为该颜色，并将opacity设置为标准化值。除了两个问题之外，这可以正常工作：

  • 当画布有背景颜色时，需要在每个阴影状态下绘制一个空白状态；和
  • 以这种方式淡出颜色可能看起来很糊

但我真的很喜欢能够动态设置颜色，而不是处理数据的 bin 和渐变的 RGB 值的预设数组。所以我想知道是否有更好的方法。如果备用颜色系统效果更好，我可以处理转换。

d3 有一个内置的 HSL 转换器，所以我尝试了这个：

// 0 <= val <= 1 
function colorize(val) {
    // nudge in the extremes
    val = 0.2 + 0.6 * val;
    return d3.hsl(0, val, 1 - val);
}

它工作得很好——这是一张捕鱼工作地图，在缅因州和俄勒冈州最普遍——但我怀疑有更好的方法。想法？

在此处输入图像描述

4

1 回答 1

1

我喜欢你实际所做的，但如果你想做一些不同的事情，你总是可以做一个 D3 规模。例如：

 var scale =  d3.scale.linear().domain([rangeMin, rangeMid,
 rangeMax]).range(["#Color1","#Color2","#Color3"]);

然后设置每个状态

return scale(dataValue);

您可以将 rangeMin 和 rangeMax 变量设置为数据的最小值和最大值。我添加的中位数 rangeMid 是可选的。如果您想要颜色多样化，我建议您使用它。我已经使用这个比例特征制作了一个非常漂亮的词频热图。我希望我能以某种方式提供帮助！

注意：我将它与 css 十六进制值一起使用，但我相信 RGB 和 HSL 也可以工作。

于 2013-05-06T19:27:05.333 回答