D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jasondavies
Full window
Github gist
Cocircular Voronoi
<!DOCTYPE html> <meta charset="utf-8"> <style> .voronoi { fill-opacity: .5; } .delaunay { stroke: #000; fill-opacity: .5; } .links { stroke-width: 2.5px; stroke-dasharray: 5,5; } circle { fill: #000; } </style> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500; var vertices = d3.range(0, 2 * Math.PI + 1e-6, 2 * Math.PI / 5).map(function(d) { return [width / 2 + Math.cos(d) * 100, height / 2 + Math.sin(d) * 100]; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var fill = d3.scale.category20c(); svg.selectAll(".voronoi") .data(d3.geom.voronoi(vertices)) .enter().append("path") .attr("class", "voronoi") .style("fill", function(_, i) { return fill(i); }) .attr("d", polygon); svg.selectAll(".delaunay") .data(d3.geom.delaunay(vertices)) .enter().append("path") .attr("class", "delaunay") .style("fill", function(_, i) { return fill(i); }) .attr("d", polygon); svg.selectAll("circle") .data(vertices) .enter().append("circle") .attr("transform", function(d) { return "translate(" + d + ")"; }) .attr("r", 3.5); svg.append("path") .attr("class", "links") .style("stroke", "blue") .attr("d", d3.geom.voronoi().links(vertices).map(line).join("")); function line(d) { return "M" + d.source + "L" + d.target; } function polygon(d) { return d ? "M" + d.join("L") + "Z" : ""; } </script>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js