Public
Edited
May 6
{
/* general setup of the svg */
const height = 20;
const width = 100;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
/* add a path setting the string directly*/
svg.append("path")
.attr("d", "M 0 0 L 20 20 L40 0 L60 20 L80 0 L100 20")// zig zag line
.attr("stroke", "black")
.attr("fill", "none");
/* prepare a d3.line function */
const line = d3.line();
// The standard line function expects coordinates in the form:
// [[x1, y1], [x2, y2], [x3, y3] ...]
// It translates the coordinates into the path string.
/* adding a path and setting the string with the line function */
svg.append("path")
.attr("d", line([[0,0], [20,20], [40,0], [60,20], [80, 0], [100,20]]))// same zig zag line
.attr("stroke", "red")
.attr("stroke-width", 0.25)
.attr("fill", "none");
return svg.node();
}
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.
