Published unlisted
Edited
Mar 29, 2022
1 star
Plot.plot({
width,
height: 400,
label: null,
x: {
// axis: "top",
domain: [start, end],
axis: "top",
round: true,
ticks: {
range(start, end) {
return d3.utcWeek.range(start, end).map((d) => d3.utcHour.offset(d, 12));
}
},
tickFormat: "%b %-d"
},
y: {
grid: true
},
opacity: { type: "identity" },
marks: [
//Mark Weekend
Plot.barX(d3.utcDay.range(start, end), {
interval: d3.utcDay,
fillOpacity: (d) => ((1 + d.getUTCDay()) % 7 < 2 ? 0.15 : 0.05)
}),
//Mark Today
Plot.barX([today], {interval: d3.utcDay,
fill: "yellow",
fillOpacity: 0.5
}),
//Mark Vacations
Plot.barX(vacations, {
x1: "date_start",
x2: "date_end",
y: "name",
fill: "name",
inset: 0.5,
clip: true
}),
//Mark Holidays
// Plot.barX(holidays, {
// x: "date_start",
// y: "name",
// fill: "name",
// inset: 0.5,
// clip: true
// }),
],tooltip: {
fill: "red",
stroke: "blue",
r: 8
}
})
holidays = FileAttachment("holidays_ooo.csv").csv({typed: true})
vacations = FileAttachment("vacations_ooo.csv").csv({typed: true})
start = new Date("2022-03-20")
end = new Date("2022-05-28")
today = d3.utcDay()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
