d3 color scale - linear with multiple colors?

Question

I'm trying to create something a little like a quantize scale, but act like a linear color scale?

When I try to put multiple colors into a linear scale, it seems to only scale between the first two colors.

I'd like multiple colors like a quantize scale, but fade between those colors. I'm unsure if this is possible.

//red and green works ok var color = d3.scale.linear()             .range(['red','green']);  //doesn't work - only red and green show var color = d3.scale.linear()             .range(['red','green', 'blue']);   //red green and blue show, however it doesn't fade between the colors var color = d3.scale.quantize()             .range(['red','green', 'blue']); 

Answer 1

You have to use domain 'pivot' value like:

d3.scale.linear()     .domain([0, pivot, max])     .range(['red', 'green', 'blue']); 

From the documentation for continuous scale domains:

Although continuous scales typically have two values each in their domain and range, specifying more than two values produces a piecewise scale. For example, to create a diverging color scale that interpolates between white and red for negative values, and white and green for positive values, say:

var color = d3.scaleLinear()     .domain([-1, 0, 1])     .range(["red", "white", "green"]);  color(-0.5); // "rgb(255, 128, 128)" color(+0.5); // "rgb(128, 192, 128)"