Public
Edited
Apr 28, 2023
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.frame({ stroke: "orange" }),
Plot.text(["Middle"], { frameAnchor: "middle" }),
Plot.text(["Top"], { frameAnchor: "top" }),
Plot.text(["Bottom"], { frameAnchor: "bottom" }),
Plot.text(["Left"], { frameAnchor: "left" }),
Plot.text(["Right"], { frameAnchor: "right" })
]
})
Insert cell
Plot.plot({
width: width,
marks: [
Plot.frame({ stroke: "#ccc" }),
Plot.lineY(aapl, { x: "Date", y: "Close", stroke: "red" })
]
})
Insert cell
penguinsPlot = Plot.plot({
grid: true,
caption: "Here is a caption",
inset: 10,
width: width,
color: { legend: true },
marks: [
Plot.frame({ stroke: "#ccc" }),
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species"
})
]
})
Insert cell
penguinsPlot.legend("color")
Insert cell
Inputs.table(aapl)
Insert cell
Inputs.table(penguins)
Insert cell
Plot.auto(penguins, { x: "body_mass_g", y: "species", mark: "area" }).plot()
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