data = [
{date: new Date("2023-04-01"), type: "triangle", value: 5},
{date: new Date("2023-04-05"), type: "circle", value: 7},
{date: new Date("2023-04-10"), type: "circle", value: 8},
{date: new Date("2023-04-15"), type: "circle", value: 3},
{date: new Date("2023-04-15"), type: "triangle", value: 7},
{date: new Date("2023-04-20"), type: "triangle", value: 4},
{date: new Date("2023-04-25"), type: "square", value: 5},
]
Plot.auto(data, {x: "date", y: "value", color: "type", mark: "bar"}).plot()
Plot.barY(data, {x: "date", y: "value", fill: "type"}).plot()
Plot.auto(aapl, {x: "Date", y: "Volume", mark: "bar"}).plot()
Plot.rectY(aapl, Plot.binX({y: "sum"}, {x: "Date", y: "Volume"})).plot()
Plot.rectY(aapl.slice(0, 100), Plot.binX({y: "sum"}, {x: "Date", y: "Volume", interval: "day"})).plot()
Plot.ruleX(aapl, {x: "Date", y: "Volume"}).plot()
Plot.barY(aapl.slice(0, 10), {x: "Date", y: "Volume", interval: "day"}).plot()
Plot.barY(aapl.slice(0, 10), {x: "Date", y: "Volume", interval: "day"}).plot({y: {type: "linear"}})
a = aapl
a
X
Date
Y
—
Volume
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
rule
Type Chart, then Shift-Enter. Ctrl-space for more options.
PlotLatest = require("https://observablehq.com/plot/plot.js")
PlotLatest.auto(data, {x: "date", y: "value", color: "type", mark: "bar"}).plot()
PlotLatest.auto(aapl, {x: "Date", y: "Volume", mark: "bar"}).plot()
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.
