Published unlisted
Edited
Aug 8, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: { data, y: "parameter", marginLeft: 70 },
marks: [
Plot.areaY(
data,
Plot.binX(
{ y: "sum" },
{
x: "date",
y: "count",
sort: "date",
curve: "step",
empty: true, // 👉 do not skip empty bins!
thresholds: d3.utcDay,
fill: "#f2f2fe"
}
)
),

Plot.line(
data,
Plot.binX(
{ y: "sum" },
{
x: "date",
y: "count",
sort: "date",
curve: "step",
empty: true, // 👉 do not skip empty bins!
thresholds: d3.utcDay
}
)
),

Plot.ruleY([0])
],
x: { domain: [new Date(2020, 0, 1), new Date(2021, 4, 20)] },
fy: { paddingInner: 0.3 },
y: { axis: null },
height: 300,
marginLeft: 70,
width
})
Insert cell
// https://github.com/observablehq/plot/pull/489
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