D3 квантовать цветовую шкалу, не отображающую правильное распределение цветов

Question

Я пытаюсь выяснить, как получить нужную цветовую палитру с учетом набора данных с возможностью широкого диапазона значений. (подумайте, что карта тепла вклада github)

Обратите внимание, что значения являются динамическими, поэтому я не уверен, что могу использовать 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 

---

Update:

Оказывается, что с помощью квантиль, не работает, как ожидается, для следующего набора:

Quantile набора данных :

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"]); 

Quantile Выход:

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 имеют цвет, все 0s быть #eeeeee.

Любые идеи, что я делаю неправильно?

Answer 1

Шкала квантования делит домен на куски равного размера, число которых зависит от диапазона. В вашем случае у вас есть 5 значений, поэтому домен делится на куски размером 26/5 = 5.2. Первый кусок (серый) включает все до 5 включительно, что вы видите на выходе.

Звучит как квантильная шкала, более подходящая для того, что вы пытаетесь сделать, см. this question.