david4096/index.html

## index.html
<!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="http://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("http://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>
	<!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="http://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("http://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>
No results found