cpbotha/colorbrewer_interpolate.js

## colorbrewer_interpolate.js
// comparison of different d3 colour interpolators with
// colorbrewer sequential single-hue scales
//
// -- http://twitter.com/cpbotha

var numC = 9;
var data = d3.range(numC);

var showColourInterpolations = function(name, cbMap) {
    var rectHeight = 50,
        w = 960;

    var chart = d3.select("#chart");
    chart.append('h4').text(name);

    var svg=chart.append("svg");

    var x = d3.scale.ordinal()
        .domain(data)
        .rangeRoundBands([0, w], 0.1);

    var colour = d3.scale.linear()
        .domain(d3.extent(data))
        .range([cbMap[numC][0], cbMap[numC][numC - 1]]);


    var addScale = function (y, colourFunc, name) {
        svg.append('text').attr("x", x(0)).attr("y", y-15).text(name);

        var textrectg = svg.append('g').selectAll("g")
            .data(data)
        .enter().append("g")
            .attr("transform", function(d) { return "translate(" + x(d) + "," + y + ")"; });

        textrectg.append("rect")
                //.attr("x", function(d) {return x(d); })
                //.attr("y", y)
                .attr("width", x.rangeBand())
                .attr("height", rectHeight)
                .attr("fill", colourFunc );

        textrectg.append("text")
                .text(colourFunc);
    }

    var colourBrewer = function (d) {
        return cbMap[numC][d];
    }
    // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateLab
    var colourLab = colour.copy().interpolate(d3.interpolateLab);
    // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateHcl
    var colourHcl = colour.copy().interpolate(d3.interpolateHcl);
    // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateRgb
    var colourRgb = colour.copy().interpolate(d3.interpolateRgb);
    // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateHsl
    var colourHsl = colour.copy().interpolate(d3.interpolateHsl);

    var cfuncs = [['brewer', colourBrewer],
              ['L*a*b*', colourLab],
              ['HCL', colourHcl],
              ['RGB', colourRgb],
              ['HSL', colourHsl]];

    for (var i = 0; i < cfuncs.length; i++) {
        addScale(30 + i * (rectHeight + 30), cfuncs[i][1], cfuncs[i][0]);
    }
}

mapNames = ['Blues', 'Greens', 'Oranges', 'Purples', 'Reds'];
mapNames.forEach(function (mapName) {showColourInterpolations(mapName, colorbrewer[mapName]); });

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Comparison of d3 colour interpolators with colorbrewer sequential single hue scales</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}
</style>

<body>
    <h3>Comparison of d3 colour interpolators with colorbrewer sequential single hue scales</h3>

    <p><a href="http://colorbrewer2.org/">ColorBrewer</a> is a fantastic
    resource for great colour schemes. However, its schemes contain up to a
    maximum of 9 colours. Sometimes, one would like to have a similar looking
    scheme available for continuous data.</p>

    <p>I wanted to see which of d3's interpolators yielded linear scales that
    were visually closest to the ColorBrewer ones. For all of the single hue
    sequential scales, the HSL interpolator <i>seems</i> to be visually
    closest. The perceptually more responsible interpolators, namely HCL and
    L*a*b*, yield results that are visually less similar.</p>

    <p>(Yes, of course you could just use d3.scale.quantize if you wanted your
    linear domain to map to the colorbrewer colours, but I wanted to see a
    linear range as well.)</p>

    <p>Comment on the <a
    href="http://vxlabs.com/2013/10/04/d3-interpolators-vs-colorbrewer-single-hue-sequential-scales/">blog
    post</a>, see <a href="http://bl.ocks.org/cpbotha">my other bl.ocks</a> or link up with <a
    href="http://twitter.com/cpbotha">@cpbotha</a> on twitter.</p>


<div id="chart">
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script type="text/javascript" src="colorbrewer_interpolate.js"></script>

</body>
</html>
	// comparison of different d3 colour interpolators with
	// colorbrewer sequential single-hue scales
	//
	// -- http://twitter.com/cpbotha

	var numC = 9;
	var data = d3.range(numC);

	var showColourInterpolations = function(name, cbMap) {
	var rectHeight = 50,
	w = 960;

	var chart = d3.select("#chart");
	chart.append('h4').text(name);

	var svg=chart.append("svg");

	var x = d3.scale.ordinal()
	.domain(data)
	.rangeRoundBands([0, w], 0.1);

	var colour = d3.scale.linear()
	.domain(d3.extent(data))
	.range([cbMap[numC][0], cbMap[numC][numC - 1]]);



	var addScale = function (y, colourFunc, name) {
	svg.append('text').attr("x", x(0)).attr("y", y-15).text(name);

	var textrectg = svg.append('g').selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function(d) { return "translate(" + x(d) + "," + y + ")"; });

	textrectg.append("rect")
	//.attr("x", function(d) {return x(d); })
	//.attr("y", y)
	.attr("width", x.rangeBand())
	.attr("height", rectHeight)
	.attr("fill", colourFunc );

	textrectg.append("text")
	.text(colourFunc);
	}

	var colourBrewer = function (d) {
	return cbMap[numC][d];
	}
	// https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateLab
	var colourLab = colour.copy().interpolate(d3.interpolateLab);
	// https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateHcl
	var colourHcl = colour.copy().interpolate(d3.interpolateHcl);
	// https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateRgb
	var colourRgb = colour.copy().interpolate(d3.interpolateRgb);
	// https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolateHsl
	var colourHsl = colour.copy().interpolate(d3.interpolateHsl);

	var cfuncs = [['brewer', colourBrewer],
	['Lab*', colourLab],
	['HCL', colourHcl],
	['RGB', colourRgb],
	['HSL', colourHsl]];

	for (var i = 0; i < cfuncs.length; i++) {
	addScale(30 + i * (rectHeight + 30), cfuncs[i][1], cfuncs[i][0]);
	}
	}

	mapNames = ['Blues', 'Greens', 'Oranges', 'Purples', 'Reds'];
	mapNames.forEach(function (mapName) {showColourInterpolations(mapName, colorbrewer[mapName]); });
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Comparison of d3 colour interpolators with colorbrewer sequential single hue scales</title>
	</head>

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}
	</style>

	<body>
	<h3>Comparison of d3 colour interpolators with colorbrewer sequential single hue scales</h3>

	<p><a href="http://colorbrewer2.org/">ColorBrewer</a> is a fantastic
	resource for great colour schemes. However, its schemes contain up to a
	maximum of 9 colours. Sometimes, one would like to have a similar looking
	scheme available for continuous data.</p>

	<p>I wanted to see which of d3's interpolators yielded linear scales that
	were visually closest to the ColorBrewer ones. For all of the single hue
	sequential scales, the HSL interpolator <i>seems</i> to be visually
	closest. The perceptually more responsible interpolators, namely HCL and
	Lab*, yield results that are visually less similar.</p>

	<p>(Yes, of course you could just use d3.scale.quantize if you wanted your
	linear domain to map to the colorbrewer colours, but I wanted to see a
	linear range as well.)</p>

	<p>Comment on the <a
	href="http://vxlabs.com/2013/10/04/d3-interpolators-vs-colorbrewer-single-hue-sequential-scales/">blog
	post</a>, see <a href="http://bl.ocks.org/cpbotha">my other bl.ocks</a> or link up with <a
	href="http://twitter.com/cpbotha">@cpbotha</a> on twitter.</p>


	<div id="chart">
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
	<script type="text/javascript" src="colorbrewer_interpolate.js"></script>

	</body>
	</html>