Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 8, 2016
Embed
What would you like to do?
Rainbow Voronoi
license: gpl-3.0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Voronoi Tesselation</title>
<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/d3/841f35456831192fd008222c8ae15b6738acace9/d3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/d3/841f35456831192fd008222c8ae15b6738acace9/lib/jit/voronoi.min.js"></script>
<style type="text/css">
svg {
display: block;
border: solid 1px #666;
}
path {
fill: yellow;
stroke: #000;
stroke-width: .5px;
}
circle {
fill: #ccc;
stroke: #000;
pointer-events: none;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 958,
h = 498;
var vertices = d3.range(100).map(function(d) {
return [Math.random() * w, Math.random() * h];
});
var svg = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.on("mousemove", update);
svg.selectAll("path")
.data(voronoi(vertices))
.enter("svg:path")
.style("fill", function() { return d3.hsl(Math.random() * 360, 1, .5); })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle")
.data(vertices.slice(1))
.enter("svg:circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2);
function update() {
vertices[0] = d3.svg.mouse(this);
svg.selectAll("path")
.data(voronoi(vertices)
.map(function(d) { return "M" + d.join("L") + "Z"; }))
.filter(function(d) { return this.getAttribute("d") != d; })
.attr("d", function(d) { return d; });
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment