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

时间:2016-02-09 12:35:01

标签: javascript d3.js

绝对疯狂地试图解决这个问题,应该在学校里更加努力学习!

我想要实现一些我认为很容易做到的事情,但很难理解它的术语。

我想根据2种设置中的1种选择来创建热图。

首先,如果我有5个国家,例如:

  1. 英国 - 10000
  2. 美国 - 5000
  3. 巴西 - 4000
  4. 德国 - 1000
  5. 中国 - 500
  6. 我正在根据排名尝试着色。例如,如果我有红色,黄色,绿色,蓝色和紫色,那么以下情况就是如此:

    UK = Red,USA = Yellow,Brazil = Green,Germany = Blue,China = Purple。

    其次,我想在值上着色它们,所以在这种情况下应用以下内容:

    UK = Red,USA = Green,Brazil = Greeny Blue,Germany = Bluey Purple,China = Purple。

    但是我绝对不知道这是一个线性的,有序的,分位数的还是你有什么!

    我已阅读说明,看起来Domain是输入,Range是输出。

    我有以下代码:

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

    在那个例子中,对于'排名',我希望每个heatMapColour返回红色,黄色,绿色,蓝色和紫色,但我得到5种颜色,从红色(第一个位置)到黄色(最后一个位置)。 / p>

    任何指针?

    修改

    作为一个例子,这“几乎可以正常运作”。

    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个项目,我会得到红色,绿色,紫色,然后什么也没有。没有意义!

2 个答案:

答案 0 :(得分: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);

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

答案 1 :(得分:1)

仍然不确定我理解,但听起来你想要一个分位数比例:

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"