Published unlisted
Edited
Apr 12, 2022
2 stars
Insert cell
Insert cell
Plot.plot({
x: {
tickFormat: "%d.%m",
round: true
},
y: {
grid: true,
tickFormat: "%I %p",
reverse: true,
nice: true
},
marks: [
Plot.rect(sessions, {
x1: d => d3.utcDay(d.start),
x2: d => d3.utcDay.ceil(d.end),
y1: d => new Date(d.start - d3.utcDay(d.start)),
y2: d => new Date(d.end - d3.utcDay(d.end)),
insetLeft: 0.5,
insetRight: 0.5
}),
Plot.ruleY([new Date("1970-01-01"), new Date("1970-01-01T23:59:59.999Z")])
]
})
Insert cell
sessions = (await FileAttachment("sessions.json").json())
.map(({start, end}) => ({
start: new Date(start),
end: new Date(end)
}))
.flatMap(({start, end}) => {
const days = d3.utcDay.range(d3.utcDay(start), end);
return days.map((day, i) => ({
start: i === 0 ? start : day,
end: i === days.length - 1 ? end : days[i + 1]
}));
})
.map(({start, end}) => ({
start,
end: new Date(end - 1) // convert to inclusive upper bound
}))
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