How to use the d3-interpolate.interpolateNumber function in d3-interpolate

zoom(direction) {
		const { xAxisZoom, xScale, plotData, xAccessor } = this.context;
		const cx = xScale(xAccessor(last(plotData)));
		// mean(xScale.range());
		const { zoomMultiplier } = this.props;

		const c = direction > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;

		const [start, end] = xScale.domain();
		const [newStart, newEnd] = xScale.range()
			.map(x => cx + (x - cx) * c)
			.map(xScale.invert);

		const left = interpolateNumber(start, newStart);
		const right = interpolateNumber(end, newEnd);

		const foo = [0.25, 0.3, 0.5, 0.6, 0.75, 1].map(i => {
			return [left(i), right(i)];
		});

		this.interval = setInterval(() => {
			xAxisZoom(foo.shift());
			if (foo.length === 0) {
				clearInterval(this.interval);
				delete this.interval;
			}
		}, 10);
	}
	handleZoomOut() {

const donutCenterNumberTween = (d3Ref, newNumber: number) => {
	// Remove commas from the current value string, and convert to an int
	const currentValue = parseInt(d3Ref.text().replace(/[, ]+/g, ""), 10) || 0;
	const i = interpolateNumber(currentValue, newNumber);

	const formatInterpolatedValue = number => Math.floor(number).toLocaleString();

	return t => d3Ref.text(formatInterpolatedValue(i(t)));
};

onRemove({ removeNode, duration }) {
    const beg = this.node.getAttribute('transform');
    const interp0 = interpolateTransformSvg(beg, 'translate(0,500)');
    const interp1 = interpolateNumber(1, 1e-6);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;

      this.node.setAttribute('transform', interp0(t));
      this.node.setAttribute('opacity', interp1(t));

      if (t === 1) {
        this.transition.stop();
        removeNode();
      }
    });
  }

isEntering({xScale0, xScale1, tick: {data}, duration}, {tick}) {
    let beg = `translate(${xScale0(data)},0)`;
    let end = `translate(${xScale1(data)},0)`;

    let interp0 = interpolateTransformSvg(beg, end);
    let interp1 = interpolateNumber(1e-6, 1);

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      tick.setAttribute('transform', interp0(t));
      tick.setAttribute('opacity', interp1(t));

      if (t === 1) {
        this.transition.stop();
      }
    });
  }

isEntering({node: {path}, duration}, {node}) {

    node.setAttribute('opacity', 1e-6);
    node.setAttribute('d', path);
    node.style['cursor'] = 'pointer';
    node.style['pointer-events'] = 'all';

    let interp = interpolateNumber(1e-6, 0.8);

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      node.setAttribute('opacity', interp(t));
      if (t === 1) {
        this.transition.stop();
      }
    });
  }

isEntering({ yScale, node: { xVal, yVal }, duration }, { node, rect, text }) {
    rect.setAttribute('width', xVal);
    rect.setAttribute('height', yScale.bandwidth());
    text.setAttribute('x', xVal - 3);

    const interp0 = interpolateTransformSvg('translate(0,500)', `translate(0,${yVal})`);
    const interp1 = interpolateNumber(1e-6, 1);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;
      node.setAttribute('transform', interp0(t));
      node.setAttribute('opacity', interp1(t));
      if (t === 1) {
        this.transition.stop();
      }
    });
  }

public getViewOffset(position?: any) {
    const p = position || {};
    const space = this .space;
    const result: any = {};
    const widthHalf = space.innerWidth / 2;
    const heightHalf = space. innerHeight / 2;
    const vector = new THREE.Vector3();
    box3.setFromObject(this.showingObject3d);
    const ix = interpolateNumber(box3.min.x, box3.max.x);
    const iy = interpolateNumber(box3.min.y, box3.max.y);
    const iz = interpolateNumber(box3.min.z, box3.max.z);

    vector.set(
      ix(isNumber(p.x) ? p.x : 0.5),
      iy(isNumber(p.y) ? p.y : 0.5),
      iz(isNumber(p.z) ? p.z : 0.5),
    );
    vector.project(space.camera);
    result.x = vector.x * widthHalf + widthHalf + space.offset.left;
    result.y = -(vector.y * heightHalf) + heightHalf + space.offset.top;
    return result;
  }

isEntering({ xScale0, xScale1, tick: { data }, duration }, { tick }) {
    const beg = `translate(${xScale0(data)},0)`;
    const end = `translate(${xScale1(data)},0)`;

    const interp0 = interpolateTransformSvg(beg, end);
    const interp1 = interpolateNumber(1e-6, 1);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;
      tick.setAttribute('transform', interp0(t));
      tick.setAttribute('opacity', interp1(t));

      if (t === 1) {
        this.transition.stop();
      }
    });
  }

paint ({ ctx, width, height, now }) {
    const WIDTH_DIVIDER = 80
    const BEAT_MULTIPLIER = 80
    const ROTATION_CONSTANT = 2500
    const LIFESPAN_MULTIPLIER = 3
    const SIDES = 5
    const SHADOW_BLUR_MULTIPLIER = 3
    const GRAPH_SLICE = .02
    const EASING = 'easeOutQuart'

    const progress = Math.max(Math.min((now - this.birth) / (this.lifespan * LIFESPAN_MULTIPLIER), 1), 0)
    if (progress === 1) return this.self.blobs = this.self.blobs.filter(c => c !== this)

    const iRadius = interpolateNumber(0,this.width)
    const iLineWidth = interpolateBasis([0, this.width/WIDTH_DIVIDER, 0]) 
    const beat = interpolateBasis([1,BEAT_MULTIPLIER,1])(ease(this.self.sync.beat.progress, EASING))
    const radius = iRadius(progress)
    const amplitude = interpolateBasis([-radius/2, radius, -radius/2])(ease(this.self.sync.beat.progress, EASING))
    const rotation = now/ROTATION_CONSTANT
    
    ctx.save()
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'  
    ctx.beginPath()

    for (let theta = 0; theta <= TWO_PI + GRAPH_SLICE; theta+= GRAPH_SLICE) {
      const _x = (radius + (amplitude * Math.sin(SIDES * (theta - rotation)))) * Math.cos(theta) + width/2
      const _y = (radius + (amplitude * Math.sin(SIDES * (theta + rotation)))) * Math.sin(theta) + height/2
      if (theta === 0) {