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 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 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.