Public
Edited
Oct 1, 2023
5 stars
today = Temporal.Now.plainDateISO()
Temporal.Now.plainDateISO().toString()
Temporal.Now.plainDateISO().toJSON()
Temporal.Now.plainTimeISO()
Temporal.Now.plainTimeISO().toString()
Temporal.Now.plainTimeISO().toJSON()
Temporal.Now.plainDateTimeISO()
Temporal.Now.plainDateTimeISO().toString()
Temporal.Now.plainDateTimeISO().toJSON()
someDate = Temporal.PlainDate.from({ year: 2006, month: 8, day: 24 })
({
hour: someTime.hour,
minute: someTime.minute,
second: someTime.second,
millisecond: someTime.millisecond,
microsecond: someTime.microsecond,
nanosecond: someTime.nanosecond
})
timeStamp.epochMilliseconds
timeStamp.epochSeconds
timeStamp = Temporal.Now.instant()
Temporal = {
const { Intl, Temporal } = await import(
"https://unpkg.com/@js-temporal/polyfill@0.4.4/dist/index.esm.js?module"
);
return Temporal;
}
<input id='calendar-picker' type="date">
{
const datePicker = document.getElementById("calendar-picker");
const today = Temporal.Now.plainDateISO();
datePicker.max = today;
datePicker.value = today;
}
Plot.plot({
title: `LotR Calendar for ${today.year}`,
padding: 0,
height: 130,
x: { axis: null },
y: { tickFormat: Plot.formatWeekday("en", "narrow"), tickSize: 0 },
fy: { tickFormat: "" },
marks: [
Plot.cell(daysInThisYear, {
x: (d) => d.weekOfYear,
y: (d) => d.dayOfWeek,
fy: (d) => d.year,
stroke: "white",
fill: "lightgray",
inset: 0.5
}),
Plot.cell(lotrCalendarNow, {
x: (d) => d.date.weekOfYear,
y: (d) => d.date.dayOfWeek,
fy: (d) => d.date.year,
title: (d) => `${d.date.toString()}: ${d.event}`,
stroke: "white",
fill: "forestgreen",
inset: 0.5
})
]
})
daysInThisYear = {
const startDate = Temporal.PlainDate.from({
year: today.year,
month: 1,
day: 1
});
const daysOfYear = Array.from(
{ length: isLeapYear(today.year) ? 366 : 365 },
(_, i) => i
);
return daysOfYear.map((day) => startDate.add({ days: day }));
}
function isLeapYear(year) {
return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
}
lotrCalendarNow = lotrCalendarBase.map((d) => ({
date: d.date.toPlainDate({ year: today.year }),
event: d.event
}))
lotrCalendarBase = lotr.map((d) => ({
date: Temporal.PlainMonthDay.from({ month: +d.month, day: +d.day }),
event: d.event
}))
lotr = FileAttachment("lotr.csv").csv()
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.
