Voronoi Shuffling v1 by alexmacy

This is the beginning of an experiment in sorting the polygons of a voronoi diagram.

The polygons are moving to random locations rather than sorting because I was working on how to smoothly transition them from one location to another. It’s definitely not smooth at this point!

index.html

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

	<style>

		body {
			margin: 0;
		}
	
		path {
			fill-opacity: 0;
			stroke: black;
		}
	
	</style>
	
	<script src="//d3js.org/d3.v4.min.js"></script>

</head>

<body></body>

<script>

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

	var voronoi = d3.voronoi()
		.size([width, height]);

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

	var pointCoords = [];
	
	getPointCoords();

	var dots = svg.selectAll("circle")
	  .data(pointCoords)
		.enter().append("circle")
		.attr("r", 2)
		.attr("transform", function(d) {return "translate(" + d[0] + ", " + d[1] + ")"})

	var paths = svg.selectAll("path")
	  .data(voronoi(pointCoords).polygons())
	  	.enter().append("path")
	  	.attr("d", function(d) {return "M" + d.join("L") + "Z";})


	function getPointCoords() {

		for (i=0; i<100; i++) {
			pointCoords[i] = [Math.random() * width, Math.random() * height]
		};
	
	};

	var reDraw = function() {

		getPointCoords();

		dots.data(pointCoords)
			.transition().duration(3000)
			.attr("transform", function(d) {return "translate(" + d[0] + ", " + d[1] + ")"})

		paths.data(voronoi(pointCoords).polygons())
			.transition().duration(3000)
		  	.attr("d", function(d) {return "M" + d.join("L") + "Z";})

		d3.timeout(reDraw, 8000);

	}

	d3.timeout(reDraw, 2000);

</script>