为d3创建两种不同类型的热图

Question

绝对疯狂尝试解决这个问题，应该在学校努力学习！

我想实现我认为很容易实现的目标，但是很难理解所有术语。

我想基于2个设置中的1个创建热图。

首先，如果我有5个国家/地区，例如：

1. 英国-10000
2. 美国-5000
3. 巴西-4000
4. 德国-1000
5. 中国-500

我正在尝试根据排名为颜色上色。 因此，例如，如果我有红色，黄色，绿色，蓝色和紫色，则以下内容为真：

英国=红色，美国=黄色，巴西=绿色，德国=蓝色，中国=紫色。

其次，我想按值对它们进行着色，因此在这种情况下，适用以下条件：

英国=红色，美国=绿色，巴西=绿色蓝色，德国=蓝色紫色，中国=紫色。

但是，我绝对不知道这是线性的，有序的，分位数的还是您所拥有的！

我已经阅读了说明，看起来域是输入，范围是输出。

我有以下代码：

 var colours = ['#FF0000', '#FFFF00', '#00FF00', '#0000FF', '#FF00FF'];
 var heatmapColour = d3.scale.linear().domain([0, sortedArray.length]).range(colours);

在该示例中，对于“排名”，我希望每个heatMapColour都返回红色，黄色，绿色，蓝色和紫色，但是我得到5种颜色，从红色（第一个位置）到黄色（最后一个位置）。

有指针吗？

编辑

例如，此“几乎可以正常工作”。

var colours = ['#FF0000', '#FFFF00', '#00FF00', '#0000FF', '#FF00FF'];
var heatmapColour = d3.scale.quantize().domain([0, sortedArray.length-1]).range(colours);

如果我的数组有5个项目，则它为每个项目产生一种颜色，但是如果我的数组中有10个项目，则我有2个红色，2个黄色，2个绿色等，而不是红色，红色->橙色，橙色->黄色等

同样，如果阵列中有3个项目，则得到红色，绿色，紫色，然后什么也没有。 这个不成立！

Answer 1

为此，我喜欢使用RainbowVis.js [ https://github.com/anomal/RainbowVis-JS]将数字值映射为颜色：

像这样的东西：

var rainbow = new Rainbow();
rainbow.setSpectrum('green', 'red');
rainbow.setNumberRange(minValue, maxCalue);
return rainbow.colourAt(CountryValue);

您可以为渐变添加更多颜色

Answer 2

仍然不确定我是否理解，但听起来您想要分位数刻度：

var x = d3.scale.quantile()
  .domain([0,500,1000,4000,5000,10000])
  .range(["#FF00FF", "#0000FF", "#00FF00", "#FFFF00", "#FF0000"]);

> x(400)
"#FF00FF"
> x(600)
"#0000FF"
> x(10001)
"#FF0000"