D3 Examples - HSL colors in D3.js v2

xxxxxxxxxx
 
<html>
  <head>
    <title>HSL Hues</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
  </head>
<body>
  <p>HSL Hues: 0 .. 360 </p>
  <svg id="hsl-hue1"></svg>
  <p>HSL Hues: 0 .. 256 </p>
  <svg id="hsl-hue2"></svg>
​
  <script>
​
  function hslHues(id, n) {
    var d = [],
        i;
​
    for (i = 0; i < n; i++) {
      d[i] = d3.hsl(i, 1.0, 0.5);
    }
​
    var svg = d3.select(id)
      .attr("width", 900)
      .attr("height", 30);
​
    var w = 900 / n;
​
    svg.selectAll("rect")
          .data(d)
          .enter().append("rect")
             .attr("fill", function(d) {return d;})
             .attr("x", function(d, i) {return i * w;})
             .attr("y", 0)
             .attr("width", w)
             .attr("height", 50);
​
  }
​
  hslHues("#hsl-hue1", 360);
  hslHues("#hsl-hue2", 256);
​
  </script>
</body>
</html>
    