How to use d3-interpolate-path - 9 common examples

const tweenD = function (d, setupTooltip = false) {
        const maxX = max(d.values, dd => dd.x);
        const minX = min(d.values, dd => dd.x);
        return interpolatePath(
          this.getAttribute('d'),
          getPath.call(this, d, $$.x, $$.y, setupTooltip),
          function (a) { return a.x == maxX || a.x == minX; }
        );
      };

path.attrTween('d', function dTween() {
        const previous = select(this).attr('d');
        const current = line(lineData);
        return interpolatePath(previous, current);
      });
    } else {

const tweenD = function (d, setupTooltip = false) {
        const maxX = max(d.values, dd => dd.x);
        const minX = min(d.values, dd => dd.x);
        return interpolatePath(
          this.getAttribute('d'),
          getPath.call(this, d, $$.x, $$.y, setupTooltip),
          function (a) { return a.x == maxX || a.x == minX; }
        );
      };

function createInterpolator(props) {
    return d3.interpolatePath(props.d1, props.d2);
}

import { Dimensions } from "react-native";
import { Svg } from "expo";
import Animated from "react-native-reanimated";

import { interpolatePath } from "d3-interpolate-path";

const { Path } = Svg;
const { Value } = Animated;
const { call } = Animated;

const aspectRatio = 84 / 365;
const width = Dimensions.get("window").width / 5 - 32;
const height = width * aspectRatio;
const terrible = "M3,83.75 C62.8333333,29.25 122.666667,2 182.5,2 C242.333333,2 302.166667,29.25 362,83.75";
const great = "M3 3.75C62.833 55.917 122.667 82 182.5 82S302.167 55.917 362 3.75";
const interpolator = interpolatePath(terrible, great);

interface MouthProps {
  happiness: typeof Value
}

export default class Mouth extends React.PureComponent {
  path = React.createRef

.attrTween('d', function (d) {
                        var previous = d3.select(this).attr('d');
                        var current = aggLine(d);
                        return interpolatePath(previous, current);
                    });

generatePath(),
  generatePath(),
  generatePath(),
  generatePath(),
  generatePath(),
];

type ProgressProps = {};
type ProgressState = {
  d: string,
};

export default class Progress extends React.Component {
  interval;

  interpolator = interpolatePath(paths[0], paths[1]);

  lastIndex = 1;

  progress = 0;

  state = {
    d: paths[0],
  };

  componentDidMount() {
    this.interval = setInterval(this.animate, 100);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

const previousAreaGraph = area(previousScaledData);
    const previousLineGraph = line(previousScaledData);
    const areaGraph = area(scaledData);
    const lineGraph = line(scaledData);

    graph.selectAll("path").remove();

    graph
      .append("path")
      .attr("class", "area")
      .attr("d", previousAreaGraph)
      .style("fill", previousColor.fill)
      .transition()
      .duration(transitionDuration)
      .ease(TRANSITION.ease)
      .attrTween("d", interpolatePath.bind(null, previousAreaGraph, areaGraph))
      .style("fill", color.fill);

    graph
      .append("path")
      .attr("class", "line")
      .attr("d", previousLineGraph)
      .style("stroke", previousColor.stroke)
      .transition()
      .duration(transitionDuration)
      .ease(TRANSITION.ease)
      .attrTween("d", interpolatePath.bind(null, previousLineGraph, lineGraph))
      .style("stroke", color.stroke);
  }

.style("fill", previousColor.fill)
      .transition()
      .duration(transitionDuration)
      .ease(TRANSITION.ease)
      .attrTween("d", interpolatePath.bind(null, previousAreaGraph, areaGraph))
      .style("fill", color.fill);

    graph
      .append("path")
      .attr("class", "line")
      .attr("d", previousLineGraph)
      .style("stroke", previousColor.stroke)
      .transition()
      .duration(transitionDuration)
      .ease(TRANSITION.ease)
      .attrTween("d", interpolatePath.bind(null, previousLineGraph, lineGraph))
      .style("stroke", color.stroke);
  }