D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
harrisoncramer
Full window
Github gist
Simple Voronoi
<!DOCTYPE html> <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