xxxxxxxxxx
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>D3 Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
</head>
<body>
<!-- <script type="text/javascript" src="D3JavascriptPractice.js"></script> -->
<script type="text/javascript">
var width = 960;
var height = 500;
var vertices = d3.range(100).map(function(d){ return [Math.random()*width,Math.random()*height];})
var voronoi = d3.voronoi().size([width,height]);
// Add SVG and the GROUP elements.
var mySvg = d3.select("body").append("svg")
.attr("width", "100%").attr("height", "100%");
var polygons = mySvg.append("g").attr("class","polygons")
.selectAll("path")
.data(voronoi.polygons(vertices))
.enter().append("path")
.attr("d",function(d){return "M"+d.join("L")+"Z"; console.log(d);});
var fuel = mySvg.append("g")
.attr("class","fuel")
.selectAll("circle") //appending circles to the group
.data(vertices).enter().append("circle")
.attr("cx",function(d){return d[0];}) // this code looks through the array (of arrays) fed into the data method (vertices), which is an array of
.attr("cy",function(d){return d[1];})
.attr("r","3");
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js