d3 / d3-interpolate

Interpolate numbers, colors, strings, arrays, objects, whatever!
https://d3js.org/d3-interpolate
ISC License
494 stars 69 forks source link

interpolateMonotone #52

Open danburzo opened 6 years ago

danburzo commented 6 years ago

I've experimented with monotone cubic interpolation (as per the Steffen method you reference in d3-shape) and with the array values being evenly spaced, the formula is quite simplified, as long as I read the paper correctly:

const monotone = (t1, h, v0, v1, v2, v3) => {

    let h2 = h * h;
    let t2 = t1 * t1;
    let t3 = t2 * t1;

    let s20 = (v2 - v0) / (2 * h);
    let s31 = (v3 - v1) / (2 * h);
    let s21 = (v2 - v1) / h;

    return (
        (s20 + s31 - 2 * s21) / h2 * t3 +
        (3 * s21 - 2 * s20 - s31) / h * t2 + 
        s20 * t +
        v1
    );
}

where h = 1 / n, t1 = t - i / n and i, n, and v0...v3 being computed the same as with the basis spline.

I tried it for the purpose of color interpolation, although it turned out to be of questionable usefulness, at least in RGB:

screen shot 2018-04-10 at 13 11 08

Nevertheless, if you think it would be a good addition to d3-interpolate, I'm happy to make a PR. (Could be useful for animations, since it smoothly interpolates the data points?)

RenaudF commented 6 years ago

I was looking for that too, would be a great addition, along with the other interpolation functions in https://bl.ocks.org/emmasaunders/f7178ed715a601c5b2c458a2c7093f78 that seem to be readily available for svg lines in d3.

einarpersson commented 2 years ago

I came looking here for a monotone interpolation implementation as well. :/ Since there existed a monotone curve option in d3-shape I expected it to be available in d3-interpolate.