The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Apr 12, 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: {
domain: byCountry.map((d) => d[1]),
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 Holidays
Plot.barX(holidaysPerPerson, {
x: "date_start",
interval: d3.utcDay,
y: "name",
fill: "#888",
stroke: "#888",
strokeWidth: 1,
insetTop: -1,
insetBottom: -1,
insetLeft: 1,
insetRight: 1,
clip: true,
title: "holidayName"
}),
//Mark Vacations
Plot.barX(vacations, {
x1: "date_start",
x2: "date_end",
y: "name",
fill: "name",
inset: 0.5,
clip: true
}),
// Show countries as links; but some people belong to two countries, so 🤷🏼
Plot.link(
vacations,
Plot.groupZ(
{ y1: "min", y2: "max", x: () => d3.utcHour.offset(end, 14) },
{
y: "name",
z: "country",
stroke: "country",
filter: "country",
marker: "circle"
}
)
)
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8
}
})
holidaysByCountry = d3.group(holidays, (d) => d.country)
holidays = FileAttachment("holidays_ooo.csv").csv({typed: true})
byCountry = d3.flatGroup(
vacations,
(d) => d.country,
(d) => d.name
)
holidaysPerPerson = byCountry.flatMap(([country, name]) => {
const holidays = holidaysByCountry.get(country);
return holidays
? holidays.map((h) => ({ ...h, holidayName: h.name, name }))
: [];
})
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.
