Published unlisted
Edited
Aug 30, 2021
Insert cell
Insert cell
Plot.dotX(d3.range(41), { strokeWidth: (d) => (1 + d) / 15 }).plot()
Insert cell
data = Array.from({ length: 100 }, () => 2 * Math.random()).sort()
Insert cell
Plot.dotX(data, { strokeWidth: data }).plot()
Insert cell
Plot.textX(data, {
stroke: "black",
fill: "white",
strokeWidth: (d) => d / 3,
text: (d) => Math.floor(10 * d)
}).plot()
Insert cell
Plot.rectY(data, {
stroke: "black",
strokeWidth: data,
text: (d) => Math.floor(10 * d),
x1: 0,
x2: data,
y: 1
}).plot()
Insert cell
Plot.link(data, {
stroke: "black",
strokeWidth: (d) => d ** 2 / 4,
text: (d) => Math.floor(10 * d),
x1: (d) => 1 - d,
x2: data,
y1: 0,
y2: data
}).plot()
Insert cell
Plot = require(await FileAttachment("plot@2.umd.js").url())
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