Plot.plot({
x: { interval: "day" },
marks: [
Plot.barY(downloads, {
x: "date",
y: "downloads",
fill: "lime",
inset: 0.5
}),
Plot.areaY(downloads, {
x: "date",
y: "downloads",
stroke: "#000",
interval: "day", // 👈
fill: "#ccc",
fillOpacity: 0.9,
curve: "step"
}),
Plot.ruleY([0])
]
})
Plot.plot({
x: { interval: "day" },
marks: [
Plot.barY(downloads, {
x: "date",
y: "downloads",
fill: "lime",
inset: 0.5
}),
Plot.areaY(downloads, {
x: "date",
y: "downloads",
stroke: "#000",
interval: {
floor: d3.utcDay.floor,
offset: d3.utcDay.offset,
range: (d, e) =>
d3.utcDay.range(
d3.utcDay.offset(d3.utcDay(d), -1), // 👈 first day of the range - 1 day
d3.utcDay.offset(d3.utcDay(e), +1) // 👈 last day of the range + 1 day
)
},
fill: "#ccc",
fillOpacity: 0.9,
curve: "step"
}),
Plot.ruleY([0])
]
})
downloads = FileAttachment("downloads.csv")
.csv({ typed: true })
.then((data) =>
data.filter(
(d) =>
d.date.getUTCFullYear() === 2019 &&
d.date.getUTCMonth() <= 1 &&
d.downloads > 0
)
)
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.
