Lab* color space

The L*a*b* color space with a range of ±100 for a* and b* values and a value of 60 for Lightness.

forked from lucguillemot's block: Lab* color space

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
</head>
<body>
	<div id="color-space"></div>

var canvas_width = 960,
			canvas_height = 500;

var labScaleA = d3.scaleLinear()
				.domain([0, canvas_width])
				.range([-100, 100]),
			labScaleB = d3.scaleLinear()
				.domain([0, canvas_height])
				.range([-100, 100]);

var canvas =  d3.select("#color-space")
			.append("canvas")
			.attr("width", canvas_width)
			.attr("height", canvas_height)
			.style("width", canvas_width + "px")
			.style("height", canvas_height + "px")
			.node(),

context = canvas.getContext("2d"),
		image = context.createImageData(canvas_width, canvas_height);

var y = -1,
			i = -1;

while (++y < canvas_height) {
			for (var x = 0, c; x < canvas_width; ++x) {
				var a = Math.round(labScaleA(x)),
					b = Math.round(labScaleB(y));
				c = d3.lab(60, a, b).rgb();
				image.data[++i] = c.r;
			    image.data[++i] = c.g;
			    image.data[++i] = c.b;
			    image.data[++i] = 255;
			}
		}

context.putImageData(image, 0, 0);
	</script>
</body>
</html>

https://d3js.org/d3.v4.min.js