Published unlisted
Edited
Jul 1, 2022
1 fork
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: 0.4,
// // 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,
opacity: 0.75
}),
//Mark Vacations
Plot.textX(holidaysPerPerson, {
y: "name",
x: "date_start",
interval: d3.utcDay,
// inset: 1, // no gaps between days
// fill: "COUNTRY",
// dx: 8,
// opacity: 0.3,
text: (d) => {
switch (d.country) {
case 'IND':
return '🇮🇳';
case 'FRA':
return '🇫🇷';
case 'UK':
return '🇬🇧';
case 'USA':
return '🇺🇲';
default:
return '🇺🇳';
}
},
fontSize: 20,
title: (d) => `${d.holidayName}\n${d.country}`
}),
// 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-05-20")
end = new Date("2022-07-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.
