(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);