How to handle scaleSequential sales with interpolators?

[mhkeller]

By default, LayerCake sets a range for each of the scales. This means that you shouldn't set ranges using the d3 shorthand xScale={scaleBand([0, 100])} but instead set these two props separately

xScale={scaleBand()}
xRange={[0, 100]}

This works fine except for color scales that need to be set via an interpolator method like this as described by d3-scale-chromatic:

const piyg = d3.scaleSequential().interpolator(d3.interpolatePiYG);
// or...
const piyg = d3.scaleSequential(d3.interpolatePiYG);

This could be solved by adding xInterpolator, yInterpolator, zInterpolator and rInterpolator props. Maybe that's too many props?

[mhkeller]

Maybe the easiest thing to do is to detect whether the passed in range is a function and if so, don't set .range on the scale and instead set .interpolator. This is complicated by the fact that range can already be a function that passed in width and height...

[mhkeller]

The syntax for this would be

<LayerCake
  zRange={() => interpolateRdGy}

and internally in createScale.js

if (typeof defaultRange === 'function') {
  scale.interpolator(defaultRange)
} else {
  scale.range(defaultRange);
}

I don't like that you would have to know to set zRange to a function in order to use an interpolator. I think I would rather get rid of the functionality that allows for range props to be functions since there isn't a great use case for that – just seemed like a possible option for down the road...

[mhkeller]

This could be a better way to do it. Set an interpolator on the scale itself

<LayerCake
  zScale={scaleSequential(interpolateRdGy)}
...or
  zScale={scaleSequential().interpolator(interpolateRdGy)}

And then in layercake, only override the range if there is no scale interpolator function, or if there is one, that is the default identity function. This would allow the user to pass in a custom zRange using a scaleSequential or scaleDiverging

if (!scale.interpolator || (typeof scale.interpolator === 'function' && scale.interpolator().name.startsWith('identity'))) {
  scale.range(defaultRange);
}

Need to add documentation explaining that _Range props are ignored if the scale has an interpolator function set.

Open to any thoughts!

[mhkeller]

This is added in v7.0