Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active June 28, 2018 03:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/8063f8c2d1adb7c7ee68 to your computer and use it in GitHub Desktop.
Save aaizemberg/8063f8c2d1adb7c7ee68 to your computer and use it in GitHub Desktop.
Download ZIP
voronoi (d3, v5, svg, simple example)
Raw
index.html
<!DOCTYPE html>
<head>
<title>Voronoi 101</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var width = 960, height = 500;
var c10 = d3.schemePaired;
var vertices = d3.range(10).map(function(d) {
return [Math.random() * width, Math.random() * height];
});
var voronoi = d3.voronoi().extent([[0, 0], [width, height]]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var path = svg.append("g").selectAll("path");
path.data( voronoi.polygons(vertices) ).enter().append("path")
.attr("stroke","white")
.attr("fill", function(d,i) {return c10[i % 10]} )
// .attr("d", function(d) { return "M" + d.join("L") + "Z" } );
.attr("d", polygon);
function polygon(d) {
return "M" + d.join("L") + "Z";
}
svg.selectAll("circle").data(vertices).enter().append("circle").attr("r", 3)
//.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("cx", function(d) { return d[0]; } )
.attr("cy", function(d) { return d[1]; } );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment