How to use HCL in d3.js by gka

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 14px;
}

div {
   width: 60px;
   height: 60px;
   float: left;
   margin-right: 14px;
}

</style>
<body>
<script src="//d3js.org/d3.v2.min.js?2.9.5"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/cie/cie.js"></script>
<script>

var data = [0,1,2,3,4,5,6,7,8,9,10];

var color = d3.scale.linear()
   .domain([0,10])  // min/max of data
   .range(["#FDFFCB", "#232942"])
   .interpolate(d3.cie.interpolateLch);

d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .style("background", function(d) { return color(d) });

</script>
</html>