Public
Edited
Jun 9
4 stars
Insert cell
Insert cell
Plot.lineY(data, {x: "date", y: "value", marker: true}).plot()
Insert cell
Insert cell
Insert cell
Plot.rectY(data, Plot.binX({y: "count"}, {x: "date"})).plot()
Insert cell
Insert cell
Plot.rectY(data, Plot.binX({y: "count"}, {x: "date", interval: "day", tip: true})).plot()
Insert cell
Insert cell
Plot.lineY(data, Plot.binX({y: "mean"}, {x: "date", y: "value", interval: "day", marker: true})).plot()
Insert cell
Insert cell
Insert cell
Plot.lineY(data, Plot.binX({y: "mean", filter: null}, {x: "date", y: "value", interval: "day", marker: true})).plot()
Insert cell
Insert cell
Insert cell
Plot.lineY(data, {x: "date", y: "value", reduce: "mean", interval: "day", marker: true}).plot()
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "date", interval: "day", fill: "#ccc"})),
Plot.lineY(data, Plot.binX({y: "count"}, {x: "date", interval: "day"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "date", interval: "day", fill: "#ccc"})),
Plot.lineY(data, Plot.binX({y: "count", filter: null}, {x: "date", interval: "day"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Plot.lineY(data, {x: "date", reduce: "count", interval: "day"}).plot()
Insert cell
Insert cell
Plot.areaY(data, {x: "date", y: true, reduce: "count", interval: "day"}).plot()
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "date", interval: "day", fill: "#ccc"})),
Plot.lineY(data, {x: "date", y: "value", reduce: "mean", interval: "day"}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
data = {
const r = d3.randomNormal.source(d3.randomLcg(42))(0, 20);
const r2 = d3.randomNormal.source(d3.randomLcg(44))(0, 0.1);
const origin = new Date("2024-07-01");
return d3.range(1000).map(() => {
const offset = r();
return {date: new Date(+origin + offset * 864e5), value: Math.sin(offset / 4) + r2()};
}).sort((a, b) => d3.ascending(a.date, b.date));
}
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