Voronoi triggering by bricedev

index.html

<!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); });

var path = svg.selectAll("path")
      .data(voronoi(vertices), polygon)
      .enter().append("path")
      .attr("d", polygon)
      .on("mouseover", function (d,i) {
        circles.filter(function(circle) { return circle === d.point;})
          .style("stroke-width",3);
      })
      .on("mouseout", function (d,i) {
        circles.filter(function(circle) { return circle === d.point;})
          .style("stroke-width",0);
      });

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

</script>