D3 Examples - Force Voronoi Kaleidoscope

xxxxxxxxxx
 
<!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 fill = d3.scale.category20();
        
        var vertices = [[width/ 2, height, 2], [0, 0]];
        
        var path = svg.append("g").selectAll("path");
        
        
        function redraw() {
          path = path.data(d3.geom.voronoi(vertices.map(function(d){ return [d[0], d[1]];})).map(function(d) { return "M" + d.join("L") + "Z"; }), String);
          path.exit().remove();
          path.enter().insert("path","svg:first-child");
          
          path.attr("fill", function(d, i) {
              //console.log(path);
              return fill(i);
              //return d3.hsl(polyArea(pathToPolygon(d3.selectAll("path")[i])) % 260, .5, .5); 
            })
            //.attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
            .attr("d", String);
          //path.order();
        }
    
        redraw();
        
        var force = d3.layout.force()
            .size([width, height])
            .nodes([{}]) // initialize with a single node
            .linkDistance(300)
            .charge(-1500)
            .on("tick", tick)
            //force.friction(.3);
            force.linkDistance(width/5);
​
        //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();
        }
​
        var z = -1;
        var p = 1;
        setInterval( 
          function() {
            if (z == 2){
              p = -1;
            } else if (z == -1000) {
              p = 1;
            }
            z = z + p;
            //console.log(z);
            force.charge(z);
          }, 5);
​
        setInterval( function() { force.start()}, 5);
​
​
//setInterval ( function() {
//  vertices = d3.range(100).map(function(d) {
//    return [Math.random() * width, Math.random() * height];
//  });
//  redraw();
​
//}, 100);
​
</script>
​
    