Force Voronoi Kaleidoscope

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

body{
  padding: 0;
  margin: 0;}

path {
  stroke: none;
}

path:first-child {
  fill: yellow !important;  
}

circle {
  fill: #fff;
  stroke: #000;
  pointer-events: none;
}

.PiYG .q0-9{fill:rgb(197,27,125)}
.PiYG .q1-9{fill:rgb(222,119,174)}
.PiYG .q2-9{fill:rgb(241,182,218)}
.PiYG .q3-9{fill:rgb(253,224,239)}
.PiYG .q4-9{fill:rgb(247,247,247)}
.PiYG .q5-9{fill:rgb(230,245,208)}
.PiYG .q6-9{fill:rgb(184,225,134)}
.PiYG .q7-9{fill:rgb(127,188,65)}
.PiYG .q8-9{fill:rgb(77,146,33)}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = window.innerWidth,
    height = window.innerHeight;
    var pathToPolygon, polyArea;

polyArea = function(poly) {
      var area, i, len, p1, p2, pts;

area = 0;
      pts = poly.points;
      len = pts.numberOfItems;
      i = 0;
      while (i < len) {
        p1 = pts.getItem(i);
        p2 = pts.getItem((i + len - 1) % len);
        area += (p2.x + p1.x) * (p2.y - p1.y);
        ++i;
      }
      return Math.abs(area / 2);
    };

pathToPolygon = function(path, samples) {
      var doc, i, poly, s, segs;

if (!samples) {
        samples = 0;
      }
      doc = path.ownerDocument;
      poly = doc.createElementNS("https://www.w3.org/2000/svg", "polygon");
      segs = [];
      s = path.pathSegList;
      return i = s.numberOfItems - 1;
    };
    
    var vertices = d3.range(100).map(function(d) {
      return [Math.random() * 150, Math.random() * height];
    });

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "PiYG")
        //.on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); });

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

var nodes = force.nodes(),
            links = force.links(),
            node = svg.selectAll(".node"),
            link = svg.selectAll(".link");

var cursor = svg.insert("before", ":first-child")
            .attr("r", 30)
            .attr("transform", "translate(-100,-100)")
            .attr("class", "cursor");

restart();

function mousemove() {
          cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
        }

function mousedown() {
          var point = d3.mouse(this),
              node = {x: point[0], y: point[1]},
              n = nodes.push(node);

// add links to any nearby nodes
          nodes.forEach(function(target) {
            var x = target.x - node.x,
                y = target.y - node.y;
            if (Math.sqrt(x * x + y * y) < 30) {
              links.push({source: node, target: target});
            }
          });

restart();
        }
        
        
        function tick() {
          link.attr("x1", function(d) { return d.source.x; })
              .attr("y1", function(d) { return d.source.y; })
              .attr("x2", function(d) { return d.target.x; })
              .attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })
              .attr("cy", function(d) { return d.y; });
         
         vertices = node.data().map( function(d) { 
                //console.log(d);
                //console.log(d.x);
                return [d.x, d.y];});
          mirror_x_y = node.data().map( function(d) { 
                  //console.log(d);
                  //console.log(d.x);
                  return [width - d.x, height - d.y];});
          mirror_x = node.data().map( function(d) { 
                  //console.log(d);
                  //console.log(d.x);
                  return [width - d.x, d.y];});
          mirror_y = node.data().map( function(d) { 
                  //console.log(d);
                  //console.log(d.x);
                  return [d.x, height - d.y];});
          vertices = vertices.concat(mirror_x_y, mirror_x, mirror_y);
          
              redraw();
        }

function restart() {
          link = link.data(links);

link.enter().insert("line", ".node")
              .attr("class", "link");

node = node.data(nodes);

node.enter().insert("circle", ".cursor")
              .attr("class", "node")
              .attr("r", 5)
              .call(force.drag);

force.start();
        }

setInterval( function() { force.start()}, 5);

//setInterval ( function() {
//  vertices = d3.range(100).map(function(d) {
//    return [Math.random() * width, Math.random() * height];
//  });
//  redraw();

//}, 100);

</script>

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

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