fphilipe/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The Voronoi tesselation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.

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

path {
  stroke: #000;
}

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 = 960,
    height = 500;

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

var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]])
    .x(function(d) { d[0] })
    .y(function(d) { d[1] });

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 path = svg.append("g").selectAll("path");

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2);

redraw();

function redraw() {
  path = path.data(voronoi(vertices).map(function(d) { return "M" + d.join("L") + "Z"; }), String);
  path.exit().remove();
  path.enter().append("path").attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }).attr("d", String);
  path.order();
}

</script>

## thumbnail.png

      
    Raw
  

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

	path {
	stroke: #000;
	}

	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 = 960,
	height = 500;

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

	var voronoi = d3.geom.voronoi()
	.clipExtent([[0, 0], [width, height]])
	.x(function(d) { d[0] })
	.y(function(d) { d[1] });

	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 path = svg.append("g").selectAll("path");

	svg.selectAll("circle")
	.data(vertices.slice(1))
	.enter().append("circle")
	.attr("transform", function(d) { return "translate(" + d + ")"; })
	.attr("r", 2);

	redraw();

	function redraw() {
	path = path.data(voronoi(vertices).map(function(d) { return "M" + d.join("L") + "Z"; }), String);
	path.exit().remove();
	path.enter().append("path").attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }).attr("d", String);
	path.order();
	}

	</script>