D3 2.10.0 adds support for CIE L*a*b* and HCL. 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 and Drew Skau’s post Dear NASA: No More Rainbow Color Scales, Please.
Create L*a*b* or HCL colors using d3.lab or d3.hcl.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script> | |
| <script> | |
| var interpolators = { | |
| "HSL": d3.interpolateHsl, | |
| "HCL": d3.interpolateHcl, | |
| "Lab": d3.interpolateLab, | |
| "RGB": d3.interpolateRgb | |
| }; | |
| var width = 960, | |
| height = 500; | |
| var y = d3.scale.ordinal() | |
| .domain(d3.keys(interpolators)) | |
| .rangeRoundBands([0, height], .1); | |
| var values = d3.range(960 - 28); | |
| var x = d3.scale.ordinal() | |
| .domain(values) | |
| .rangeRoundBands([14, width - 14]); | |
| 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); | |
| var g = svg.selectAll("g") | |
| .data(d3.entries(interpolators)) | |
| .enter().append("g") | |
| .attr("transform", function(d) { return "translate(0," + y(d.key) + ")"; }); | |
| g.each(function(d) { | |
| color.interpolate(d.value); | |
| d3.select(this).selectAll("rect") | |
| .data(values) | |
| .enter().append("rect") | |
| .attr("x", x) | |
| .attr("width", x.rangeBand()) | |
| .attr("height", y.rangeBand) | |
| .style("fill", color); | |
| }); | |
| g.append("text") | |
| .attr("x", 28) | |
| .attr("y", y.rangeBand() / 2) | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.key; }); | |
| </script> |