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 }