Published unlisted
Edited
Sep 3, 2019
p = 0
{
const svg = d3.create("svg").attr("viewBox", [-20, -20, 1240, 640]);
svg
.append("path")
.attr("d", voronoi.renderBounds())
.attr("fill", "none")
.attr("stroke", "black");
svg
.append("path")
.attr("d", voronoi.render())
.attr("fill", "none")
.attr("stroke", "red");
svg
.selectAll("circle")
.data(points)
.join("circle")
.attr("r", 20)
.attr("transform", d => `translate(${d})`);
svg
.append("g")
.selectAll("circle")
.data(voronoi.cellPolygon(p))
.join("circle")
.attr("r", 8)
.attr("transform", d => `translate(${d})`);
svg
.append("g")
.selectAll("circle")
.data(edges(voronoi.cellPolygon(p)))
.join("circle")
.attr("r", 4)
.style("fill", "lightblue")
.attr("transform", d => `translate(${d})`);
svg
.selectAll("text")
.data(points)
.join("text")
.attr("transform", d => `translate(${d})`)
.attr("fill", d => "white")
.text((_, i) => i);
return svg.node();
}
voronoi = d3.Delaunay.from(points).voronoi([0, 0, 1200, 600])
points = [
[205, 183],
[210, 394.3],
[418.93, 132.63],
[133.34, 492.92],
[514.64, 26.78]
]
d3 = require("d3@5", "d3-delaunay@5.1.4")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
