Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

d3-interpolate

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-interpolate - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

img/cubehelix.png
img/cubehelixGamma.png
img/cubehelixGammaLong.png
img/cubehelixLong.png
img/hcl.png
img/hclLong.png
img/hsl.png
img/hslLong.png
img/lab.png
img/rgb.png

2

build/bundle.js

@@ -1,1 +0,1 @@

var version = "0.2.0"; export * from "../index"; export {version};
var version = "0.2.1"; export * from "../index"; export {version};

2

build/d3-interpolate.js

@@ -459,3 +459,3 @@ (function (global, factory) {

var version = "0.2.0";
var version = "0.2.1";

@@ -462,0 +462,0 @@ exports.version = version;

2

build/d3-interpolate.min.js

@@ -1,1 +0,1 @@

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("d3-color")):"function"==typeof define&&define.amd?define("d3-interpolate",["exports","d3-color"],t):t(n.d3_interpolate={},n.d3_color)}(this,function(n,t){"use strict";function r(n,t){var r=n-t;return r>180||-180>r?r-360*Math.round(r/360):r}function e(n){return function(e,u){e=t.cubehelix(e),u=t.cubehelix(u);var i=isNaN(e.h)?u.h:e.h,a=isNaN(e.s)?u.s:e.s,o=e.l,s=isNaN(u.h)?0:r(u.h,i),h=isNaN(u.s)?0:u.s-a,c=u.l-o;return function(t){return e.h=i+s*t,e.s=a+h*t,e.l=o+c*Math.pow(t,n),e+""}}}function u(n){return function(r,e){r=t.cubehelix(r),e=t.cubehelix(e);var u=isNaN(r.h)?e.h:r.h,i=isNaN(r.s)?e.s:r.s,a=r.l,o=isNaN(e.h)?0:e.h-u,s=isNaN(e.s)?0:e.s-i,h=e.l-a;return function(t){return r.h=u+o*t,r.s=i+s*t,r.l=a+h*Math.pow(t,n),r+""}}}function i(n,r){n=t.rgb(n),r=t.rgb(r);var e=n.r,u=n.g,i=n.b,a=r.r-e,o=r.g-u,s=r.b-i;return function(t){return n.r=e+a*t,n.g=u+o*t,n.b=i+s*t,n+""}}function a(n,t){return n=+n,t-=n,function(r){return n+t*r}}function o(n,t){var r,e={},u={};for(r in n)r in t?e[r]=l(n[r],t[r]):u[r]=n[r];for(r in t)r in n||(u[r]=t[r]);return function(n){for(r in e)u[r]=e[r](n);return u}}function s(n){return function(){return n}}function h(n){return function(t){return n(t)+""}}function c(n,t){var r,e,u,i=X.lastIndex=_.lastIndex=0,o=-1,c=[],l=[];for(n+="",t+="";(r=X.exec(n))&&(e=_.exec(t));)(u=e.index)>i&&(u=t.slice(i,u),c[o]?c[o]+=u:c[++o]=u),(r=r[0])===(e=e[0])?c[o]?c[o]+=e:c[++o]=e:(c[++o]=null,l.push({i:o,x:a(r,e)})),i=_.lastIndex;return i<t.length&&(u=t.slice(i),c[o]?c[o]+=u:c[++o]=u),c.length<2?l[0]?h(l[0].x):s(t):(t=l.length,function(n){for(var r,e=0;t>e;++e)c[(r=l[e]).i]=r.x(n);return c.join("")})}function l(n,t){for(var r,e=z.length;--e>=0&&!(r=z[e](n,t)););return r}function f(n,t){var r,e=[],u=[],i=n.length,a=t.length,o=Math.min(n.length,t.length);for(r=0;o>r;++r)e.push(l(n[r],t[r]));for(;i>r;++r)u[r]=n[r];for(;a>r;++r)u[r]=t[r];return function(n){for(r=0;o>r;++r)u[r]=e[r](n);return u}}function N(n,t){return n=+n,t-=n,function(r){return Math.round(n+t*r)}}function p(n){S||(S=document.createElementNS("http://www.w3.org/2000/svg","g")),n&&(S.setAttribute("transform",n),t=S.transform.baseVal.consolidate());var t,r=t?t.matrix:Q,e=[r.a,r.b],u=[r.c,r.d],i=g(e),a=x(e,u),o=g(v(u,e,-a))||0;e[0]*u[1]<u[0]*e[1]&&(e[0]*=-1,e[1]*=-1,i*=-1,a*=-1),this.rotate=(i?Math.atan2(e[1],e[0]):Math.atan2(-u[0],u[1]))*P,this.translate=[r.e,r.f],this.scale=[i,o],this.skew=o?Math.atan2(a,o)*P:0}function x(n,t){return n[0]*t[0]+n[1]*t[1]}function g(n){var t=Math.sqrt(x(n,n));return t&&(n[0]/=t,n[1]/=t),t}function v(n,t,r){return n[0]+=r*t[0],n[1]+=r*t[1],n}function b(n){return n.length?n.pop()+",":""}function d(n,t,r,e){if(n[0]!==t[0]||n[1]!==t[1]){var u=r.push("translate(",null,",",null,")");e.push({i:u-4,x:a(n[0],t[0])},{i:u-2,x:a(n[1],t[1])})}else(t[0]||t[1])&&r.push("translate("+t+")")}function M(n,t,r,e){n!==t?(n-t>180?t+=360:t-n>180&&(n+=360),e.push({i:r.push(b(r)+"rotate(",null,")")-2,x:a(n,t)})):t&&r.push(b(r)+"rotate("+t+")")}function m(n,t,r,e){n!==t?e.push({i:r.push(b(r)+"skewX(",null,")")-2,x:a(n,t)}):t&&r.push(b(r)+"skewX("+t+")")}function w(n,t,r,e){if(n[0]!==t[0]||n[1]!==t[1]){var u=r.push(b(r)+"scale(",null,",",null,")");e.push({i:u-4,x:a(n[0],t[0])},{i:u-2,x:a(n[1],t[1])})}else(1!==t[0]||1!==t[1])&&r.push(b(r)+"scale("+t+")")}function y(n,t){var r=[],e=[];return n=new p(n),t=new p(t),d(n.translate,t.translate,r,e),M(n.rotate,t.rotate,r,e),m(n.skew,t.skew,r,e),w(n.scale,t.scale,r,e),n=t=null,function(n){for(var t,u=-1,i=e.length;++u<i;)r[(t=e[u]).i]=t.x(n);return r.join("")}}function j(n){return((n=Math.exp(n))+1/n)/2}function k(n){return((n=Math.exp(n))-1/n)/2}function q(n){return((n=Math.exp(2*n))-1)/(n+1)}function I(n,t){var r,e,u=n[0],i=n[1],a=n[2],o=t[0],s=t[1],h=t[2],c=o-u,l=s-i,f=c*c+l*l;if(C>f)e=Math.log(h/a)/T,r=function(n){return[u+n*c,i+n*l,a*Math.exp(T*n*e)]};else{var N=Math.sqrt(f),p=(h*h-a*a+B*f)/(2*a*V*N),x=(h*h-a*a-B*f)/(2*h*V*N),g=Math.log(Math.sqrt(p*p+1)-p),v=Math.log(Math.sqrt(x*x+1)-x);e=(v-g)/T,r=function(n){var t=n*e,r=j(g),o=a/(V*N)*(r*q(T*t+g)-k(g));return[u+o*c,i+o*l,a*r/j(T*t+g)]}}return r.duration=1e3*e,r}function L(n,e){n=t.hsl(n),e=t.hsl(e);var u=isNaN(n.h)?e.h:n.h,i=isNaN(n.s)?e.s:n.s,a=n.l,o=isNaN(e.h)?0:r(e.h,u),s=isNaN(e.s)?0:e.s-i,h=e.l-a;return function(t){return n.h=u+o*t,n.s=i+s*t,n.l=a+h*t,n+""}}function A(n,r){n=t.hsl(n),r=t.hsl(r);var e=isNaN(n.h)?r.h:n.h,u=isNaN(n.s)?r.s:n.s,i=n.l,a=isNaN(r.h)?0:r.h-e,o=isNaN(r.s)?0:r.s-u,s=r.l-i;return function(t){return n.h=e+a*t,n.s=u+o*t,n.l=i+s*t,n+""}}function E(n,r){n=t.lab(n),r=t.lab(r);var e=n.l,u=n.a,i=n.b,a=r.l-e,o=r.a-u,s=r.b-i;return function(t){return n.l=e+a*t,n.a=u+o*t,n.b=i+s*t,n+""}}function G(n,e){n=t.hcl(n),e=t.hcl(e);var u=isNaN(n.h)?e.h:n.h,i=isNaN(n.c)?e.c:n.c,a=n.l,o=isNaN(e.h)?0:r(e.h,u),s=isNaN(e.c)?0:e.c-i,h=e.l-a;return function(t){return n.h=u+o*t,n.c=i+s*t,n.l=a+h*t,n+""}}function R(n,r){n=t.hcl(n),r=t.hcl(r);var e=isNaN(n.h)?r.h:n.h,u=isNaN(n.c)?r.c:n.c,i=n.l,a=isNaN(r.h)?0:r.h-e,o=isNaN(r.c)?0:r.c-u,s=r.l-i;return function(t){return n.h=e+a*t,n.c=u+o*t,n.l=i+s*t,n+""}}var S,X=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,_=new RegExp(X.source,"g"),z=[function(n,r){var e,u=typeof r;return("string"===u?(e=t.color(r))?(r=e,i):c:r instanceof t.color?i:Array.isArray(r)?f:"object"===u&&isNaN(r)?o:a)(n,r)}],P=180/Math.PI,Q={a:1,b:0,c:0,d:1,e:0,f:0},T=Math.SQRT2,V=2,B=4,C=1e-12,D=e(1),F=u(1),H="0.2.0";n.version=H,n.cubehelix=D,n.cubehelixLong=F,n.cubehelixGamma=e,n.cubehelixGammaLong=u,n.array=f,n.number=a,n.object=o,n.round=N,n.string=c,n.transform=y,n.values=z,n.value=l,n.zoom=I,n.rgb=i,n.hsl=L,n.hslLong=A,n.lab=E,n.hcl=G,n.hclLong=R});
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("d3-color")):"function"==typeof define&&define.amd?define("d3-interpolate",["exports","d3-color"],t):t(n.d3_interpolate={},n.d3_color)}(this,function(n,t){"use strict";function r(n,t){var r=n-t;return r>180||-180>r?r-360*Math.round(r/360):r}function e(n){return function(e,u){e=t.cubehelix(e),u=t.cubehelix(u);var i=isNaN(e.h)?u.h:e.h,a=isNaN(e.s)?u.s:e.s,o=e.l,s=isNaN(u.h)?0:r(u.h,i),h=isNaN(u.s)?0:u.s-a,c=u.l-o;return function(t){return e.h=i+s*t,e.s=a+h*t,e.l=o+c*Math.pow(t,n),e+""}}}function u(n){return function(r,e){r=t.cubehelix(r),e=t.cubehelix(e);var u=isNaN(r.h)?e.h:r.h,i=isNaN(r.s)?e.s:r.s,a=r.l,o=isNaN(e.h)?0:e.h-u,s=isNaN(e.s)?0:e.s-i,h=e.l-a;return function(t){return r.h=u+o*t,r.s=i+s*t,r.l=a+h*Math.pow(t,n),r+""}}}function i(n,r){n=t.rgb(n),r=t.rgb(r);var e=n.r,u=n.g,i=n.b,a=r.r-e,o=r.g-u,s=r.b-i;return function(t){return n.r=e+a*t,n.g=u+o*t,n.b=i+s*t,n+""}}function a(n,t){return n=+n,t-=n,function(r){return n+t*r}}function o(n,t){var r,e={},u={};for(r in n)r in t?e[r]=l(n[r],t[r]):u[r]=n[r];for(r in t)r in n||(u[r]=t[r]);return function(n){for(r in e)u[r]=e[r](n);return u}}function s(n){return function(){return n}}function h(n){return function(t){return n(t)+""}}function c(n,t){var r,e,u,i=X.lastIndex=_.lastIndex=0,o=-1,c=[],l=[];for(n+="",t+="";(r=X.exec(n))&&(e=_.exec(t));)(u=e.index)>i&&(u=t.slice(i,u),c[o]?c[o]+=u:c[++o]=u),(r=r[0])===(e=e[0])?c[o]?c[o]+=e:c[++o]=e:(c[++o]=null,l.push({i:o,x:a(r,e)})),i=_.lastIndex;return i<t.length&&(u=t.slice(i),c[o]?c[o]+=u:c[++o]=u),c.length<2?l[0]?h(l[0].x):s(t):(t=l.length,function(n){for(var r,e=0;t>e;++e)c[(r=l[e]).i]=r.x(n);return c.join("")})}function l(n,t){for(var r,e=z.length;--e>=0&&!(r=z[e](n,t)););return r}function f(n,t){var r,e=[],u=[],i=n.length,a=t.length,o=Math.min(n.length,t.length);for(r=0;o>r;++r)e.push(l(n[r],t[r]));for(;i>r;++r)u[r]=n[r];for(;a>r;++r)u[r]=t[r];return function(n){for(r=0;o>r;++r)u[r]=e[r](n);return u}}function N(n,t){return n=+n,t-=n,function(r){return Math.round(n+t*r)}}function p(n){S||(S=document.createElementNS("http://www.w3.org/2000/svg","g")),n&&(S.setAttribute("transform",n),t=S.transform.baseVal.consolidate());var t,r=t?t.matrix:Q,e=[r.a,r.b],u=[r.c,r.d],i=g(e),a=x(e,u),o=g(v(u,e,-a))||0;e[0]*u[1]<u[0]*e[1]&&(e[0]*=-1,e[1]*=-1,i*=-1,a*=-1),this.rotate=(i?Math.atan2(e[1],e[0]):Math.atan2(-u[0],u[1]))*P,this.translate=[r.e,r.f],this.scale=[i,o],this.skew=o?Math.atan2(a,o)*P:0}function x(n,t){return n[0]*t[0]+n[1]*t[1]}function g(n){var t=Math.sqrt(x(n,n));return t&&(n[0]/=t,n[1]/=t),t}function v(n,t,r){return n[0]+=r*t[0],n[1]+=r*t[1],n}function b(n){return n.length?n.pop()+",":""}function d(n,t,r,e){if(n[0]!==t[0]||n[1]!==t[1]){var u=r.push("translate(",null,",",null,")");e.push({i:u-4,x:a(n[0],t[0])},{i:u-2,x:a(n[1],t[1])})}else(t[0]||t[1])&&r.push("translate("+t+")")}function M(n,t,r,e){n!==t?(n-t>180?t+=360:t-n>180&&(n+=360),e.push({i:r.push(b(r)+"rotate(",null,")")-2,x:a(n,t)})):t&&r.push(b(r)+"rotate("+t+")")}function m(n,t,r,e){n!==t?e.push({i:r.push(b(r)+"skewX(",null,")")-2,x:a(n,t)}):t&&r.push(b(r)+"skewX("+t+")")}function w(n,t,r,e){if(n[0]!==t[0]||n[1]!==t[1]){var u=r.push(b(r)+"scale(",null,",",null,")");e.push({i:u-4,x:a(n[0],t[0])},{i:u-2,x:a(n[1],t[1])})}else(1!==t[0]||1!==t[1])&&r.push(b(r)+"scale("+t+")")}function y(n,t){var r=[],e=[];return n=new p(n),t=new p(t),d(n.translate,t.translate,r,e),M(n.rotate,t.rotate,r,e),m(n.skew,t.skew,r,e),w(n.scale,t.scale,r,e),n=t=null,function(n){for(var t,u=-1,i=e.length;++u<i;)r[(t=e[u]).i]=t.x(n);return r.join("")}}function j(n){return((n=Math.exp(n))+1/n)/2}function k(n){return((n=Math.exp(n))-1/n)/2}function q(n){return((n=Math.exp(2*n))-1)/(n+1)}function I(n,t){var r,e,u=n[0],i=n[1],a=n[2],o=t[0],s=t[1],h=t[2],c=o-u,l=s-i,f=c*c+l*l;if(C>f)e=Math.log(h/a)/T,r=function(n){return[u+n*c,i+n*l,a*Math.exp(T*n*e)]};else{var N=Math.sqrt(f),p=(h*h-a*a+B*f)/(2*a*V*N),x=(h*h-a*a-B*f)/(2*h*V*N),g=Math.log(Math.sqrt(p*p+1)-p),v=Math.log(Math.sqrt(x*x+1)-x);e=(v-g)/T,r=function(n){var t=n*e,r=j(g),o=a/(V*N)*(r*q(T*t+g)-k(g));return[u+o*c,i+o*l,a*r/j(T*t+g)]}}return r.duration=1e3*e,r}function L(n,e){n=t.hsl(n),e=t.hsl(e);var u=isNaN(n.h)?e.h:n.h,i=isNaN(n.s)?e.s:n.s,a=n.l,o=isNaN(e.h)?0:r(e.h,u),s=isNaN(e.s)?0:e.s-i,h=e.l-a;return function(t){return n.h=u+o*t,n.s=i+s*t,n.l=a+h*t,n+""}}function A(n,r){n=t.hsl(n),r=t.hsl(r);var e=isNaN(n.h)?r.h:n.h,u=isNaN(n.s)?r.s:n.s,i=n.l,a=isNaN(r.h)?0:r.h-e,o=isNaN(r.s)?0:r.s-u,s=r.l-i;return function(t){return n.h=e+a*t,n.s=u+o*t,n.l=i+s*t,n+""}}function E(n,r){n=t.lab(n),r=t.lab(r);var e=n.l,u=n.a,i=n.b,a=r.l-e,o=r.a-u,s=r.b-i;return function(t){return n.l=e+a*t,n.a=u+o*t,n.b=i+s*t,n+""}}function G(n,e){n=t.hcl(n),e=t.hcl(e);var u=isNaN(n.h)?e.h:n.h,i=isNaN(n.c)?e.c:n.c,a=n.l,o=isNaN(e.h)?0:r(e.h,u),s=isNaN(e.c)?0:e.c-i,h=e.l-a;return function(t){return n.h=u+o*t,n.c=i+s*t,n.l=a+h*t,n+""}}function R(n,r){n=t.hcl(n),r=t.hcl(r);var e=isNaN(n.h)?r.h:n.h,u=isNaN(n.c)?r.c:n.c,i=n.l,a=isNaN(r.h)?0:r.h-e,o=isNaN(r.c)?0:r.c-u,s=r.l-i;return function(t){return n.h=e+a*t,n.c=u+o*t,n.l=i+s*t,n+""}}var S,X=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,_=new RegExp(X.source,"g"),z=[function(n,r){var e,u=typeof r;return("string"===u?(e=t.color(r))?(r=e,i):c:r instanceof t.color?i:Array.isArray(r)?f:"object"===u&&isNaN(r)?o:a)(n,r)}],P=180/Math.PI,Q={a:1,b:0,c:0,d:1,e:0,f:0},T=Math.SQRT2,V=2,B=4,C=1e-12,D=e(1),F=u(1),H="0.2.1";n.version=H,n.cubehelix=D,n.cubehelixLong=F,n.cubehelixGamma=e,n.cubehelixGammaLong=u,n.array=f,n.number=a,n.object=o,n.round=N,n.string=c,n.transform=y,n.values=z,n.value=l,n.zoom=I,n.rgb=i,n.hsl=L,n.hslLong=A,n.lab=E,n.hcl=G,n.hclLong=R});

4

package.json
{
"name": "d3-interpolate",
"version": "0.2.0",
"version": "0.2.1",
"description": "Interpolate numbers, colors, strings, arrays, objects, whatever!",

@@ -28,3 +28,3 @@ "keywords": [

"dependencies": {
"d3-color": "~0.3.1"
"d3-color": "~0.3.2"
},

@@ -31,0 +31,0 @@ "devDependencies": {

107

README.md
# d3-interpolate
The d3-interpolate module provides a variety of interpolation methods for blending between two values. These values may be numbers, colors, strings, arrays, even deeply-nested objects. For example:
This module provides a variety of interpolation methods for blending between two values. Values may be numbers, colors, strings, arrays, or even deeply-nested objects. For example:
```js
var i = number(10, 20);
var i = d3_interpolate.number(10, 20);
i(0.0); // 10

@@ -13,8 +13,8 @@ i(0.2); // 12

The returned function `i` is called an *interpolator*. Given the starting value *a* and the ending value *b*, it takes a parameter *t* in the domain [0,1] and returns an interpolated value between *a* and *b*. An interpolator typically returns a value equivalent to *a* at *t* = 0, and a value equivalent to *b* at *t* = 1.
The returned function `i` is called an *interpolator*. Given a starting value *a* and an ending value *b*, it takes a parameter *t* in the domain [0, 1] and returns the corresponding interpolated value between *a* and *b*. An interpolator typically returns a value equivalent to *a* at *t* = 0 and a value equivalent to *b* at *t* = 1.
You can interpolate more than just numbers. To find the perceptual halfway point between steelblue and brown:
You can interpolate more than just numbers. To find the perceptual midpoint between steelblue and brown:
```js
lab("steelblue", "brown")(0.5); // #8e5c6d
d3_interpolate.lab("steelblue", "brown")(0.5); // "#8e5c6d"
```

@@ -25,3 +25,3 @@

```js
var i = value({colors: ["red", "blue"]}, {colors: ["white", "black"]});
var i = d3_interpolate.value({colors: ["red", "blue"]}, {colors: ["white", "black"]});
i(0.0); // {colors: ["#ff0000", "#0000ff"]}

@@ -36,7 +36,14 @@ i(0.5); // {colors: ["#ff8080", "#000080"]}

If you use NPM, `npm install d3-interpolate`. Otherwise, download the [latest release](https://github.com/d3/d3-interpolate/releases/latest).
If you use NPM, `npm install d3-interpolate`. Otherwise, download the [latest release](https://github.com/d3/d3-interpolate/releases/latest). The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom build using [Rollup](https://github.com/rollup/rollup) or your preferred bundler. You can also load directly from [d3js.org](https://d3js.org):
```html
<script src="https://d3js.org/d3-color.v0.3.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.2.min.js"></script>
```
In a vanilla environment, a `d3_interpolate` global is exported. [Try d3-interpolate in your browser.](https://tonicdev.com/npm/d3-interpolate)
## API Reference
<a name="value" href="#value">#</a> <b>value</b>(<i>a</i>, <i>b</i>)
<a name="value" href="#value">#</a> d3_interpolate.<b>value</b>(<i>a</i>, <i>b</i>)

@@ -53,3 +60,3 @@ Returns an interpolator between the two arbitrary values *a* and *b*. The interpolator implementation is based on the type of the end value *b*, using the following algorithm:

<a name="number" href="#number">#</a> <b>number</b>(<i>a</i>, <i>b</i>)
<a name="number" href="#number">#</a> d3_interpolate.<b>number</b>(<i>a</i>, <i>b</i>)

@@ -66,7 +73,7 @@ Returns an interpolator between the two numbers *a* and *b*. The returned interpolator is equivalent to:

<a name="round" href="#round">#</a> <b>round</b>(<i>a</i>, <i>b</i>)
<a name="round" href="#round">#</a> d3_interpolate.<b>round</b>(<i>a</i>, <i>b</i>)
Returns an interpolator between the two numbers *a* and *b*; the interpolator is similar to [number](#number), except it will round the resulting value to the nearest integer.
<a name="string" href="#string">#</a> <b>string</b>(<i>a</i>, <i>b</i>)
<a name="string" href="#string">#</a> d3_interpolate.<b>string</b>(<i>a</i>, <i>b</i>)

@@ -79,3 +86,3 @@ Returns an interpolator between the two strings *a* and *b*. The string interpolator finds numbers embedded in *a* and *b*, where each number is of the form understood by JavaScript. A few examples of numbers that will be detected within a string: `-1`, `42`, `3.14159`, and `6.0221413e+23`.

<a name="array" href="#array">#</a> <b>array</b>(<i>a</i>, <i>b</i>)
<a name="array" href="#array">#</a> d3_interpolate.<b>array</b>(<i>a</i>, <i>b</i>)

@@ -86,5 +93,5 @@ 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 [value](#value). 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.

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 because interpolators should be fast, as they are part of the inner loop of animation.
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).
<a name="object" href="#object">#</a> <b>object</b>(<i>a</i>, <i>b</i>)
<a name="object" href="#object">#</a> d3_interpolate.<b>object</b>(<i>a</i>, <i>b</i>)

@@ -97,9 +104,9 @@ 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 [value](#value). 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.

Note: **no defensive copy** of the template object is created; modifications of the returned object may adversely affect subsequent evaluation of the interpolator. No copy is made because interpolators should be fast, as they are part of the inner loop of animation.
Note: **no defensive copy** of the template object is created; modifications of the returned object 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).
<a name="transform" href="#transform">#</a> <b>transform</b>(<i>a</i>, <i>b</i>)
<a name="transform" href="#transform">#</a> d3_interpolate.<b>transform</b>(<i>a</i>, <i>b</i>)
Returns an interpolator between the two 2D affine transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
<a name="zoom" href="#zoom">#</a> <b>zoom</b>(<i>a</i>, <i>b</i>)
<a name="zoom" href="#zoom">#</a> d3_interpolate.<b>zoom</b>(<i>a</i>, <i>b</i>)

@@ -110,3 +117,3 @@ Returns an interpolator between the two views *a* and *b* of a two-dimensional plane, based on [“Smooth and efficient zooming and panning”](https://www.google.com/search?q=Smooth+and+efficient+zooming+and+panning) by Jarke J. van Wijk and Wim A.A. Nuij. Each view is defined as an array of three numbers: *cx*, *cy* and *width*. The first two coordinates *cx*, *cy* represent the center of the viewport; the last coordinate *width* represents the size of the viewport.

<a name="values" href="#values">#</a> <b>values</b>
<a name="values" href="#values">#</a> d3_interpolate.<b>values</b>

@@ -118,3 +125,3 @@ The array of built-in interpolator factories, as used by [value](#value). Additional interpolator factories may be pushed onto the end of this array. Each factory should return an interpolator if it supports interpolating the two specified input values; otherwise, the factory should return a falsey value and other interpolators will be tried.

```js
values.push(function(a, b) {
d3_interpolate.values.push(function(a, b) {
var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f");

@@ -131,70 +138,66 @@ if ((ma = re.exec(a)) && (mb = re.exec(b))) {

Subsequently, `value("$20", "$10")(1/3)` returns `$16.67`.
Subsequently, `d3_interpolate.value("$20", "$10")(1/3)` returns `$16.67`.
<a name="rgb" href="#rgb">#</a> <b>rgb</b>(<i>a</i>, <i>b</i>)
<a name="rgb" href="#rgb">#</a> d3_interpolate.<b>rgb</b>(<i>a</i>, <i>b</i>)
![rgb](https://cloud.githubusercontent.com/assets/230541/8027976/07e91580-0d58-11e5-8d3f-4c50f152a2e3.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/rgb.png" width="100%" height="80" alt="rgb">
Returns an RGB color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in RGB; they will be converted to RGB using [rgb](#rgb). The return value of the interpolator is a hexadecimal RGB string.
Returns an RGB color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in RGB; they will be converted to RGB using [color.rgb](https://github.com/d3/d3-color#rgb). The return value of the interpolator is a hexadecimal RGB string.
<a name="hsl" href="#hsl">#</a> <b>hsl</b>(<i>a</i>, <i>b</i>)
<a name="hsl" href="#hsl">#</a> d3_interpolate.<b>hsl</b>(<i>a</i>, <i>b</i>)
![hsl](https://cloud.githubusercontent.com/assets/230541/8027979/07fec100-0d58-11e5-90df-dc458ae7af10.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/hsl.png" width="100%" height="80" alt="hsl">
Returns an HSL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HSL; they will be converted to HSL using [hsl](#hsl). If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string.
Returns an HSL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HSL; they will be converted to HSL using [color.hsl](https://github.com/d3/d3-color#hsl). If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string.
<a name="hslLong" href="#hslLong">#</a> <b>hslLong</b>(<i>a</i>, <i>b</i>)
<a name="hslLong" href="#hslLong">#</a> d3_interpolate.<b>hslLong</b>(<i>a</i>, <i>b</i>)
![hsllong](https://cloud.githubusercontent.com/assets/230541/8028057/bae888b8-0d59-11e5-983a-a460a59ae4ab.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/hslLong.png" width="100%" height="80" alt="hslLong">
Like [hsl](#hsl), but does not use the shortest path between hues.
<a name="lab" href="#lab">#</a> <b>lab</b>(<i>a</i>, <i>b</i>)
<a name="lab" href="#lab">#</a> d3_interpolate.<b>lab</b>(<i>a</i>, <i>b</i>)
![lab](https://cloud.githubusercontent.com/assets/230541/8027977/07eaea04-0d58-11e5-8f4f-b739eb842549.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/lab.png" width="100%" height="80" alt="lab">
Returns a Lab color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in Lab; they will be converted to Lab using [lab](#lab). The return value of the interpolator is a hexadecimal RGB string.
Returns a Lab color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in Lab; they will be converted to Lab using [color.lab](https://github.com/d3/d3-color#lab). The return value of the interpolator is a hexadecimal RGB string.
<a name="hcl" href="#hcl">#</a> <b>hcl</b>(<i>a</i>, <i>b</i>)
<a name="hcl" href="#hcl">#</a> d3_interpolate.<b>hcl</b>(<i>a</i>, <i>b</i>)
![hcl](https://cloud.githubusercontent.com/assets/230541/8027978/07f91002-0d58-11e5-92f0-f06899907c6a.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/hcl.png" width="100%" height="80" alt="hcl">
Returns an HCL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HCL; they will be converted to HCL using [hcl](#hcl). If either color’s hue or chroma is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string.
Returns an HCL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HCL; they will be converted to HCL using [color.hcl](https://github.com/d3/d3-color#hcl). If either color’s hue or chroma is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string.
<a name="hclLong" href="#hclLong">#</a> <b>hclLong</b>(<i>a</i>, <i>b</i>)
<a name="hclLong" href="#hclLong">#</a> d3_interpolate.<b>hclLong</b>(<i>a</i>, <i>b</i>)
![hcllong](https://cloud.githubusercontent.com/assets/230541/8028056/bad85786-0d59-11e5-9c22-6c23215779fa.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/hclLong.png" width="100%" height="80" alt="hclLong">
Like [hcl](#hcl), but does not use the shortest path between hues.
<a name="cubehelix" href="#cubehelix">#</a> <b>cubehelix</b>(<i>a</i>, <i>b</i>)
<a name="cubehelix" href="#cubehelix">#</a> d3_interpolate.<b>cubehelix</b>(<i>a</i>, <i>b</i>)
![cubehelix](https://cloud.githubusercontent.com/assets/230541/8027999/737cde08-0d58-11e5-8130-36e2437996ee.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/cubehelix.png" width="100%" height="80" alt="cubehelix">
Returns a Cubehelix color space interpolator between the two colors *a* and *b* using the default *gamma* of 1.0. The colors *a* and *b* need not be in Cubehelix; they will be converted to Cubehelix using [cubehelix](https://github.com/d3/d3-color#cubehelix). If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string.
Returns a Cubehelix color space interpolator between the two colors *a* and *b* using the default *gamma* of 1.0. The colors *a* and *b* need not be in Cubehelix; they will be converted to Cubehelix using [color.cubehelix](https://github.com/d3/d3-color#cubehelix). If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string.
<a name="cubehelixLong" href="#cubehelixLong">#</a> <b>cubehelixLong</b>(<i>a</i>, <i>b</i>)
<a name="cubehelixLong" href="#cubehelixLong">#</a> d3_interpolate.<b>cubehelixLong</b>(<i>a</i>, <i>b</i>)
![cubehelixlong](https://cloud.githubusercontent.com/assets/230541/8028055/bad68424-0d59-11e5-8f0f-1ecdbd8e46c8.png)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/cubehelixLong.png" width="100%" height="80" alt="cubehelixLong">
Like [cubehelix](#cubehelix), but does not use the shortest path between hues.
<a name="cubehelixGamma" href="#cubehelixGamma">#</a> <b>cubehelixGamma</b>(<i>gamma</i>)
<a name="cubehelixGamma" href="#cubehelixGamma">#</a> d3_interpolate.<b>cubehelixGamma</b>(<i>gamma</i>)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/cubehelixGamma.png" width="100%" height="80" alt="cubehelixGamma">
Returns a Cubehelix color space interpolator factory using the specified *gamma*. A gamma value less than one emphasizes low intensity values, while a gamma value greater than one emphasizes high intensity values. For example:
```js
var i = cubehelixGamma(1.5)("red", "blue");
var i = d3_interpolate.cubehelixGamma(3)("purple", "orange");
```
<a name="cubehelixGammaLong" href="#cubehelixGammaLong">#</a> <b>cubehelixGammaLong</b>(<i>gamma</i>)
<a name="cubehelixGammaLong" href="#cubehelixGammaLong">#</a> d3_interpolate.<b>cubehelixGammaLong</b>(<i>gamma</i>)
<img src="https://raw.githubusercontent.com/d3/d3-interpolate/master/img/cubehelixGammaLong.png" width="100%" height="80" alt="cubehelixGammaLong">
Like [cubehelixGamma](#cubehelixGamma), but does not use the shortest path between hues.
## Changes from D3 3.x:
* A new [cubehelix](#cubehelix) color space!
* New “long” methods for hue interpolation in [HSL](#hslLong), [HCL](#hclLong) and [Cubehelix](#cubehelixLong).
* Renamed the generic interpolate method and interpolators array to [value](#value) and [values](#values), respectively.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc