Voronoi Shuffling v1

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!

<!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>

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>

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