2 multihue diverging color scales by nitaku

index.js

(function() {
  var N, bands, height, palettes, svg;

  height = 468;

  N = 2;

  palettes = [
    d3.range(128).map(function(i) {
      return d3.hcl(-90 + 120 * i / 128, 25 - Math.pow(64 - i, 2) / 200, 10 + 90 * i / 128);
    }).concat(d3.range(128).map(function(i) {
      return d3.hcl(90 + 120 * (128 - i) / 128, 25 - Math.pow(64 - i, 2) / 200, 10 + 90 * i / 128);
    }).reverse()), d3.range(128).map(function(i) {
      return d3.hcl(90 - 90 + 120 * i / 128, 25 - Math.pow(64 - i, 2) / 200, 10 + 90 * i / 128);
    }).concat(d3.range(128).map(function(i) {
      return d3.hcl(90 + 90 + 120 * (128 - i) / 128, 25 - Math.pow(64 - i, 2) / 200, 10 + 90 * i / 128);
    }).reverse())
  ];

  svg = d3.select('svg');

  bands = svg.selectAll('.palette').data(palettes).enter().append('g').attr({
    "class": 'palette',
    transform: function(d, n) {
      return "translate(0," + (height / N * n) + ")";
    }
  });

  bands.selectAll('.band').data(function(palette) {
    return palette;
  }).enter().append('rect').attr({
    "class": 'band',
    x: function(d, i) {
      return 32 + 3.5 * i;
    },
    y: 21,
    width: 3.5,
    height: height / N - 10,
    fill: function(d) {
      return d;
    }
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="2 multihue diverging color scales" />
    <title>2 multihue diverging color scales</title>
    <link rel="stylesheet" href="index.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <svg height="500" width="960"></svg>
  <script src="index.js"></script>
</body>
</html>

index.coffee

height = 468
N = 2

palettes = [
  d3.range(128).map( (i) ->
    return d3.hcl(-90+120*i/128, 25-Math.pow(64-i,2)/200, 10+90*i/128)
  ).concat( d3.range(128).map( (i) ->
    return d3.hcl(90+120*(128-i)/128, 25-Math.pow(64-i,2)/200, 10+90*i/128)
  ).reverse() ),
  d3.range(128).map( (i) ->
    return d3.hcl(90-90+120*i/128, 25-Math.pow(64-i,2)/200, 10+90*i/128)
  ).concat( d3.range(128).map( (i) ->
    return d3.hcl(90+90+120*(128-i)/128, 25-Math.pow(64-i,2)/200, 10+90*i/128)
  ).reverse() )
]

svg = d3.select('svg')

bands = svg.selectAll('.palette')
    .data(palettes)
  .enter().append('g')
    .attr
      class: 'palette'
      transform: (d,n) -> "translate(0,#{height/N*n})"

bands.selectAll('.band')
    .data((palette) -> palette)
  .enter().append('rect')
    .attr
      class: 'band'
      x: (d,i) -> 32+3.5*i
      y: 21
      width: 3.5
      height: height/N-10
      fill: (d) -> d

index.css

body {
    background: #272822;
    margin: 0;
    padding: 0;
}
svg {
    background: white;
}
.label {
  text-anchor: middle;
  font-size: 24px;
}
rect {
  shape-rendering: crispEdges;
}
path {
  fill: none;
}
path.hue {
  stroke: white;
  stroke-width: 1;
}
path.chroma {
  stroke: #FF3D00;
  stroke-width: 1;
}
path.luminance {
  stroke: black;
  stroke-width: 0.6;
}

.axis .domain, .axis .tick line {
  stroke: black;
  shape-rendering: crispEdges;
}
.axis {
  font-size: 8px;
  font-family: sans-serif;
}