How to use d3-interpolate - 10 common examples
To help you get started, we’ve selected a few d3-interpolate examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / d3-transition / d3-transition-tests.ts View on Github 
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'));// test interpolateTransformSvg(a, b) signature ----------------------------------------------------
iString = d3Interpolate.interpolateTransformSvg('rotate(0)', 'rotate(60)');
str = iString(0.5);
// test interpolateZoom(a, b) signature ----------------------------------------------------
iZoom = d3Interpolate.interpolateZoom([50, 50, 300], [100, 100, 500]);
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 -------------------------// test interpolateTransformSvg(a, b) signature ----------------------------------------------------
iString = d3Interpolate.interpolateTransformSvg('rotate(0)', 'rotate(60)');
str = iString(0.5);
// test interpolateZoom(a, b) signature ----------------------------------------------------
iZoom = d3Interpolate.interpolateZoom([50, 50, 300], [100, 100, 500]);
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 -------------------------enterTransition = enterTransition.attrTween('r', function(d, i, g) {
const that: SVGCircleElement = this;
// const that2: HTMLElement = this; // fails, type mismatch
const datum: CircleDatum = d;
const index: number = i;
const group: SVGCircleElement[] | ArrayLike = g;
console.log(this.r.baseVal.value); // this type is SVGCircleElement
return interpolateString(0, d.r); // datum type is CircleDatum
});iString = d3Interpolate.interpolateTransformSvg('rotate(0)', 'rotate(60)');
str = iString(0.5);
// test interpolateZoom(a, b) signature ----------------------------------------------------
iZoom = d3Interpolate.interpolateZoom([50, 50, 300], [100, 100, 500]);
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 -------------------------// test interpolateTransformSvg(a, b) signature ----------------------------------------------------
iString = d3Interpolate.interpolateTransformSvg('rotate(0)', 'rotate(60)');
str = iString(0.5);
// test interpolateZoom(a, b) signature ----------------------------------------------------
iZoom = d3Interpolate.interpolateZoom([50, 50, 300], [100, 100, 500]);
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 -------------------------enterTransition = enterTransition.attrTween('r', function(d, i, g) {
const that: SVGCircleElement = this;
// const that2: HTMLElement = this; // fails, type mismatch
const datum: CircleDatum = d;
const index: number = i;
const group: SVGCircleElement[] | ArrayLike = g;
console.log(this.r.baseVal.value); // this type is SVGCircleElement
return interpolateString(0, d.r); // datum type is CircleDatum
});iRGBColorObj = d3Interpolate.interpolateObject(d3Color.rgb('steelblue'), d3Color.rgb('seagreen'));
objRGBColor = iRGBColorObj(0.5);
// test interpolateTransformCss(a, b) signature ----------------------------------------------------
iString = d3Interpolate.interpolateTransformCss('rotate(0deg)', 'rotate(60deg)');
str = iString(0.5);
// test interpolateTransformSvg(a, b) signature ----------------------------------------------------
iString = d3Interpolate.interpolateTransformSvg('rotate(0)', 'rotate(60)');
str = iString(0.5);
// test interpolateZoom(a, b) signature ----------------------------------------------------
iZoom = d3Interpolate.interpolateZoom([50, 50, 300], [100, 100, 500]);
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'));d3-interpolate
Interpolate numbers, colors, strings, arrays, objects, whatever!
Package Health Score
74 / 100Popular d3-interpolate functions
- d3-interpolate.interpolate
- d3-interpolate.interpolateArray
- d3-interpolate.interpolateBasis
- d3-interpolate.interpolateCubehelix
- d3-interpolate.interpolateCubehelixLong
- d3-interpolate.interpolateHcl
- d3-interpolate.interpolateHclLong
- d3-interpolate.interpolateHsl
- d3-interpolate.interpolateHslLong
- d3-interpolate.interpolateLab
- d3-interpolate.interpolateNumber
- d3-interpolate.interpolateObject
- d3-interpolate.interpolateRgb
- d3-interpolate.interpolateRgbBasis
- d3-interpolate.interpolateRound
- d3-interpolate.interpolateString
- d3-interpolate.interpolateTransformSvg
- d3-interpolate.interpolateZoom
- d3-interpolate.piecewise
- d3-interpolate.quantize