d3-array equivalent for this notebook?

I’ve written a small helper function that allows me to chain multiple easings of varying length while still driving them with a single time offset.

Because there’s (almost) nothing that D3 can’t do I was wondering what the equivalent method/s and/or workflow in d3/d3-array would have been. At a quick glance I couldn’t find a proper match.

Function and example:



I’ve sent you a suggestion at suggestions:@mootari/stitched-easings / Fil / Observable ; not sure it’s what you were looking for though :slight_smile:


Thanks, and sorry for being too vague! I’m essentially trying to find out how much of my custom code in weightedOffset() can be replaced with D3 functions (mostly for educational purposes).

What I’ve ended up with so far is a combination of cumsum and bisectLeft (D3 version of the notebook):

function cumOffset(t, values) {
  const v = d3.cumsum(values),
        o = t * v[v.length-1],
        i = d3.bisectLeft(v, o);
  return i + 1 - (v[i] - o) / values[i];

I’ll probably not be able to create one of those cool D3 oneliners, but I’m wondering if there is still a more elegant solution?

1 Like

I’ve updated the function to return a single float. This value can then split into the index (via Math.floor(v)) and the relative offset (via v % 1). I imagine this change might make it a bit easier to reason about equivalent implementations.