HCL decomposition: HSL rainbow

This example shows a rainbow scale and its decomposition in the Hue-Chroma-Lightness color space (aka HCL or CIELCH).

The HCL decomposition clearly shows that lightness and chroma are not constant, and change in a non-linear, erratic fashion, making this scale a bad choice for encoding linear or categorical data.

For more details, see also this example on HCL and this analysis of a rainbow color scale by Mike Bostock.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="HCL decomposition: HSL rainbow" />
    <title>HCL decomposition: HSL rainbow</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <svg height="500" width="960">
    <text class="label" x="16" y="198" dy="0.35em">H</text>
    <text class="label" x="16" y="295" dy="0.35em">C</text>
    <text class="label" x="16" y="420" dy="0.35em">L</text>
  </svg>
  
  <script src="index.js"></script>
</body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

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