Public
Edited
Feb 18, 2023
chart = Calendar(allDays, {
x: d => new Date(d.date),
y: d => !!d.label ? d.isFamily ? 1: 0.5 : 0,
title: d => d.label + '(' + d.from + ' - ' + d.to + ') Familie? =>' +d.isFamily,
weekday: "monday",
width:900
})
import {Calendar} from "@d3/calendar";
dates.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
dates
function getAllDays(reservations) {
const days = [];
const today = new Date();
let latestReservationDate = today;
for (const reservation of reservations) {
const from = parseDate(reservation["Start Date"]);
if (from < latestReservationDate) {
latestReservationDate = from;
}
}
let currentDate = latestReservationDate;
while (currentDate <= today) {
let r = getReservationOnDate(currentDate)
days.push({ date: new Date(currentDate), ...r });
currentDate.setDate(currentDate.getDate() + 1);
}
return days;
}
getReservationOnDate = (date) => {
for (const reservation of dates) {
const from = parseDate(reservation["Start Date"]);
const to = parseDate(reservation["End Date"]);
if (date >= from && date <= to) {
return {from, to, label:reservation["Title"], isFamily: parseInt(reservation["Familie"]) === 1 };
break;
}
}
return {};
}
allDays = getAllDays(dates)
function parseDate(input) {
var parts = input.match(/(\d+)/g);
// note parts[1]-1
return new Date(parts[2], parts[1]-1, parts[0]);
}
function getDateHeatmap(dateArray) {
const dayOfYearMap = {};
// Loop through each date in the array
dateArray.forEach((date) => {
// Get the day of year for the date
const dayOfYear = getDayOfYear(date)
// Increment the count for the day in the map
dayOfYearMap[dayOfYear] = (dayOfYearMap[dayOfYear] || 0) + 1;
});
// Convert the map to an array of objects
const dayOfYearArray = Object.keys(dayOfYearMap).map((dayOfYear) => {
return {
dayOfYear: parseInt(dayOfYear),
count: dayOfYearMap[dayOfYear],
};
});
// Sort the array by count in descending order
return dayOfYearArray.sort((a, b) => b.count - a.count);
}
dates
daysInYearPopCount = getDateHeatmap(allDays.filter(d => d.label).map(d => (d.date)))//.filter(d => d.count > 3)
getDateHeatmap(allDays.filter(d => d.label).map(d => (d.date))).filter(d => d.count <= 3)
getAllDaysOfCurrentYear()
reservationDays = end.getDate() - start.getDate();
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.
