interpolateNumberArray

- interpolates typed arrays (Float64Array, etc) and standard arrays that contain only numbers with a simple for… loop.
- autodetects both situations (we could optionally unplug the number array detection)
- not compatible with BigInt typed arrays (#75)

README.md

@@ -54,9 +54,10 @@ Returns an interpolator between the two arbitrary values *a* and *b*. The interp
 3. If *b* is a [color](https://github.com/d3/d3-color/blob/master/README.md#color) or a string coercible to a color, use [interpolateRgb](#interpolateRgb).
 4. If *b* is a [date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), use [interpolateDate](#interpolateDate).
 5. If *b* is a string, use [interpolateString](#interpolateString).
-6. If *b* is an [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray), use [interpolateArray](#interpolateArray).
-7. If *b* is coercible to a number, use [interpolateNumber](#interpolateNumber).
-8. Use [interpolateObject](#interpolateObject).
+6. If *b* is a number array (a [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) or an array containing only numbers, use [interpolateNumberArray](#interpolateNumberArray).
+7. If *b* is a generic [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray), use [interpolateArray](#interpolateArray).
+8. If *b* is coercible to a number, use [interpolateNumber](#interpolateNumber).
+9. Use [interpolateObject](#interpolateObject).
 
 Based on the chosen interpolator, *a* is coerced to the suitable corresponding type.
 
@@ -92,12 +93,20 @@ Note: **no defensive copy** of the returned date is created; the same Date insta
 
 <a name="interpolateArray" href="#interpolateArray">#</a> d3.<b>interpolateArray</b>(<i>a</i>, <i>b</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/array.js), [Examples](https://observablehq.com/@d3/d3-interpolateobject)
 
-Returns an interpolator between the two arrays *a* and *b*. Internally, an array template is created that is the same length in *b*. For each element in *b*, if there exists a corresponding element in *a*, a generic interpolator is created for the two elements using [interpolate](#interpolate). If there is no such element, the static value from *b* is used in the template. Then, for the given parameter *t*, the template’s embedded interpolators are evaluated. The updated array template is then returned.
+Returns an interpolator between the two arrays *a* and *b*. Internally, an array template is created that is the same length as *b*. For each element in *b*, if there exists a corresponding element in *a*, a generic interpolator is created for the two elements using [interpolate](#interpolate). If there is no such element, the static value from *b* is used in the template. Then, for the given parameter *t*, the template’s embedded interpolators are evaluated. The updated array template is then returned.
 
 For example, if *a* is the array `[0, 1]` and *b* is the array `[1, 10, 100]`, then the result of the interpolator for *t* = 0.5 is the array `[0.5, 5.5, 100]`.
 
 Note: **no defensive copy** of the template array is created; modifications of the returned array may adversely affect subsequent evaluation of the interpolator. No copy is made for performance reasons; interpolators are often part of the inner loop of [animated transitions](https://github.com/d3/d3-transition).
 
+If the array is a typed array (Float64Array, etc) or contains only numbers, the interpolateNumberArray method is called instead.
+
+<a name="interpolateNumberArray" href="#interpolateNumberArray">#</a> d3.<b>interpolateNumberArray</b>(<i>a</i>, <i>b</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/numberArray.js) <!-- , [Examples](https://observablehq.com/@d3/d3-interpolateobject) -->
+
+Returns an interpolator between the two number arrays *a* and *b*. Internally, an array template is created that is the same type and length as *b*. For each element in *b*, if there exists a corresponding element in *a*, the values are directly interpolated in the array template. If there is no such element, the static value from *b* is copied. The updated array template is then returned.
+
+Note: For performance reasons, **no defensive copy** is made of the template array and the arguments *a* and *b*; modifications of these arrays may affect subsequent evaluation of the interpolator.
+
 <a name="interpolateObject" href="#interpolateObject">#</a> d3.<b>interpolateObject</b>(<i>a</i>, <i>b</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/object.js), [Examples](https://observablehq.com/@d3/d3-interpolateobject)
 
 Returns an interpolator between the two objects *a* and *b*. Internally, an object template is created that has the same properties as *b*. For each property in *b*, if there exists a corresponding property in *a*, a generic interpolator is created for the two elements using [interpolate](#interpolate). If there is no such property, the static value from *b* is used in the template. Then, for the given parameter *t*, the template's embedded interpolators are evaluated and the updated object template is then returned.

src/array.js

@@ -1,6 +1,8 @@
 import value from "./value.js";
+import {default as numberArray, isNumberArray} from "./numberArray.js";
 
 export default function(a, b) {
+  if (isNumberArray(b)) return numberArray(a, b);
   var nb = b ? b.length : 0,
       na = a ? Math.min(nb, a.length) : 0,
       x = new Array(na),

src/index.js

@@ -6,6 +6,7 @@ export {default as interpolateDate} from "./date.js";
 export {default as interpolateDiscrete} from "./discrete.js";
 export {default as interpolateHue} from "./hue.js";
 export {default as interpolateNumber} from "./number.js";
+export {default as interpolateNumberArray} from "./numberArray.js";
 export {default as interpolateObject} from "./object.js";
 export {default as interpolateRound} from "./round.js";
 export {default as interpolateString} from "./string.js";

src/numberArray.js

@@ -0,0 +1,15 @@
+export default function(a, b) {
+  if (!b) b = [];
+  var na = a ? Math.min(b.length, a.length) : 0,
+    c = b.slice();
+  let i;
+  return function(t) {
+    for (i = 0; i < na; ++i) c[i] = a[i] + (b[i] - a[i]) * t;
+    return c;
+  };
+}
+
+export function isNumberArray(x) {
+  if (ArrayBuffer.isView(x)) return !(x instanceof DataView);
+  return Array.isArray(x) && x.every(i => typeof i == "number");
+}

src/value.js

@@ -6,6 +6,7 @@ import number from "./number.js";
 import object from "./object.js";
 import string from "./string.js";
 import constant from "./constant.js";
+import {default as numberArray, isNumberArray} from "./numberArray.js";
 
 export default function(a, b) {
   var t = typeof b, c;
@@ -14,6 +15,7 @@ export default function(a, b) {
       : t === "string" ? ((c = color(b)) ? (b = c, rgb) : string)
       : b instanceof color ? rgb
       : b instanceof Date ? date
+      : isNumberArray(b) ? numberArray
       : Array.isArray(b) ? array
       : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
       : number)(a, b);

test/numberArray-test.js

@@ -0,0 +1,37 @@
+var tape = require("tape"),
+    interpolate = require("../");
+
+tape("interpolateNumberArray(a, b) interpolates defined elements in a and b", function(test) {
+  test.deepEqual(interpolate.interpolateNumberArray(Float64Array.from([2, 12]), Float64Array.from([4, 24]))(0.5), Float64Array.from([3, 18]));
+  test.end();
+});
+
+tape("interpolateNumberArray(a, b) ignores elements in a that are not in b", function(test) {
+  test.deepEqual(interpolate.interpolateNumberArray(Float64Array.from([2, 12, 12]), Float64Array.from([4, 24]))(0.5), Float64Array.from([3, 18]));
+  test.end();
+});
+
+tape("interpolateNumberArray(a, b) uses constant elements in b that are not in a", function(test) {
+  test.deepEqual(interpolate.interpolateNumberArray(Float64Array.from([2, 12]), Float64Array.from([4, 24, 12]))(0.5), Float64Array.from([3, 18, 12]));
+  test.end();
+});
+
+tape("interpolateNumberArray(a, b) treats undefined as an empty array", function(test) {
+  test.deepEqual(interpolate.interpolateNumberArray(undefined, [2, 12])(0.5), [2, 12]);
+  test.deepEqual(interpolate.interpolateNumberArray([2, 12], undefined)(0.5), []);
+  test.deepEqual(interpolate.interpolateNumberArray(undefined, undefined)(0.5), []);
+  test.end();
+});
+
+tape("interpolateNumberArray(a, b) uses b’s array type", function(test) {
+  test.ok(interpolate.interpolateNumberArray(Float64Array.from([2, 12]), Float64Array.from([4, 24, 12]))(0.5) instanceof Float64Array);
+  test.ok(interpolate.interpolateNumberArray(Float64Array.from([2, 12]), Float32Array.from([4, 24, 12]))(0.5) instanceof Float32Array);
+  test.ok(interpolate.interpolateNumberArray(Float64Array.from([2, 12]), Uint8Array.from([4, 24, 12]))(0.5) instanceof Uint8Array);
+  test.ok(interpolate.interpolateNumberArray(Float64Array.from([2, 12]), Uint16Array.from([4, 24, 12]))(0.5) instanceof Uint16Array);
+  test.end();
+});
+
+tape("interpolateNumberArray(a, b) works with unsigned data", function(test) {
+  test.deepEqual(interpolate.interpolateNumberArray(Uint8Array.from([1, 12]), Uint8Array.from([255, 0]))(0.5), Uint8Array.from([128, 6]));
+  test.end();
+});

test/value-test.js

@@ -115,6 +115,19 @@ tape("interpolate(a, b) interpolates objects with toString as objects if toStrin
   test.end();
 });
 
+tape("interpolate(a, b) interpolates number arrays if b is a typed array", function(test) {
+  test.deepEqual(interpolate.interpolate([0, 0], Float64Array.from([-1, 1]))(0.5), Float64Array.from([-0.5, 0.5]));
+  test.assert(interpolate.interpolate([0, 0], Float64Array.from([-1, 1]))(0.5) instanceof Float64Array);
+  test.deepEqual(interpolate.interpolate([0, 0], Float32Array.from([-1, 1]))(0.5), Float32Array.from([-0.5, 0.5]));
+  test.assert(interpolate.interpolate([0, 0], Float32Array.from([-1, 1]))(0.5) instanceof Float32Array);
+  test.deepEqual(interpolate.interpolate([0, 0], Uint32Array.from([-2, 2]))(0.5), Uint32Array.from([Math.pow(2, 31) - 1, 1]));
+  test.assert(interpolate.interpolate([0, 0], Uint32Array.from([-1, 1]))(0.5) instanceof Uint32Array);
+  test.deepEqual(interpolate.interpolate([0, 0], Uint8Array.from([-2, 2]))(0.5), Uint8Array.from([Math.pow(2, 7) - 1, 1]));
+  test.assert(interpolate.interpolate([0, 0], Uint8Array.from([-1, 1]))(0.5) instanceof Uint8Array);
+  test.end();
+});
+
+
 function noproto(properties, proto = null) {
   return Object.assign(Object.create(proto), properties);
 }