How can I use d3-scale-chromatic functions with a domain other than [0, 1]?

Question

Here's my code:

var color = d3.scaleLinear()
    .domain([0, 10000])
    .interpolate(d3.interpolateBlues);
console.log(color(5000));

Instead of telling me that 5000 corresponds to a light blue, I get the error "r0 is not a function". What am I doing wrong?

Answer 1

Okay, figured it out. If using a function such as d3.interpolateBlues which defines the range itself, d3.scaleSequential must be used instead of d3.scaleLinear. The correct code is:

var color = d3.scaleSequential(d3.interpolateBlues)
    .domain([0, 10000])
console.log(color(5000));

See https://github.com/d3/d3-scale#sequential-scales