Permalink
Browse files

Add d3.interpolateHsl.

This allows scale interpolation in HSL space. For example:

    var fill = d3.scale.linear()
        .interpolate(d3.interpolateHsl)
        .domain([0, 100])
        .range([d3.hsl(180, .5, 1), d3.hsl(180, .5, 0)]);

You could approximate this in previous versions using d3.interpolateString, but
the new interpolation method is slightly faster and also provides backwards-
compatibility for browsers that only understand RGB.
  • Loading branch information...
1 parent 62ef98e commit 1d9ed5ae72ee07b3ee5e3acd9301e5912dc6e1f1 @mbostock mbostock committed Feb 27, 2011
Showing with 76 additions and 46 deletions.
  1. +16 −1 d3.js
  2. +44 −44 d3.min.js
  3. +1 −1 src/core/core.js
  4. +15 −0 src/core/interpolate.js
View
@@ -1,4 +1,4 @@
-(function(){d3 = {version: "1.2.1"}; // semver
+(function(){d3 = {version: "1.3.0"}; // semver
if (!Date.now) Date.now = function() {
return +new Date();
};
@@ -588,6 +588,21 @@ d3.interpolateRgb = function(a, b) {
};
};
+// interpolates HSL space, but outputs RGB string (for compatibility)
+d3.interpolateHsl = function(a, b) {
+ a = d3.hsl(a);
+ b = d3.hsl(b);
+ var h0 = a.h,
+ s0 = a.s,
+ l0 = a.l,
+ h1 = b.h - h0,
+ s1 = b.s - s0,
+ l1 = b.l - l0;
+ return function(t) {
+ return d3_hsl_rgb(h0 + h1 * t, s0 + s1 * t, l0 + l1 * t).toString();
+ };
+};
+
d3.interpolateArray = function(a, b) {
var x = [],
c = [],
Oops, something went wrong. Retry.

0 comments on commit 1d9ed5a

Please sign in to comment.