D3 Examples - layered voronoi relaxation

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    }
    svg { background: white; }
    .layer { fill: none; }
  </style>
</head>
​
<body>
  <script>
  (function() {
    var options = {
      width: 500,
      height: 500,
      points: 30,
      density: .5,
      iterations: 300,
      opacity: .1,
      colorScale: d3.interpolateRgb('black', 'black')
    };
    
    var points = [];
    var width = options.width, height = options.height;
    var count = options.points;
    while(count-- > 0) {
      points.push([
        Math.random() * width,
        Math.random() * height
      ]);
    };
    var layers = [points];
    var voronoi = d3.voronoi().size([width, height]);
    var iterations = options.iterations;
    while(iterations-- > 0) {
      points = voronoi.polygons(points).map(function(poly) {
        return d3.polygonCentroid(poly);
      });
      layers.push(points);
    }
    
    var scale = d3.scaleSequential(options.colorScale).domain([0, options.relaxations]);
    
    var $svg = d3.select('body').append('svg')
        .attr('width', options.width)
      .attr('height',options.height);
    
    $svg.selectAll('.layer')
        .data(layers)
        .enter()
        .append('path')
        .attr('class', 'layer')
          .attr('stroke', function(l, i) {
            var color = d3.rgb(scale(i));
            color.opacity = options.opacity;
            return color;
            })
            .attr('d', function(points) {
            return voronoi.polygons(points).map(function(p) {
            return 'M' + p.map(function(p) {
              return p.join(',');
            }).join('L') + 'Z';
          }).join('');
            });
  }());
​
  </script>
</body>
​
    