Voronoi triggering

Voronoi layer to trigger a circle

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

path {
  pointer-events: all;
  stroke: black;
  stroke-width: 1px;
  fill:none;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.ordinal()
    .range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]);

var vertices = d3.range(50).map(function(d) {
  return [d3.random.normal(width / 2, 80)(), d3.random.normal(height / 2, 80)()];
});

var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var circles = svg.selectAll("circle")
    .data(vertices)
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 5)
    .style("stroke","black")
    .style("fill",function(d,i) { return color(i); });

function polygon(d) {
  return "M" + d.join("L") + "Z";
};

</script>

https://d3js.org/d3.v3.js