Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block
Last active Sep 22, 2017

Embed
What would you like to do?
Voronoi Tessellation
license: gpl-3.0
redirect: https://beta.observablehq.com/@mbostock/hover-voronoi
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links {
stroke: #000;
stroke-opacity: 0.2;
}
.polygons {
fill: none;
stroke: #000;
}
.polygons :first-child {
fill: #f00;
}
.sites {
fill: #000;
stroke: #fff;
}
.sites :first-child {
fill: #fff;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg").on("touchmove mousemove", moved),
width = +svg.attr("width"),
height = +svg.attr("height");
var sites = d3.range(100)
.map(function(d) { return [Math.random() * width, Math.random() * height]; });
var voronoi = d3.voronoi()
.extent([[-1, -1], [width + 1, height + 1]]);
var polygon = svg.append("g")
.attr("class", "polygons")
.selectAll("path")
.data(voronoi.polygons(sites))
.enter().append("path")
.call(redrawPolygon);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(voronoi.links(sites))
.enter().append("line")
.call(redrawLink);
var site = svg.append("g")
.attr("class", "sites")
.selectAll("circle")
.data(sites)
.enter().append("circle")
.attr("r", 2.5)
.call(redrawSite);
function moved() {
sites[0] = d3.mouse(this);
redraw();
}
function redraw() {
var diagram = voronoi(sites);
polygon = polygon.data(diagram.polygons()).call(redrawPolygon);
link = link.data(diagram.links()), link.exit().remove();
link = link.enter().append("line").merge(link).call(redrawLink);
site = site.data(sites).call(redrawSite);
}
function redrawPolygon(polygon) {
polygon
.attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });
}
function redrawLink(link) {
link
.attr("x1", function(d) { return d.source[0]; })
.attr("y1", function(d) { return d.source[1]; })
.attr("x2", function(d) { return d.target[0]; })
.attr("y2", function(d) { return d.target[1]; });
}
function redrawSite(site) {
site
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; });
}
</script>
@nemo20000

This comment has been minimized.

Copy link

nemo20000 commented Feb 6, 2013

The voronoi() algorithm goes badly wrong if two points are coincident.

eg insert line 40: vertices[2] = vertices[1];

@vala232

This comment has been minimized.

Copy link

vala232 commented Jul 10, 2014

how 2 draw d3.voronoi into google maps

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.