Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 01:43
Show Gist options
  • Save mbostock/3962108 to your computer and use it in GitHub Desktop.
Save mbostock/3962108 to your computer and use it in GitHub Desktop.
Voronoi Test (N=2)
license: gpl-3.0

The colors of the circles should match the color of the background cells.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
stroke: #000;
}
path {
fill-opacity: .1;
}
path:hover {
fill-opacity: .2;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var points = [
[200, 200],
[760, 300]
];
var color = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
svg.selectAll("path")
.data(d3.geom.voronoi(points))
.enter().append("path")
.style("fill", function(d, i) { return color(i); })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle")
.data(points)
.enter().append("circle")
.style("fill", function(d, i) { return color(i); })
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 4.5);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment