D3 quantize color scale not showing the right color distribution

Question

I'm trying to figure out how to get the right color palette given a dataset with the possibility of a wide range of values. (think github's contribution heat map)

Note that the values are dynamic so I'm not sure I can use d3.scale.threshold .

Quantize dataset:

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

I'm using the following color scale, however, out of the 41 elements that should be colored, only the first four have a color, everything else is set as #eeeeee (grey).

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

Quantize Output:

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:

It appears that using quantile, does not work as expected for the following set:

Quantile dataset:

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

Using the following color scale:

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

Quantile Output:

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

I expect all values > 0 have a color, all 0s be #eeeeee.

Any ideas what am I doing wrong?

Answer 1

The quantize scale divides the domain into equal-sized chunks whose number depends on the range. In your case, you have 5 values, so the domain is divided into chunks of size 26/5 = 5.2. The first chunk (grey) includes everything up to and including 5, which is what you see in the output.

It sounds like a quantile scale would be more suitable for what you're trying to do, see this question .