d3 / d3-interpolate

Interpolate numbers, colors, strings, arrays, objects, whatever!

Home Page:https://d3js.org/d3-interpolate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Non-uniform d3.interpolateRgbBasis

martinRenou opened this issue · comments

I would be interested in passing non-uniformly spaced colors as input for the d3.interpolateRgbBasis. Is it on the roadmap for this package? Maybe I am missing something and it is already possible?

I would like to do something like:

d3.interpolateRgbBasis(["#000000", "#e60000", "#e6e600"], [0., 0.2, 1.])

Instead of the implicit default:

d3.interpolateRgbBasis(["#000000", "#e60000", "#e6e600"], [0., 0.5, 1.])

I would be happy to open a PR myself, given some directions, if that is something someone is interested in :)

Another way of framing the question would be to this interpolator with another that "warps" the domain: https://observablehq.com/d/f10b45253c5d3f62

Capture d’écran 2020-07-01 à 12 09 18
Capture d’écran 2020-07-01 à 12 09 04

with

function composition(f, g) { return t => f(g(t)); }

Unless there's something I don't see, for the piecewise approach, finding the solution involves some sort of newton-raphson solver, as in https://observablehq.com/d/5d4f950dd5554b67 ; and the piecewise approach is not necessarily the best if we want a derivable solution.

So I'd rather "solve" this issue by publishing documentation on how to compose interpolators. But please feel free to send a PR if you have a better solution!