Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cocircular Voronoi
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.voronoi {
fill-opacity: .5;
}
.delaunay {
stroke: #000;
fill-opacity: .5;
}
.links {
stroke-width: 2.5px;
stroke-dasharray: 5,5;
}
circle {
fill: #000;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var vertices = d3.range(0, 2 * Math.PI + 1e-6, 2 * Math.PI / 5).map(function(d) {
return [width / 2 + Math.cos(d) * 100, height / 2 + Math.sin(d) * 100];
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var fill = d3.scale.category20c();
svg.selectAll(".voronoi")
.data(d3.geom.voronoi(vertices))
.enter().append("path")
.attr("class", "voronoi")
.style("fill", function(_, i) { return fill(i); })
.attr("d", polygon);
svg.selectAll(".delaunay")
.data(d3.geom.delaunay(vertices))
.enter().append("path")
.attr("class", "delaunay")
.style("fill", function(_, i) { return fill(i); })
.attr("d", polygon);
svg.selectAll("circle")
.data(vertices)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 3.5);
svg.append("path")
.attr("class", "links")
.style("stroke", "blue")
.attr("d", d3.geom.voronoi().links(vertices).map(line).join(""));
function line(d) {
return "M" + d.source + "L" + d.target;
}
function polygon(d) {
return d ? "M" + d.join("L") + "Z" : "";
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment