Public
Edited
Apr 15, 2023
1 fork
2 stars
Plot.plot({
width,
height: 400,
marginTop: 40,
label: null,
clip: true,
x: {
domain: [start, end],
},
y: {
grid: true
},
opacity: { type: "identity" },
marks: [
//X-axis ticks
Plot.axisX(d3.utcDay.range(start, end), { interval: d3.utcMonth, anchor: "top", dy: -22, tickSize: 0,
x: (d) => d3.utcHour.offset(d, 12), text: (d) => formatMonth(d)
}),
//X-axis ticks
Plot.axisX(d3.utcDay.range(start, end), { interval: d3.utcDay, anchor: "top",
x: (d) => d3.utcHour.offset(d, 12), text: (d) => formatDay(d3.utcHour.offset(d, 12))
}),
//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,
clip: true
}),
//Mark Vacations
Plot.barX(vacations, {
x1: "date_start",
x2: "date_end",
y: "name",
fill: "name",
inset: 0.5,
clip: true,
opacity: 0.75
}),
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8
}
})
holidaysByCountry = d3.group(holidays, (d) => d.country)
holidays = FileAttachment("holidays_ooo.csv").csv({typed: true})
formatDay = (d) => `${formatWDay(d)[0]}\n${formatDate(d)}`;
formatDate = d3.utcFormat('%d');
formatMonth = d3.utcFormat('%b');
formatYear = d3.utcFormat('%Y');
formatWDay = d3.utcFormat('%a');
vacations = FileAttachment("vacations_ooo.csv").csv({typed: true})
start = new Date("2022-05-20")
end = new Date("2022-06-28")
today = d3.utcDay()
inc = d3.utcDay.offset(start, 60)
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.
