javascript - d3 mapping 4 colors to 4 numeric ranges to look a bit like a very basic heatmap

Question

I am trying to get this to work as such:

• 0 = gray
• 1-33.33 = green
• 33.34-66.66 = yellow
• 66.67-100 = red

It is currently not working but I do have a code example here: http://jsfiddle.net/JLSt4/1/

This is the specific block of code:

    var colors = ["#CCCCCC","#55AF29","#FFD017","#B72E00"];

        var heatmapColor = d3.scale.linear()
            .domain(d3.range(0, 1, 1.0 / (colors.length - 1)))
          .range(colors);

        var getData = d3.extent(jsondata.kpi, function (d) { return +d.status });
        var c = d3.scale.linear().domain(getData).range([0, 1]); 

and the display:

    .style("fill", function(d) { return heatmapColor(c(d))});

I've been working with the answer to this question but it isn't quite what I'm looking for since this maps dynamic values to a color set: D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain

Any help is appreciated!!

Answer 1

It sounds like what you want is a quantize scale or a threshold scale -- a scale that takes a continuous input value and splits it into bins for conversion to a discrete set of output values.

For quantize scales, you specify the domain as normal ([min,max]), and the size of the bins is determined by the number of values in the range, such that each bin is the same size.

For threshold scales, you specify the domain as the set of threshold values above which the next value from the range should be used; there should be one fewer threshold values then there are range values.

The version that @FernOfTheAndes got working for you is a polylinear scale: a linear scale with different domain/range blocks. Values in between two points of the domain are converted to a value that is the same distance in between the corresponding two points of the range.

So for a polylinear scale with domain [0,33,66,100] and range [gray,green,yellow,red] a value of 0 gets mapped to gray, a value of 33 gets mapped to green, but a value of 15 gets mapped to a gray-green colour halfway in between.

In contrast, for a threshold scale with domain [1,33,66] and range[gray,green,yellow,red], any value greater or equal to 1 but less than 33 will get mapped to pure green.

Alternately, you could use a quantize scale with domain [0,100], range [green,yellow,red], and use a separate test to assign the colour gray when the value is 0.