D3 Examples - ColorBrewer sequential single hue scales vs. d3 interpolators.

xxxxxxxxxx
 
<!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="https://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="https://vxlabs.com/2013/10/04/d3-interpolators-vs-colorbrewer-single-hue-sequential-scales/">blog
    post</a>, see <a href="https://bl.ocks.org/cpbotha">my other bl.ocks</a> or link up with <a
    href="https://twitter.com/cpbotha">@cpbotha</a> on twitter.</p>
​
​
<div id="chart">
</div>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script type="text/javascript" src="colorbrewer_interpolate.js"></script>
​
</body>
</html>
​
    