D3量化颜色比例没有显示正确的颜色分布

我想弄清楚如何获得正确的调色板给定的数据集的可能性范围广泛的值。（想想github的贡献热图）D3量化颜色比例没有显示正确的颜色分布

请注意，这些值是动态的，所以我不确定我可以使用d3.scale.threshold。

量化数据集：

var arr = [26,12,7,6,5,5,5,4,4,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0];

我用下面的色阶，但是，出了41元的，应该是彩色的，只有前四有色差，所有事情都设置为#eeeeee （灰色）。

var color_scale = d3.scale.quantize() 
     .domain([0, d3.max(arr)]) 
     .range(["#eeeeee","#edf8e9","#bae4b3","#74c476","#238b45"]);

量化输出：

color_scale(26): #238b45 
color_scale(12): #bae4b3 
color_scale(7) : #edf8e9 
color_scale(6) : #edf8e9 
color_scale(5) : #eeeeee 
color_scale(4) : #eeeeee 
color_scale(2) : #eeeeee 
color_scale(1) : #eeeeee 
color_scale(0) : #eeeeee

更新：

看来，使用位数预期为下面的一组，不工作：

位数的数据集：

var arr = [26,12,7,6,5,5,5,4,4,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

使用下面的色标：

var color_scale = d3.scale.quantile() 
    .domain(arr) 
    .range(["#eeeeee","#edf8e9","#bae4b3","#74c476","#238b45"]);

位数输出：

color_scale(26): #238b45 
color_scale(12): #238b45 
color_scale(7) : #238b45 
color_scale(6) : #238b45 
color_scale(5) : #238b45 
color_scale(4) : #238b45 
color_scale(2) : #238b45 
color_scale(1) : #74c476 
color_scale(0) : #edf8e9

我期望所有的值> 0具有颜色，全0是#eeeeee。

任何想法我做错了什么？

来源

2016-03-03 Sijia Din

量化范围将域分成相同大小的块，块的数量取决于范围。在你的情况下，你有5个值，所以这个域被分成大小为26/5 = 5.2的块。第一个块（灰色）包含5以内的所有内容，这是您在输出中看到的内容。

这听起来像一个分位数比例表会更适合您要做的事情，请参阅this question。

来源

2016-03-03 04:54:16

这是一个很好的观点。不过，我不确定分位数是否也会给出正确的输出（请参阅我更新的问题）。看起来分位数不会考虑这些值，而只考虑数据集的大小来创建桶的数量并均匀分配它们。 –

那么你究竟想要什么？ –

我希望所有值> 0都有一个颜色，全0都是#eeeeee。如果你看到[Github的]（https://github.com/Ocramius）贡献热图，只要它有一个数字（不管值有多大），它们都会有一个颜色。 –

D3量化颜色比例没有显示正确的颜色分布

回答

相关问题