Public
Edited
Apr 14, 2023
{
return html`<div style="overflow:scroll">
${Plot.plot({
width: 8000,
marginLeft: 50,
style: {maxWidth: "8000px", overflow: "scroll"},
x: {
// domain: [start, end],
axis: "top",
// tickFormat: d => { console.log(d); }
// tickFormat: "%-d"
// ticks: d3.utcDay,
// tickFormat: "%d"
},
marks: [
Plot.cell(data, {
x: d => d3.utcDay.count(d3.utcYear(d.date), d.date),
y: d => d.name,
fill: d => (d.isVacation ? "orange" : "red"),
inset: 0.5,
}),
Plot.text(data, {
x: d => d3.utcDay.count(d3.utcYear(d.date), d.date),
y: d => d.name,
text: d => d3.utcFormat('%d')(d.date),
fill: "black"
}),
]
})}
</div>`;
}
data = generateDaysArray(names)
generateDaysArray = (names) => {
const result = [];
names.forEach(name => {
for (let month = 0; month < 12; month++) {
for (let day = 1; day <= daysInMonth(month); day++) {
result.push({
name: name,
date: new Date(year, month, day),
isVacation: Math.random() < 0.5
});
}
}
});
return result;
};
daysInMonth = (month) => {
return new Date(year, month + 1, 0).getDate();
};
end = new Date('2023-04-30')
start = new Date('2023-03-01')
year = 2023
names = ['Alice', 'Bob', 'Charlie'];
Plot.plot({
x: {
axis: "bottom",
// ticks: d3.utcDay
// .range(new Date(2023, 2, 20), new Date(2023, 3, 2)),
label: "Vacation Days",
tickFormat: formatDate,
grid: true
},
y: {
// label: "Name",
// padding: 30
},
marks: [
Plot.cell(datap, {
x: "startDate",
y: "name",
fill: (_, i) => d3.schemeCategory10[i % 10],
r: 5,
// title: d => `${d.name}: ${formatDate(new Date(d.date))}`
})
],
height: 200,
width: 800
});
FileAttachment("cal02.png").image()
formatDate = d3.utcFormat("%d");
datap = [
{name: "Alice", startDate: "2023-03-20", endDate: "2023-03-25"},
{name: "Bob", startDate: "2023-03-22", endDate: "2023-03-26"},
{name: "Carol", startDate: "2023-03-25", endDate: "2023-03-30"},
{name: "David", startDate: "2023-03-28", endDate: "2023-04-01"}
];
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.
