block by armollica 03ac035ee46dd63ab7db

Munsell Color

Full Screen

Sort of like the Munsell color system

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var width = 960,
          height = 960;

      var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
      var y = d3.scale.ordinal().rangeRoundBands([height, 0], .1);

      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

      var hue = 0;
      var data = createData(hue);

      x.domain(data.map(function(d) { return d[1]; }));
      y.domain(data.map(function(d) { return d[2]; }));

      svg.call(renderCircles, data);
      d3.timer(function(t) {
        hue = t / 50;
        data = createData(hue);
        svg.call(renderCircles, data);
      });

      function renderCircles(selection, data) {
        var circles = selection.selectAll("circle").data(data);

        circles.enter().append("circle")
          .attr("cx", function(d) { return x(d[1]); })
          .attr("cy", function(d) { return y(d[2]); })
          .attr("r", x.rangeBand()/2)
          .attr("transform", "translate(" + x.rangeBand()/2 + "," + y.rangeBand()/2 + ")");

        circles
          .attr("fill", function(d) {
            return d3.hcl(d[0], d[1], d[2]).toString();
          });
      }

      function createData(h) {
        return d3.range(-125, 150, 25)
          .map(function(c) {
            return d3.range(0, 100, 10)
              .map(function(l) {
                return [h, c, l];
              });
          })
          .reduce(function(a, b) { return a.concat(b); });
      }
    </script>
  </body>
</html>