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

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-interpolate / d3-interpolate-tests.ts View on Github

iNum = d3Interpolate.interpolateRound(0, 100);
iNum = d3Interpolate.interpolateRound(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateString(a, b) signature ----------------------------------------------------

iString = d3Interpolate.interpolateString('-1', '2');
str = iString(0.5);

// test interpolateDate(a, b) signature ----------------------------------------------------

iDate = d3Interpolate.interpolateDate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray&gt;([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray&lt;[number, number]&gt;(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray&gt;(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);

iArrayStr = d3Interpolate.interpolateArray([1, 2], ['4', '8']); // infered typing 
arrStr = iArrayStr(0.5);

// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolateArray&lt;[Date, string]&gt;([new Date(2016, 6, 1), 'b: 1'], [new Date(2016, 6, 31), 'b: 8']);

// test interpolateObject(a, b) signature ----------------------------------------------------

DefinitelyTyped / DefinitelyTyped / types / d3-interpolate / d3-interpolate-tests.ts View on Github

iNum = d3Interpolate.interpolateRound(0, 100);
iNum = d3Interpolate.interpolateRound(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateString(a, b) signature ----------------------------------------------------

iString = d3Interpolate.interpolateString('-1', '2');
str = iString(0.5);

// test interpolateDate(a, b) signature ----------------------------------------------------

iDate = d3Interpolate.interpolateDate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray&lt;[number, number]&gt;(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);

iArrayStr = d3Interpolate.interpolateArray([1, 2], ['4', '8']); // infered typing 
arrStr = iArrayStr(0.5);

// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolateArray&lt;[Date, string]&gt;([new Date(2016, 6, 1), 'b: 1'], [new Date(2016, 6, 31), 'b: 8']);

// test interpolateObject(a, b) signature ----------------------------------------------------

DefinitelyTyped / DefinitelyTyped / types / d3-interpolate / d3-interpolate-tests.ts View on Github

iString = d3Interpolate.interpolateString('-1', '2');
str = iString(0.5);

// test interpolateDate(a, b) signature ----------------------------------------------------

iDate = d3Interpolate.interpolateDate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray&lt;[number, number]&gt;(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);

iArrayStr = d3Interpolate.interpolateArray([1, 2], ['4', '8']); // infered typing 
arrStr = iArrayStr(0.5);

// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolateArray&lt;[Date, string]&gt;([new Date(2016, 6, 1), 'b: 1'], [new Date(2016, 6, 31), 'b: 8']);

// test interpolateObject(a, b) signature ----------------------------------------------------

iKeyVal = d3Interpolate.interpolateObject({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });
objKeyVal = iKeyVal(0.5);

iRGBColorObj = d3Interpolate.interpolateObject(d3Color.rgb('steelblue'), d3Color.rgb('seagreen'));
objRGBColor = iRGBColorObj(0.5);

DefinitelyTyped / DefinitelyTyped / d3-interpolate / d3-interpolate-tests.ts View on Github

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray&gt;([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray&lt;[number, number]&gt;(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray&gt;(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);

iArrayStr = d3Interpolate.interpolateArray([1, 2], ['4', '8']); // infered typing 
arrStr = iArrayStr(0.5);

// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolateArray&lt;[Date, string]&gt;([new Date(2016, 6, 1), 'b: 1'], [new Date(2016, 6, 31), 'b: 8']);

// test interpolateObject(a, b) signature ----------------------------------------------------

iKeyVal = d3Interpolate.interpolateObject({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });
objKeyVal = iKeyVal(0.5);

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 ----------------------------------------------------

DefinitelyTyped / DefinitelyTyped / types / d3-interpolate / d3-interpolate-tests.ts View on Github

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray&lt;[number, number]&gt;(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);

iArrayStr = d3Interpolate.interpolateArray([1, 2], ['4', '8']); // infered typing 
arrStr = iArrayStr(0.5);

// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolateArray&lt;[Date, string]&gt;([new Date(2016, 6, 1), 'b: 1'], [new Date(2016, 6, 31), 'b: 8']);

// test interpolateObject(a, b) signature ----------------------------------------------------

iKeyVal = d3Interpolate.interpolateObject({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });
objKeyVal = iKeyVal(0.5);

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 ----------------------------------------------------

DefinitelyTyped / DefinitelyTyped / d3-interpolate / d3-interpolate-tests.ts View on Github

// test interpolateDate(a, b) signature ----------------------------------------------------

iDate = d3Interpolate.interpolateDate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray&gt;([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray&lt;[number, number]&gt;(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray&gt;(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);

iArrayStr = d3Interpolate.interpolateArray([1, 2], ['4', '8']); // infered typing 
arrStr = iArrayStr(0.5);

// two element array with first element date and second element string
iArrayMixed = d3Interpolate.interpolateArray&lt;[Date, string]&gt;([new Date(2016, 6, 1), 'b: 1'], [new Date(2016, 6, 31), 'b: 8']);

// test interpolateObject(a, b) signature ----------------------------------------------------

iKeyVal = d3Interpolate.interpolateObject({ x: 0, y: 1 }, { x: 1, y: 10, z: 100 });
objKeyVal = iKeyVal(0.5);

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)');

ui-router / visualizer / src / util / animatepath.ts View on Github

export function animatePath(
  newValue,
  oldValue,
  duration,
  updateFrame,
  finishFn = function() {},
  easeFn = easing.easeOutElastic,
) {
  let start = null,
    interpolate = interpolateArray(oldValue, newValue);

  let step = function(now) {
    if (duration === -1) return finishFn();
    if (start == null) start = now;
    let progress = now - start,
      percent = 1;
    if (progress &lt; duration) {
      requestAnimationFrame(step);
      percent = easeFn(progress, 0, 1, duration);
    }
    updateFrame(interpolate(percent));
  };

  requestAnimationFrame(step);

  return function cancel() {

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

To help you get started, we’ve selected a few d3-interpolate examples, based on popular ways it is used in public projects.

d3-interpolate

Package Health Score

Popular d3-interpolate functions

Similar packages