Voronoi Diagram

Colors by Cynthia Brewer. Voronoi design commonly attributed to Lejeune Dirichlet and Georgy Voronoy. Voronoi algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte. Mouseover interaction inspired by Raymond Hill.

Source Code

 1 var w = 960,
 2     h = 500;
 3 
 4 var vertices = d3.range(100).map(function(d) {
 5   return [Math.random() * w, Math.random() * h];
 6 });
 7 
 8 var svg = d3.select("#chart")
 9   .append("svg:svg")
10     .attr("width", w)
11     .attr("height", h)
12     .attr("class", "PiYG")
13     .on("mousemove", update);
14 
15 svg.selectAll("path")
16     .data(d3.geom.voronoi(vertices))
17   .enter().append("svg:path")
18     .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
19     .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
20 
21 svg.selectAll("circle")
22     .data(vertices.slice(1))
23   .enter().append("svg:circle")
24     .attr("transform", function(d) { return "translate(" + d + ")"; })
25     .attr("r", 2);
26 
27 function update() {
28   vertices[0] = d3.svg.mouse(this);
29   svg.selectAll("path")
30       .data(d3.geom.voronoi(vertices)
31       .map(function(d) { return "M" + d.join("L") + "Z"; }))
32       .filter(function(d) { return this.getAttribute("d") != d; })
33       .attr("d", function(d) { return d; });
34 }
Copyright © 2011 Mike Bostock
Fork me on GitHub