3 种颜色维度与谷歌可视化地理图表色标

3 color dimensions with Google Visualization Geochart Color Scale

本文关键字：可视化 谷歌 颜色      更新时间：2023-09-26

我的数据有三个不同的'向量'。对于数据中的每一行，我都有喜欢狗的百分比，喜欢猫的百分比，以及像其他宠物的百分比。

A  20, 40, 40
B  10, 20, 70
C  80,  0, 20
D  90, 10,  0
...

我想使用谷歌可视化地理图表根据他们喜欢的宠物的颜色来表示国家。我想通过分配一个 RGB 值来做到这一点，具体取决于该国喜欢某种类型的宠物的人的百分比。

所以 100， 0， 0 将是 100% 红色。0， 100， 0 是 100% 绿色。0

， 0， 100 是 100% 蓝色。以及介于两者之间的一切。

如果手动编码颜色，使用这样的javascript很容易。我遇到的问题是每一行都会有不同的组合(我有非常好的宠物偏好数据，精确到小数点后几位(，这需要我为每一行分配一个颜色值，我有大约 200 个。

虽然这是最后的手段，但我宁愿使用Geochart内置的渐变来为我完成繁重的工作。

问题是颜色渐变只允许 2D 渐变。我可以有多个渐变，但我无法确定仅使用 2D 渐变是否可以表示 3D 色彩空间。

所以我可以为以下对象创建一个渐变：

  • 红色到绿色
  • 绿色到蓝色
  • 蓝色到绿色

这会涵盖颜色可能性的范围，还是只是让我控制色调，而不是饱和度或亮度？这是可行的，还是我最好采用解决方法？

我最终手动完成，因为它要容易得多。我最终为我的数据提供了 4 个向量，所以我使用 CMYK 颜色模型对它们进行了着色。对于每个向量，我计算了颜色的 C、M、Y 或 K 分量的一部分。

然后，我使用以下逻辑(伪代码(将其转换为 RGB：

C' = C * (100% - K) + K
M' = M * (100% - K) + K
Y' = Y * (100% - K) + K
R = 255 - 255 * C'
G = 255 - 255 * M'
B = 255 - 255 * Y'

我将它们转换为HTML颜色代码并将它们扔在一个数组中。然后，我为数组中与其着色的元素相对应的每一行分配一个值，并将其扔在选项的colorAxis.colors部分。

结果令人难以置信地丑陋，作为传达信息的方式完全不切实际。不仅颜色很丑陋(青色、洋红色和黄色不是一个很好的颜色组合(，而且除非你是真正的色彩专家(我的观众不是(，否则你真的无法说出混合到底是什么。

回到绘图板是！

相关文章：