Voronoi triggering II by bricedev

index.html

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

path {
  pointer-events: all;
  stroke: none;
  fill: none;
}

path.show {
  stroke: black;
  stroke-width: 1px;
  fill: #8a8a89;
  opacity: .3;
}

#form {
  font: 12px sans-serif;
  position: absolute;
  top: 20px;
  right: 30px;
}

</style>
<label id="form" for="show-voronoi">
  Show Voronoi
  <input type="checkbox" id="show-voronoi" disabled>
</label>
<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(100).map(function(d) {
  return [d3.random.normal(width / 2, 80)(), d3.random.normal(height / 2, 80)(), Math.random() * 10+2];
});

vertices.sort(function(a,b) { return b[2] - a[2]; });

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

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

var clips = svg.append("g")
    .attr("id","clips");

clips.selectAll("clipPath")
    .data(vertices).enter()
  .append("clipPath")
    .attr("id", function(d, i) { return "clip-"+i;})
  .append("circle")
    .attr('cx', function(d) { return d[0]; })
    .attr('cy', function(d) { return d[1]; })
    .attr("r", function(d) { return d[2] + 20; });

var circles = svg.append("g")
    .attr("id","points");

circles.selectAll("circle")
    .data(vertices).enter()
  .append("circle")
    .attr("id", function(d,i) { return "point-"+i; })
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; })
    .attr("r", function(d) { return d[2]; })
    .style("stroke","black")
    .style("opacity",1)
    .style("fill",function(d,i) { return color(i); });

var path = svg.append("g")
     .attr("id","voronoi");

path.selectAll("path")
    .data(voronoi(vertices), polygon).enter()
  .append("path")
    .attr("id", function(d,i) { return "path-"+i; })
    .attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; })
    .attr("d", polygon)
    .on("mouseover", function(d, i) {
      svg.select('circle#point-'+i).style('stroke-width', "3px");
    })
    .on("mouseout", function(d, i) {
      svg.select('circle#point-'+i).style('stroke-width', "1px");
    });

d3.select("#show-voronoi")
    .property("disabled", false)
    .on("change", function() { path.selectAll("path").classed("show", this.checked); });

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

</script>