Perceptual color libs compared by nitaku

index.js

var SIZE, draw_space, samples, svg;

svg = d3.select('svg');

samples = d3.range(0, 36).map(function(h) {
  return d3.range(0, 10).map(function(c) {
    return {
      h: h * 10,
      c: (10 - c) * 10,
      l: 50
    };
  });
});

SIZE = 10;

draw_space = function(color_function) {
  var cells, cols;
  cols = svg.selectAll('.col').data(samples);
  cols.enter().append('g').attr({
    "class": 'col',
    transform: function(d, i) {
      return "translate(" + (SIZE * i) + ", 0)";
    }
  });
  cells = cols.selectAll('.cell').data(function(col) {
    return col;
  });
  return cells.enter().append('rect').attr({
    "class": 'cell',
    width: SIZE,
    height: SIZE,
    x: 0,
    y: function(d, i) {
      return i * SIZE;
    },
    fill: color_function
  });
};

draw_space(function(d) {
  return d3.hcl(d.h, d.c, d.l);
});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Perceptual color libs compared</title>
  <meta name="description" content="Perceptual color libs compared">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="https://raw.githubusercontent.com/husl-colors/husl/master/husl.js"></script>
<style id="jsbin-css">
.cell {
    shape-rendering: crispEdges;
}
</style>
</head>
<body>
  <svg width="960px" height="500px"></svg>
<script id="jsbin-javascript">
var SIZE, draw_space, samples, svg;

svg = d3.select('svg');

samples = d3.range(0, 36).map(function(h) {
  return d3.range(0, 10).map(function(c) {
    return {
      h: h * 10,
      c: (10 - c) * 10,
      l: 50
    };
  });
});

SIZE = 10;

draw_space = function(color_function) {
  var cells, cols;
  cols = svg.selectAll('.col').data(samples);
  cols.enter().append('g').attr({
    "class": 'col',
    transform: function(d, i) {
      return "translate(" + (SIZE * i) + ", 0)";
    }
  });
  cells = cols.selectAll('.cell').data(function(col) {
    return col;
  });
  return cells.enter().append('rect').attr({
    "class": 'cell',
    width: SIZE,
    height: SIZE,
    x: 0,
    y: function(d, i) {
      return i * SIZE;
    },
    fill: color_function
  });
};

draw_space(function(d) {
  return d3.hcl(d.h, d.c, d.l);
});

</script>


<script id="jsbin-source-css" type="text/css">.cell {
    shape-rendering: crispEdges;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">svg = d3.select('svg')

samples = d3.range(0,36).map (h) -> d3.range(0, 10).map (c) -> {h: h*10, c: (10-c)*10, l: 50}

SIZE = 10

draw_space = (color_function) ->
  cols = svg.selectAll('.col')
    .data(samples)
    
  cols.enter().append('g')
    .attr
      class: 'col'
      transform: (d,i) -> "translate(#{SIZE*i}, 0)"
    
  cells = cols.selectAll('.cell')
    .data((col) -> col)
    
  cells.enter().append('rect')
    .attr
      class: 'cell'
      width: SIZE
      height: SIZE
      x: 0
      y: (d,i) -> i*SIZE
      fill: color_function
            
draw_space((d) -> d3.hcl(d.h,d.c,d.l))</script></body>
</html>

index.css

.cell {
    shape-rendering: crispEdges;
}