Understanding Voronoi diagram creation

Understand how Voronoi diagrams are formed by adding your own "seeds" to the above visual. The existing Voronoi diagram will continuously adjust as new seeds/sites are added. Click the visual to add new seeds!!

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>DIY Voronoi</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

<style>

.voronoi {
  fill: none;
  stroke: #000000;
  fill-opacity: 1}

</style>
</head>
<body>
<script type="text/javascript">

svg.selectAll("path")
.data(voronoi)
.enter()
.append("path")
.attr("d", pathFn)
.classed("voronoi", true);

group.selectAll(".circles")
   .data(data).enter().append("circle")
   .attr("class","circles")
   .attr("r",15)
   .style("stroke","white")
   .style("opacity",1)
   .attr("cx",function(d) {return d[0];})
   .attr("cy",function(d) {return d[1];});
   
   
   
   
   };
    
</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js