Public
Edited
May 5, 2023
Insert cell
Insert cell
Insert cell
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.ruleY([Math.min(...data.map((d) => d.data))]),
Plot.lineY(data, { x: "line", y: "data", stroke: "gray" }),
Plot.dot(data, {
x: "line",
y: "data",
fill: "gray",
title: (d) => `${d.line}: ${d.data}`
})
],
y: { grid: true },
width
})
Insert cell
Insert cell
data2 = FileAttachment("sample@1.tsv").tsv().then(v => v.map(d => ({line: +d.line, data: +d.data})));
Insert cell
Plot.plot({
marks: [
Plot.ruleY([Math.min(...data2.map((d) => d.data))]),
Plot.lineY(data2, { x: "line", y: "data", stroke: "gray" }),
Plot.dot(data2, {
x: "line",
y: "data",
fill: "gray",
title: (d) => `${d.line}: ${d.data}`
})
],
y: { grid: true },
width
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plot_line(new_data)
Insert cell
Insert cell
Insert cell
plot_line(new_data2)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function plot_line(data) {
return Plot.plot({
marks: [
Plot.ruleY([d3.min(data)]),
Plot.lineY(data, { stroke: "gray" }),
Plot.dot(data, {
x: (d, i) => i,
y: (d) => d,
fill: "gray",
title: (d, i) => `${i}: ${d}`
})
],
y: { grid: true },
width
});
}
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