mbostock · January 21, 2025 20:20 · Feb 9, 2016 · Oct 31, 2015 · Jun 11, 2015 · Apr 27, 2014
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
 </style>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script>
 
 var spaces = [

diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script>
 
 var spaces = [

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 D3 supports [CIELAB (Lab) and CIELCH (HCL)](http://en.wikipedia.org/wiki/Lab_color_space) color spaces, which are designed for humans rather than computers.
 
-Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
+Lab and HCL color spaces are special in that the [perceived difference](http://en.wikipedia.org/wiki/Color_difference) between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
 
 You can create Lab or HCL colors in D3 directly using [d3.lab](https://github.com/mbostock/d3/wiki/Colors#d3_lab) or [d3.hcl](https://github.com/mbostock/d3/wiki/Colors#d3_hcl). For example:
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE L\*c\*h\* (HCL)](http://en.wikipedia.org/wiki/CIELUV) color spaces, which are designed for humans rather than computers.
+D3 supports [CIELAB (Lab) and CIELCH (HCL)](http://en.wikipedia.org/wiki/Lab_color_space) color spaces, which are designed for humans rather than computers.
 
 Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
 

diff --git a/index.html b/index.html
@@ -46,8 +46,8 @@
     .attr("class", "space")
     .style("width", width + "px")
     .style("height", height + "px")
-    .style("top", function(d, i) { return y(d.name) + "px"; })
-    .style("margin-left", margin + "px");
+    .style("left", margin + "px")
+    .style("top", function(d, i) { return y(d.name) + "px"; });
 
 space.append("canvas")
     .attr("width", width)

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ var steelblue = d3.lab(52, -4, -32);
 var steelblue = d3.hcl(-97, 32, 52);
 ```
 
-You can also convert from RGB or HSL. This is useful for creating brighter or darker colors with uniform changes in perception:
+You can also convert from other color spaces, such as RGB or HSL. This is useful for creating brighter or darker colors with uniform changes in perception:
 
 ```javascript
 var lightsteelblue = d3.lab("#4682b4").brighter();

diff --git a/README.md b/README.md
@@ -2,12 +2,6 @@ D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space)
 
 Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
 
-For more information:
-
-* [Subtleties of Color](http://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/) by Robert Simmon
-* [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) by Gregor Aisch
-* [How The Rainbow Color Map Misleads](http://eagereyes.org/basics/rainbow-color-map) by Robert Kosara
-
 You can create Lab or HCL colors in D3 directly using [d3.lab](https://github.com/mbostock/d3/wiki/Colors#d3_lab) or [d3.hcl](https://github.com/mbostock/d3/wiki/Colors#d3_hcl). For example:
 
 ```javascript
@@ -31,3 +25,9 @@ var color = d3.scale.linear()
 ```
 
 By using Lab or HCL color interpolation, you can create custom color scales that are comparable in quality to [Colorbrewer](http://colorbrewer2.org/).
+
+For more on this topic:
+
+* [Subtleties of Color](http://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/) by Robert Simmon
+* [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) by Gregor Aisch
+* [How The Rainbow Color Map Misleads](http://eagereyes.org/basics/rainbow-color-map) by Robert Kosara
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE L\*c\*h\* (HCL)](http://en.wikipedia.org/wiki/CIELUV) — color spaces designed for humans rather than computers.
+D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE L\*c\*h\* (HCL)](http://en.wikipedia.org/wiki/CIELUV) color spaces, which are designed for humans rather than computers.
 
 Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE L\*c\*\h* (HCL)](http://en.wikipedia.org/wiki/CIELUV) — color spaces designed for humans rather than computers.
+D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE L\*c\*h\* (HCL)](http://en.wikipedia.org/wiki/CIELUV) — color spaces designed for humans rather than computers.
 
 Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
 

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 }
 
 .space {
-  position: relative;
+  position: absolute;
 }
 
 .space div {
@@ -30,7 +30,7 @@
 
 var y = d3.scale.ordinal()
     .domain(spaces.map(function(d) { return d.name; }))
-    .rangeRoundBands([0, 500], .1);
+    .rangeRoundBands([0, 500], .09);
 
 var margin = y.range()[0],
     width = 960 - margin - margin,
@@ -46,7 +46,7 @@
     .attr("class", "space")
     .style("width", width + "px")
     .style("height", height + "px")
-    .style("margin-top", margin + "px")
+    .style("top", function(d, i) { return y(d.name) + "px"; })
     .style("margin-left", margin + "px");
 
 space.append("canvas")

diff --git a/README.md b/README.md
@@ -1,6 +1,14 @@
-D3 support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 supports [CIE L\*a\*b\* (Lab)](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE L\*c\*\h* (HCL)](http://en.wikipedia.org/wiki/CIELUV) — color spaces designed for humans rather than computers.
 
-You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
+Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called *perceptual uniformity*, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.
+
+For more information:
+
+* [Subtleties of Color](http://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/) by Robert Simmon
+* [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) by Gregor Aisch
+* [How The Rainbow Color Map Misleads](http://eagereyes.org/basics/rainbow-color-map) by Robert Kosara
+
+You can create Lab or HCL colors in D3 directly using [d3.lab](https://github.com/mbostock/d3/wiki/Colors#d3_lab) or [d3.hcl](https://github.com/mbostock/d3/wiki/Colors#d3_hcl). For example:
 
 ```javascript
 var steelblue = d3.lab(52, -4, -32);
@@ -14,12 +22,12 @@ var lightsteelblue = d3.lab("#4682b4").brighter();
 var darksteelblue = d3.hcl("hsl(207, 44%, 49%)").darker();
 ```
 
-Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) and [transitions](https://github.com/mbostock/d3/wiki/Transitions):
+Most importantly, you can use [d3.interpolateLab](https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateLab) or [d3.interpolateHcl](https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateHcl) in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) and [transitions](https://github.com/mbostock/d3/wiki/Transitions):
 
 ```javascript
 var color = d3.scale.linear()
     .range(["steelblue", "brown"])
     .interpolate(d3.interpolateHcl);
 ```
 
-L\*a\*b\* and HCL interpolation is a convenient way to implement color scales that are comparable in quality to [Colorbrewer](http://colorbrewer2.org/).
+By using Lab or HCL color interpolation, you can create custom color scales that are comparable in quality to [Colorbrewer](http://colorbrewer2.org/).
diff --git a/index.html b/index.html
@@ -6,60 +6,72 @@
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
+.space {
+  position: relative;
+}
+
+.space div {
+  position: absolute;
+  top: 0;
+  left: 20px;
+}
+
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
-var interpolators = {
-  "HSL": d3.interpolateHsl,
-  "HCL": d3.interpolateHcl,
-  "Lab": d3.interpolateLab,
-  "RGB": d3.interpolateRgb
-};
-
-var width = 960,
-    height = 500;
+var spaces = [
+  {name: "HSL", interpolate: d3.interpolateHsl},
+  {name: "HCL", interpolate: d3.interpolateHcl},
+  {name: "Lab", interpolate: d3.interpolateLab},
+  {name: "RGB", interpolate: d3.interpolateRgb}
+];
 
 var y = d3.scale.ordinal()
-    .domain(d3.keys(interpolators))
-    .rangeRoundBands([0, height], .1);
+    .domain(spaces.map(function(d) { return d.name; }))
+    .rangeRoundBands([0, 500], .1);
 
-var values = d3.range(960 - 28);
-
-var x = d3.scale.ordinal()
-    .domain(values)
-    .rangeRoundBands([14, width - 14]);
+var margin = y.range()[0],
+    width = 960 - margin - margin,
+    height = y.rangeBand();
 
 var color = d3.scale.linear()
-    .domain([0, values.length - 1])
-    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"]);
-
-var svg = d3.select("body").append("svg")
-    .attr("width", width)
-    .attr("height", height);
+    .domain([0, width])
+    .range(["hsl(62,100%,90%)", "hsl(222,30%,20%)"]);
 
-var g = svg.selectAll("g")
-    .data(d3.entries(interpolators))
-  .enter().append("g")
-    .attr("transform", function(d) { return "translate(0," + y(d.key) + ")"; });
+var space = d3.select("body").selectAll(".space")
+    .data(spaces)
+  .enter().append("div")
+    .attr("class", "space")
+    .style("width", width + "px")
+    .style("height", height + "px")
+    .style("margin-top", margin + "px")
+    .style("margin-left", margin + "px");
 
-g.each(function(d) {
-  color.interpolate(d.value);
+space.append("canvas")
+    .attr("width", width)
+    .attr("height", 1)
+    .style("width", width + "px")
+    .style("height", height + "px")
+    .each(render);
 
-  d3.select(this).selectAll("rect")
-    .data(values)
-  .enter().append("rect")
-    .attr("x", x)
-    .attr("width", x.rangeBand())
-    .attr("height", y.rangeBand)
-    .style("fill", color);
-});
+space.append("div")
+    .style("line-height", height + "px")
+    .text(function(d) { return d.name; });
 
-g.append("text")
-    .attr("x", 28)
-    .attr("y", y.rangeBand() / 2)
-    .attr("dy", ".35em")
-    .text(function(d) { return d.key; });
+function render(d) {
+  var context = this.getContext("2d"),
+      image = context.createImageData(width, 1);
+  color.interpolate(d.interpolate);
+  for (var i = 0, j = -1, c; i < width; ++i) {
+    c = d3.rgb(color(i));
+    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>
+</script>
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
 

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
 var interpolators = {

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ var steelblue = d3.lab(52, -4, -32);
 var steelblue = d3.hcl(-97, 32, 52);
 ```
 
-You can also convert from RGB or HSL. This is useful for creating brighter or darker colors, again with uniform changes in perception:
+You can also convert from RGB or HSL. This is useful for creating brighter or darker colors with uniform changes in perception:
 
 ```javascript
 var lightsteelblue = d3.lab("#4682b4").brighter();

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motiviated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motiviated colors spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motiviated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These perceptually-motiviated colors spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
 

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 
 </style>
 <body>
-<script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script>
+<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
 <script>
 
 var interpolators = {
@@ -62,4 +62,4 @@
     .attr("dy", ".35em")
     .text(function(d) { return d.key; });
 
-</script>
+</script>
diff --git a/README.md b/README.md
@@ -1,17 +1,17 @@
 D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
-You can create L\*a\*b\* or HCL colors using d3.lab or d3.hcl. For example:
+You can create L\*a\*b\* or HCL colors directly using d3.lab or d3.hcl. For example:
 
 ```javascript
 var steelblue = d3.lab(52, -4, -32);
 var steelblue = d3.hcl(-97, 32, 52);
 ```
 
-You can also convert from RGB or HSL:
+You can also convert from RGB or HSL. This is useful for creating brighter or darker colors, again with uniform changes in perception:
 
 ```javascript
-var steelblue = d3.lab("#4682b4");
-var steelblue = d3.hcl("hsl(207, 44%, 49%)");
+var lightsteelblue = d3.lab("#4682b4").brighter();
+var darksteelblue = d3.hcl("hsl(207, 44%, 49%)").darker();
 ```
 
 Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) and [transitions](https://github.com/mbostock/d3/wiki/Transitions):

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually-uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors using d3.lab or d3.hcl. For example:
 

diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ var steelblue = d3.lab("#4682b4");
 var steelblue = d3.hcl("hsl(207, 44%, 49%)");
 ```
 
-Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) or with [transitions](https://github.com/mbostock/d3/wiki/Transitions):
+Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) and [transitions](https://github.com/mbostock/d3/wiki/Transitions):
 
 ```javascript
 var color = d3.scale.linear()

diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ var steelblue = d3.lab("#4682b4");
 var steelblue = d3.hcl("hsl(207, 44%, 49%)");
 ```
 
-Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales):
+Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) or with [transitions](https://github.com/mbostock/d3/wiki/Transitions):
 
 ```javascript
 var color = d3.scale.linear()

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar. L\*a\*b\* and HCL, in contrast, are perceptually-uniform color spaces. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L\*a\*b\* and HCL, in contrast, are perceptually-uniform. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 You can create L\*a\*b\* or HCL colors using d3.lab or d3.hcl. For example:
 

diff --git a/README.md b/README.md
@@ -1,3 +1,25 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind: unlike RGB and HSL interpolation which can cause banding, interpolating in L\*a\*b\* or HCL results in perceptually-uniform changes. For more on color spaces, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar. L\*a\*b\* and HCL, in contrast, are perceptually-uniform color spaces. For more information, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
-Create L\*a\*b\* or HCL colors using d3.lab or d3.hcl.
+You can create L\*a\*b\* or HCL colors using d3.lab or d3.hcl. For example:
+
+```javascript
+var steelblue = d3.lab(52, -4, -32);
+var steelblue = d3.hcl(-97, 32, 52);
+```
+
+You can also convert from RGB or HSL:
+
+```javascript
+var steelblue = d3.lab("#4682b4");
+var steelblue = d3.hcl("hsl(207, 44%, 49%)");
+```
+
+Best of all, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with [quantitative scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales):
+
+```javascript
+var color = d3.scale.linear()
+    .range(["steelblue", "brown"])
+    .interpolate(d3.interpolateHcl);
+```
+
+L\*a\*b\* and HCL interpolation is a convenient way to implement color scales that are comparable in quality to [Colorbrewer](http://colorbrewer2.org/).
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind: unlike RGB and HSL, interpolating in L\*a\*b\* or HCL results in perceptually-uniform changes in color. For more on color spaces, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind: unlike RGB and HSL interpolation which can cause banding, interpolating in L\*a\*b\* or HCL results in perceptually-uniform changes. For more on color spaces, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 Create L\*a\*b\* or HCL colors using d3.lab or d3.hcl.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind: unlike RGB and HSL, interpolating in L\*a\*\b\* or HCL results in perceptually-uniform changes in color. For more on color spaces, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind: unlike RGB and HSL, interpolating in L\*a\*b\* or HCL results in perceptually-uniform changes in color. For more on color spaces, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
 Create L\*a\*b\* or HCL colors using d3.lab or d3.hcl.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-The above gradients compare interpolation in RGB, HSL, [CIE Lab](http://en.wikipedia.org/wiki/Lab_color_space) and [CIE LCh](http://en.wikipedia.org/wiki/CIELUV) color spaces. For more on color spaces, see Gregor Aisch’s post, [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/).
+D3 2.10.0 adds support for CIE [L\*a\*b\*](http://en.wikipedia.org/wiki/Lab_color_space) and [HCL](http://en.wikipedia.org/wiki/CIELUV). These colors spaces are designed with perception in mind: unlike RGB and HSL, interpolating in L\*a\*\b\* or HCL results in perceptually-uniform changes in color. For more on color spaces, see Gregor Aisch’s post [How To Avoid Equidistant HSV Colors](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) and Drew Skau’s post [Dear NASA: No More Rainbow Color Scales, Please](http://blog.visual.ly/rainbow-color-scales/).
 
-This example is built with [D3](http://d3js.org). Code and documentation are available as the [d3.cie plugin](https://github.com/d3/d3-plugins/tree/master/cie).
+Create L\*a\*b\* or HCL colors using d3.lab or d3.hcl.
diff --git a/cie.js b/cie.js
@@ -1,155 +0,0 @@
-(function(d3) {
-  var cie = d3.cie = {};
-
-  cie.lab = function(l, a, b) {
-    return arguments.length === 1
-        ? (l instanceof Lab ? lab(l.l, l.a, l.b)
-        : (l instanceof Lch ? lch_lab(l.l, l.c, l.h)
-        : rgb_lab((l = d3.rgb(l)).r, l.g, l.b)))
-        : lab(+l, +a, +b);
-  };
-
-  cie.lch = function(l, c, h) {
-    return arguments.length === 1
-        ? (l instanceof Lch ? lch(l.l, l.c, l.h)
-        : (l instanceof Lab ? lab_lch(l.l, l.a, l.b)
-        : lab_lch((l = rgb_lab((l = d3.rgb(l)).r, l.g, l.b)).l, l.a, l.b)))
-        : lch(+l, +c, +h);
-  };
-
-  cie.interpolateLab = function(a, b) {
-    a = cie.lab(a);
-    b = cie.lab(b);
-    var al = a.l,
-        aa = a.a,
-        ab = a.b,
-        bl = b.l - al,
-        ba = b.a - aa,
-        bb = b.b - ab;
-    return function(t) {
-      return lab_rgb(al + bl * t, aa + ba * t, ab + bb * t) + "";
-    };
-  };
-
-  cie.interpolateLch = function(a, b) {
-    a = cie.lch(a);
-    b = cie.lch(b);
-    var al = a.l,
-        ac = a.c,
-        ah = a.h,
-        bl = b.l - al,
-        bc = b.c - ac,
-        bh = b.h - ah;
-    if (bh > 180) bh -= 360; else if (bh < -180) bh += 360; // shortest path
-    return function(t) {
-      return lch_lab(al + bl * t, ac + bc * t, ah + bh * t) + "";
-    };
-  };
-
-  function lab(l, a, b) {
-    return new Lab(l, a, b);
-  }
-
-  function Lab(l, a, b) {
-    this.l = l;
-    this.a = a;
-    this.b = b;
-  }
-
-  Lab.prototype.brighter = function(k) {
-    return lab(Math.min(100, this.l + K * (arguments.length ? k : 1)), this.a, this.b);
-  };
-
-  Lab.prototype.darker = function(k) {
-    return lab(Math.max(0, this.l - K * (arguments.length ? k : 1)), this.a, this.b);
-  };
-
-  Lab.prototype.rgb = function() {
-    return lab_rgb(this.l, this.a, this.b);
-  };
-
-  Lab.prototype.toString = function() {
-    return this.rgb() + "";
-  };
-
-  function lch(l, c, h) {
-    return new Lch(l, c, h);
-  }
-
-  function Lch(l, c, h) {
-    this.l = l;
-    this.c = c;
-    this.h = h;
-  }
-
-  Lch.prototype.brighter = function(k) {
-    return lch(Math.min(100, this.l + K * (arguments.length ? k : 1)), this.c, this.h);
-  };
-
-  Lch.prototype.darker = function(k) {
-    return lch(Math.max(0, this.l - K * (arguments.length ? k : 1)), this.c, this.h);
-  };
-
-  Lch.prototype.rgb = function() {
-    return lch_lab(this.l, this.c, this.h).rgb();
-  };
-
-  Lch.prototype.toString = function() {
-    return this.rgb() + "";
-  };
-
-  // Corresponds roughly to RGB brighter/darker
-  var K = 18;
-
-  // D65 standard referent
-  var X = 0.950470, Y = 1, Z = 1.088830;
-
-  function lab_rgb(l, a, b) {
-    var y = (l + 16) / 116, x = y + a / 500, z = y - b / 200;
-    x = lab_xyz(x) * X;
-    y = lab_xyz(y) * Y;
-    z = lab_xyz(z) * Z;
-    return d3.rgb(
-      xyz_rgb( 3.2404542 * x - 1.5371385 * y - 0.4985314 * z),
-      xyz_rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z),
-      xyz_rgb( 0.0556434 * x - 0.2040259 * y + 1.0572252 * z)
-    );
-  }
-
-  function rgb_lab(r, g, b) {
-    r = rgb_xyz(r);
-    g = rgb_xyz(g);
-    b = rgb_xyz(b);
-    var x = xyz_lab((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / X),
-        y = xyz_lab((0.2126729 * r + 0.7151522 * g + 0.0721750 * b) / Y),
-        z = xyz_lab((0.0193339 * r + 0.1191920 * g + 0.9503041 * b) / Z);
-    return lab(116 * y - 16, 500 * (x - y), 200 * (y - z));
-  }
-
-  function lab_lch(l, a, b) {
-    var c = Math.sqrt(a * a + b * b),
-        h = Math.atan2(b, a) / Math.PI * 180;
-    return lch(l, c, h);
-  }
-
-  function lch_lab(l, c, h) {
-    h = h * Math.PI / 180;
-    return lab(l, Math.cos(h) * c, Math.sin(h) * c);
-  }
-
-  function lab_xyz(x) {
-    return x > 0.206893034 ? x * x * x : (x - 4 / 29) / 7.787037;
-  }
-
-  function xyz_lab(x) {
-    return x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787037 * x + 4 / 29;
-  }
-
-  function xyz_rgb(r) {
-    return Math.round(255 * (r <= 0.00304 ? 12.92 * r : 1.055 * Math.pow(r, 1 / 2.4) - 0.055));
-  }
-
-  function rgb_xyz(r) {
-    return (r /= 255) <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
-  }
-})(d3);

diff --git a/index.html b/index.html
@@ -8,14 +8,13 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js?2.9.5"></script>
-<script src="cie.js"></script>
+<script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script>
 <script>
 
 var interpolators = {
   "HSL": d3.interpolateHsl,
-  "LCh": d3.cie.interpolateLch,
-  "Lab": d3.cie.interpolateLab,
+  "HCL": d3.interpolateHcl,
+  "Lab": d3.interpolateLab,
   "RGB": d3.interpolateRgb
 };
No results found