nitaku/index.css

## index.css
.cell {
    shape-rendering: crispEdges;
}

## 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="http://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.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);
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Perceptual color libs compared</title>
	<meta name="description" content="Perceptual color libs compared">
	<script src="http://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: h10, 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>