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

  height = 468;

  N = 6;

  SPREAD = 30;

  OFFSET = -10;

  palettes = d3.range(N).map(function(n) {
    return d3.range(256).map(function(i) {
      return d3.hcl(OFFSET + 360 / N * n + SPREAD * i / 256, 50 - Math.pow(128 - i, 2) / 400, 5 + 90 * i / 256);
    });
  });

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