A simple test of d3.interpolateHcl from the d3-color module, animated with d3.timer from the d3-transition module.
-
-
Save steveharoz/f739f83c14929652775d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.DS_Store | |
node_modules | |
npm-debug.log |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
color, | |
rgb, | |
hsl, | |
lab, | |
hcl, | |
interpolateObject, | |
interpolateRgb, | |
interpolateHsl, | |
interpolateLab, | |
interpolateHcl, | |
interpolate | |
} from "d3-color"; | |
import { | |
timer | |
} from "d3-transition"; | |
export { | |
color, | |
rgb, | |
hsl, | |
lab, | |
hcl, | |
interpolateRgb, | |
interpolateHsl, | |
interpolateLab, | |
interpolateHcl, | |
timer | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.d3={})}(this,function(e){"use strict";function t(){var e,t=b,s=1/0,n=Date.now();for(k=b;k;)n>=k.time&&(k.flush=k.callback(n-k.time)),k=k.next;for(;t;)t.flush?t=e?e.next=t.next:b=t.next:(t.time<s&&(s=t.time),t=(e=t).next);return p=e,s-n}function s(){var e=t();e>24?(isFinite(e)&&(clearTimeout(y),y=setTimeout(s,e)),w=0):(w=1,requestAnimationFrame(s))}function n(e,t){this.callback=e,this.time=t,this.flush=!1,this.next=null}function r(e,t,s){this.h=(e%=360)<0?e+360:e,this.c=+t,this.l=Math.max(0,Math.min(100,+s))}function i(){}function a(e,t,s){this.l=Math.max(0,Math.min(100,+e)),this.a=+t,this.b=+s}function o(e){return 255*(.0031308>=e?12.92*e:1.055*Math.pow(e,1/2.4)-.055)}function l(e,t,s){this.r=Math.max(0,Math.min(255,Math.round(e))),this.g=Math.max(0,Math.min(255,Math.round(t))),this.b=Math.max(0,Math.min(255,Math.round(s)))}function h(e,t,s){return isNaN(e)&&(e=0),isNaN(t)&&(t=0),isNaN(s)&&(s=0),"#"+(16>e?"0"+e.toString(16):e.toString(16))+(16>t?"0"+t.toString(16):t.toString(16))+(16>s?"0"+s.toString(16):s.toString(16))}function u(e){return e>A?e*e*e:D*(e-j)}function c(e){return e>H?Math.pow(e,1/3):e/D+j}function g(e){return(e/=255)<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)}function d(e){return R(e>>16&255,e>>8&255,255&e)}function f(e,t,s){this.h=(e%=360)<0?e+360:e,this.s=Math.max(0,Math.min(1,+t)),this.l=Math.max(0,Math.min(1,+s))}function m(e,t,s){return 255*(60>e?t+(s-t)*e/60:180>e?s:240>e?t+(s-t)*(240-e)/60:t)}var b,p,w,y,k,N=function(e,t,r){null==t&&(t=0),null==r&&(r=Date.now());var i=new n(e,r+t);p?p.next=i:b=i,p=i,w||(y=clearTimeout(y),w=1,requestAnimationFrame(s))};i.prototype={toString:function(){return this.rgb()+""}};var v=r.prototype=new i,M=18;v.brighter=function(e){return new r(this.h,this.c,this.l+M*(null==e?1:e))},v.darker=function(e){return new r(this.h,this.c,this.l-M*(null==e?1:e))};var x=a.prototype=new i;x.brighter=function(e){return new a(this.l+M*(null==e?1:e),this.a,this.b)},x.darker=function(e){return new a(this.l-M*(null==e?1:e),this.a,this.b)};var q=l.prototype=new i,S=.7;q.darker=function(e){return e=null==e?S:Math.pow(S,e),new l(this.r*e,this.g*e,this.b*e)};var $=1/S;q.brighter=function(e){return e=null==e?$:Math.pow($,e),new l(this.r*e,this.g*e,this.b*e)},q.rgb=function(){return this},q.toString=function(){return h(this.r,this.g,this.b)};var I=.95047,F=1,T=1.08883,j=4/29,A=6/29,D=3*A*A,H=A*A*A;x.rgb=function(){var e=(this.l+16)/116,t=isNaN(this.a)?e:e+this.a/500,s=isNaN(this.b)?e:e-this.b/200;return e=F*u(e),t=I*u(t),s=T*u(s),new l(o(3.2404542*t-1.5371385*e-.4985314*s),o(-.969266*t+1.8760108*e+.041556*s),o(.0556434*t-.2040259*e+1.0572252*s))};var L=(new Map).set("aliceblue",15792383).set("antiquewhite",16444375).set("aqua",65535).set("aquamarine",8388564).set("azure",15794175).set("beige",16119260).set("bisque",16770244).set("black",0).set("blanchedalmond",16772045).set("blue",255).set("blueviolet",9055202).set("brown",10824234).set("burlywood",14596231).set("cadetblue",6266528).set("chartreuse",8388352).set("chocolate",13789470).set("coral",16744272).set("cornflowerblue",6591981).set("cornsilk",16775388).set("crimson",14423100).set("cyan",65535).set("darkblue",139).set("darkcyan",35723).set("darkgoldenrod",12092939).set("darkgray",11119017).set("darkgreen",25600).set("darkgrey",11119017).set("darkkhaki",12433259).set("darkmagenta",9109643).set("darkolivegreen",5597999).set("darkorange",16747520).set("darkorchid",10040012).set("darkred",9109504).set("darksalmon",15308410).set("darkseagreen",9419919).set("darkslateblue",4734347).set("darkslategray",3100495).set("darkslategrey",3100495).set("darkturquoise",52945).set("darkviolet",9699539).set("deeppink",16716947).set("deepskyblue",49151).set("dimgray",6908265).set("dimgrey",6908265).set("dodgerblue",2003199).set("firebrick",11674146).set("floralwhite",16775920).set("forestgreen",2263842).set("fuchsia",16711935).set("gainsboro",14474460).set("ghostwhite",16316671).set("gold",16766720).set("goldenrod",14329120).set("gray",8421504).set("green",32768).set("greenyellow",11403055).set("grey",8421504).set("honeydew",15794160).set("hotpink",16738740).set("indianred",13458524).set("indigo",4915330).set("ivory",16777200).set("khaki",15787660).set("lavender",15132410).set("lavenderblush",16773365).set("lawngreen",8190976).set("lemonchiffon",16775885).set("lightblue",11393254).set("lightcoral",15761536).set("lightcyan",14745599).set("lightgoldenrodyellow",16448210).set("lightgray",13882323).set("lightgreen",9498256).set("lightgrey",13882323).set("lightpink",16758465).set("lightsalmon",16752762).set("lightseagreen",2142890).set("lightskyblue",8900346).set("lightslategray",7833753).set("lightslategrey",7833753).set("lightsteelblue",11584734).set("lightyellow",16777184).set("lime",65280).set("limegreen",3329330).set("linen",16445670).set("magenta",16711935).set("maroon",8388608).set("mediumaquamarine",6737322).set("mediumblue",205).set("mediumorchid",12211667).set("mediumpurple",9662683).set("mediumseagreen",3978097).set("mediumslateblue",8087790).set("mediumspringgreen",64154).set("mediumturquoise",4772300).set("mediumvioletred",13047173).set("midnightblue",1644912).set("mintcream",16121850).set("mistyrose",16770273).set("moccasin",16770229).set("navajowhite",16768685).set("navy",128).set("oldlace",16643558).set("olive",8421376).set("olivedrab",7048739).set("orange",16753920).set("orangered",16729344).set("orchid",14315734).set("palegoldenrod",15657130).set("palegreen",10025880).set("paleturquoise",11529966).set("palevioletred",14381203).set("papayawhip",16773077).set("peachpuff",16767673).set("peru",13468991).set("pink",16761035).set("plum",14524637).set("powderblue",11591910).set("purple",8388736).set("rebeccapurple",6697881).set("red",16711680).set("rosybrown",12357519).set("royalblue",4286945).set("saddlebrown",9127187).set("salmon",16416882).set("sandybrown",16032864).set("seagreen",3050327).set("seashell",16774638).set("sienna",10506797).set("silver",12632256).set("skyblue",8900331).set("slateblue",6970061).set("slategray",7372944).set("slategrey",7372944).set("snow",16775930).set("springgreen",65407).set("steelblue",4620980).set("tan",13808780).set("teal",32896).set("thistle",14204888).set("tomato",16737095).set("turquoise",4251856).set("violet",15631086).set("wheat",16113331).set("white",16777215).set("whitesmoke",16119285).set("yellow",16776960).set("yellowgreen",10145074),P=f.prototype=new i;P.brighter=function(e){return e=null==e?$:Math.pow($,e),new f(this.h,this.s,this.l*e)},P.darker=function(e){return e=null==e?S:Math.pow(S,e),new f(this.h,this.s,this.l*e)},P.rgb=function(){var e=this.h,t=isNaN(this.h)||isNaN(this.s)?0:this.s,s=this.l,n=.5>=s?s*(1+t):s+t-s*t,r=2*s-n;return new l(m(e>=240?e-240:e+120,r,n),m(e,r,n),m(120>e?e+240:e-120,r,n))};var z=function(e,t,s){if(1===arguments.length)if(e instanceof f)s=e.l,t=e.s,e=e.h;else{if(e instanceof i||(e=C(e)),e instanceof f)return e;e=e.rgb();var n=e.r/255,r=e.g/255,a=e.b/255,o=Math.min(n,r,a),l=Math.max(n,r,a),h=l-o;s=(l+o)/2,h?(t=.5>s?h/(l+o):h/(2-l-o),e=n===l?(r-a)/h+6*(a>r):r===l?(a-n)/h+2:(n-r)/h+4,e*=60):(e=NaN,t=s>0&&1>s?0:e)}return new f(e,t,s)},C=function(e){var t;return e=(e+"").trim().toLowerCase(),(t=/^#([0-9a-f]{3})$/.exec(e))?(t=parseInt(t[1],16),R(t>>8&15|t>>4&240,t>>4&15|240&t,(15&t)<<4|15&t)):(t=/^#([0-9a-f]{6})$/.exec(e))?d(parseInt(t[1],16)):(t=/^rgb\(\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*\)$/.exec(e))?R(t[1],t[2],t[3]):(t=/^rgb\(\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/.exec(e))?R(255*t[1]/100,255*t[2]/100,255*t[3]/100):(t=/^hsl\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/.exec(e))?z(t[1],t[2]/100,t[3]/100):L.has(e)?d(L.get(e)):R(NaN,NaN,NaN)},R=function(e,t,s){return 1===arguments.length&&(e instanceof i||(e=C(e)),e=e.rgb(),s=e.b,t=e.g,e=e.r),new l(e,t,s)},B=Math.PI/180,E=function(e,t,s){if(1===arguments.length)if(e instanceof a)s=e.b,t=e.a,e=e.l;else if(e instanceof r){var n=e.h*B;s=Math.sin(n)*e.c,t=Math.cos(n)*e.c,e=e.l}else{e instanceof l||(e=R(e));var i=g(e.r),o=g(e.g),s=g(e.b),h=c((.4124564*i+.3575761*o+.1804375*s)/I),u=c((.2126729*i+.7151522*o+.072175*s)/F),d=c((.0193339*i+.119192*o+.9503041*s)/T);s=200*(u-d),t=500*(h-u),e=116*u-16}return new a(e,t,s)};v.rgb=function(){return E(this).rgb()};var G=180/Math.PI,J=function(e,t,s){return 1===arguments.length&&(e instanceof r?(s=e.l,t=e.c,e=e.h):(e instanceof a||(e=E(e)),s=e.l,t=Math.sqrt(e.a*e.a+e.b*e.b),e=Math.atan2(e.b,e.a)*G)),new r(e,t,s)},K=function(e,t){e=J(e),t=J(t);var s=e.h,n=e.c,r=e.l,i=t.h-s,a=t.c-n,o=t.l-r;return isNaN(a)&&(a=0,n=isNaN(n)?t.c:n),isNaN(i)?(i=0,s=isNaN(s)?t.h:s):i>180?i-=360:-180>i&&(i+=360),function(t){return e.h=s+i*t,e.h>360?e.h-=360:e.h<0&&(e.h+=360),e.c=n+a*t,e.l=r+o*t,e+""}},O=function(e,t){e=E(e),t=E(t);var s=e.l,n=e.a,r=e.b,i=t.l-s,a=t.a-n,o=t.b-r;return function(t){return e.l=s+i*t,e.a=n+a*t,e.b=r+o*t,e+""}},Q=function(e,t){e=z(e),t=z(t);var s=e.h,n=e.s,r=e.l,i=t.h-s,a=t.s-n,o=t.l-r;return isNaN(a)&&(a=0,n=isNaN(n)?t.s:n),isNaN(i)?(i=0,s=isNaN(s)?t.h:s):i>180?i-=360:-180>i&&(i+=360),function(t){return e.h=s+i*t,e.h>360?e.h-=360:e.h<0&&(e.h+=360),e.s=n+a*t,e.l=r+o*t,e+""}},U=function(e,t){e=R(e),t=R(t);var s=e.r,n=e.g,r=e.b,i=t.r-s,a=t.g-n,o=t.b-r;return function(e){return h(Math.round(s+i*e),Math.round(n+a*e),Math.round(r+o*e))}};e.color=C,e.rgb=R,e.hsl=z,e.lab=E,e.hcl=J,e.interpolateRgb=U,e.interpolateHsl=Q,e.interpolateLab=O,e.interpolateHcl=K,e.timer=N}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<canvas width="960" height="1" style="width:960px;height:500px;"></canvas> | |
<script src="d3.min.js"></script> | |
<script> | |
var canvas = document.querySelector("canvas"), | |
width = canvas.width, | |
context = canvas.getContext("2d"), | |
image = context.createImageData(width, 1); | |
d3.timer(function(elapsed) { | |
var hue = elapsed * .1, | |
interpolate = d3.interpolate(d3.hcl(hue, 50, 95), d3.hcl(hue + 359, 50, 25)); | |
for (var i = 0, j = -1, c; i < width; ++i) { | |
c = d3.rgb(interpolate(i / (width - 1))); | |
image.data[++j] = c.r; | |
image.data[++j] = c.g; | |
image.data[++j] = c.b; | |
image.data[++j] = 255; | |
} | |
context.putImageData(image, 0, 0); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"scripts": { | |
"build": "d3-bundler -- d3.js | uglifyjs -c -m -o d3.min.js" | |
}, | |
"dependencies": { | |
"uglify-js": "2" | |
}, | |
"devDependencies": { | |
"d3-bundler": "~0.2.5", | |
"d3-color": "~0.0.4", | |
"d3-transition": "~0.0.3" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment