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

exitTransition = exitTransition.styleTween('fill', function(d, i, group) {
    console.log(this.r.baseVal.value); // this type is SVGCircleElement
    const c: string = select(this).style('fill');
    return interpolateRgb(c, d.color); // datum type is CircleDatum
});

console.log('Recommended transition duration = %d', iZoom.duration);

// test quantize(interpolator, n) signature ------------------------------------------------

arrNum = d3Interpolate.quantize(d3Interpolate.interpolateRound(-1, 2), 4); // infered template parameter type
arrStr = d3Interpolate.quantize(d3Interpolate.interpolateString('-1', '2'), 4); // explicit template parameter typing

// arrStr = d3Interpolate.quantize(d3Interpolate.interpolateRound(-1, 2), 4); // test fails, due to explicit typing v argument type mismatch

// test interpolateRgb(a, b) signatures ----------------------------------------------------------------

// without gamma correction
iString = d3Interpolate.interpolateRgb('seagreen', 'steelblue');
iString = d3Interpolate.interpolateRgb(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateRgb(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
str = iString(0.5);

// with gamma correction
iString = d3Interpolate.interpolateRgb.gamma(2.2)('purple', 'orange');

// test interpolateRgbBasis(color) and  interpolateRgbBasisClosed(color) signatures -------------------------

iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Color.rgb('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasisClosed(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);

// test interpolateHsl(a, b) and interpolateHslLong(a, b)----------------------------------------------------------------

iString = d3Interpolate.interpolateHsl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

zoom = iZoom(0.5);

console.log('Recommended transition duration = %d', iZoom.duration);

// test quantize(interpolator, n) signature ------------------------------------------------

arrNum = d3Interpolate.quantize(d3Interpolate.interpolateRound(-1, 2), 4); // infered template parameter type
arrStr = d3Interpolate.quantize(d3Interpolate.interpolateString('-1', '2'), 4); // explicit template parameter typing

// arrStr = d3Interpolate.quantize(d3Interpolate.interpolateRound(-1, 2), 4); // test fails, due to explicit typing v argument type mismatch

// test interpolateRgb(a, b) signatures ----------------------------------------------------------------

// without gamma correction
iString = d3Interpolate.interpolateRgb('seagreen', 'steelblue');
iString = d3Interpolate.interpolateRgb(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateRgb(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
str = iString(0.5);

// with gamma correction
iString = d3Interpolate.interpolateRgb.gamma(2.2)('purple', 'orange');

// test interpolateRgbBasis(color) and  interpolateRgbBasisClosed(color) signatures -------------------------

iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Color.rgb('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasisClosed(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);

// test interpolateHsl(a, b) and interpolateHslLong(a, b)----------------------------------------------------------------

iString = d3Interpolate.interpolateHsl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));

function bgColor() {
            var step;
            if (_numChanges === 0) {
                return null;
            } else if (_numChanges <= 50) {
                step = _numChanges / 50;
                return d3_interpolateRgb('#fff', '#ff8')(step);  // white -> yellow
            } else {
                step = Math.min((_numChanges - 50) / 50, 1.0);
                return d3_interpolateRgb('#ff8', '#f88')(step);  // yellow -> red
            }
        }

function bgColor() {
        var step;
        if (_numChanges === 0) {
            return null;
        } else if (_numChanges <= 50) {
            step = _numChanges / 50;
            return d3_interpolateRgb('#fff', '#ff8')(step);  // white -> yellow
        } else {
            step = Math.min((_numChanges - 50) / 50, 1.0);
            return d3_interpolateRgb('#ff8', '#f88')(step);  // yellow -> red
        }
    }

function bgColor() {
        var step;
        if (_numChanges === 0) {
            return null;
        } else if (_numChanges <= 50) {
            step = _numChanges / 50;
            return d3_interpolateRgb('#fff', '#ff8')(step);  // white -> yellow
        } else {
            step = Math.min((_numChanges - 50) / 50, 1.0);
            return d3_interpolateRgb('#ff8', '#f88')(step);  // yellow -> red
        }
    }

paint ({ ctx, height, width, now }) {
    const volume = this.sync.volume
    const beat = this.sync.getInterval('beat')
    const bar = this.sync.getInterval('bar')
    const lineBeat = interpolateBasis([2, 300, 2])(beat.progress)
    const sizeBeat = interpolateBasis([0, 150, 0])(beat.progress)
    ctx.fillStyle = 'rgba(0, 0, 0, .1)'
    ctx.fillRect(0, 0, width, height)
    ctx.lineWidth = lineBeat
    ctx.strokeStyle = interpolateRgb(this.lastColor, this.nextColor)(bar.progress)
    sin(ctx, now/50, height/2, volume*50, 100)
    ctx.stroke()
    ctx.fillStyle = 'rgba(0, 0, 0, 1)'
    ctx.beginPath()
    ctx.arc(width * 0.5, height/2, (volume * height/5) + sizeBeat, 0, Math.PI * 2)
    ctx.stroke()
    ctx.fill()
  }
}

grid: 'grid',
  hexagon: 'hexagon',
  geojson: 'geojson',
  cluster: 'cluster',
  icon: 'icon',
  heatmap: 'heatmap',
  hexagonId: 'hexagonId',
  '3D': '3D',
};

export const KEPLER_GL_VERSION = 'v1';

export const KEPLER_DATASET_NAME = 'kepler_data';

const colorInterpolatorPink = interpolateRgb('#fff', '#ff0099');
const colorInterpolatorGrey = interpolateRgb('#fff', '#818c81');

export const HEATMAP_COLORS = [
  dotRange(1, 10).map(d => color(colorInterpolatorPink(0.1 * d)).formatHex()),
  dotRange(1, 10).map(d => color(colorInterpolatorGrey(0.1 * d)).formatHex()),
];

export const DIVERGING_COLORS = HEATMAP_COLORS[1]
  .slice(1)
  .reverse()
  .concat(HEATMAP_COLORS[0].slice(1));