block by mbostock 3962108

Voronoi Test (N=2)

Full Screen

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

index.html

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