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.
This example shows what voronoi tesselations look like drawn with various d3 line interpolators.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| overflow: hidden; | |
| } | |
| path { | |
| fill-opacity: .8; | |
| 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> | |
| </head> | |
| <body> | |
| <select id="interpolate"> | |
| <option>basis-closed</option> | |
| <option>linear</option> | |
| <option>basis</option> | |
| <option>cardinal-closed</option> | |
| <option>cardinal</option> | |
| <option>monotone</option> | |
| <option>step</option> | |
| <option>step-before</option> | |
| <option>step-after</option> | |
| </select> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 480; | |
| 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]]); | |
| 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(); | |
| }) | |
| .on("touchstart", touch) | |
| .on("touchmove", touch); | |
| var path = svg.append("g").selectAll("path"); | |
| var line = d3.svg.line(); | |
| var select = d3.select("#interpolate") | |
| .on("change", function() { | |
| line.interpolate(this.value); | |
| redraw(); | |
| }) | |
| line.interpolate(select.property("value")); | |
| svg.selectAll("circle") | |
| .data(vertices.slice(1)) | |
| .enter().append("circle") | |
| .attr("transform", function(d) { return "translate(" + d + ")"; }) | |
| .attr("r", 2); | |
| redraw(); | |
| function touch() { | |
| vertices[0] = d3.touches(this)[0]; | |
| redraw(); | |
| } | |
| function redraw() { | |
| path = path.data(voronoi(vertices), String); | |
| path.exit().remove(); | |
| path.enter().append("path") | |
| .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }); | |
| path.attr("d", function(d) { | |
| return line(d) + "Z"; | |
| }); | |
| path.order(); | |
| } | |
| </script> | |
| </body> | |
| </html> |