Published
Edited
Sep 16, 2022
1 star
Insert cell
Insert cell
path = shape2path.polyline()
.attr("points", d => d);
Insert cell
{
const svg = d3.select(DOM.svg(width, height));
// Works with an array...
svg.append("path")
.datum([[40, 0], [80, 20], [80, 60], [40, 80], [0, 60], [0, 20]])
.attr("transform", `translate(${width / 2 - 100}, ${height / 2 - 40})`)
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
// ...or with a string.
svg.append("path")
.datum("40,0 80,20 80,60 40,80 0,60 0,20")
.attr("transform", `translate(${width / 2}, ${height / 2 - 40})`)
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more