Published
Edited
Apr 30, 2019
md`# Time`
md`## Calendar days`
month = d3.timeMonth.floor(time)
mondayOfMonth = d3.timeMonday(month)
nextMonth = d3.timeSecond.offset(d3.timeMonth.offset(month, 1), -1)
mondayOnOrAfterNextMonth = d3.timeSecond.offset(d3.timeMonday.ceil(nextMonth), -1)
rawCalendarDays = d3.timeDays(mondayOfMonth, mondayOnOrAfterNextMonth)
calendarDays = rawCalendarDays.map(day => {
const today = +d3.timeDay(now) === +day;
const inMonth = +d3.timeMonth(day) === +month;
return {
date: day,
today,
inMonth
};
})
md`### Days by Week`
monthDaysUngrouped = monthDaysGroupedByWeek.reduce((acc, curr) => acc.concat(curr), [])
table(monthDaysUngrouped, {
style: "compact",
paged: monthDaysUngrouped.length,
columns: {
date: {
formatter(val) {
return formatDay(val);
}
}
}
})
formatDay = d3.timeFormat("%A %B %d")
md`## Hours, minutes, seconds`
now = new Date()
time = d3.timeMonth.offset(now, 1)
day = [d3.timeDay.floor(time), new Date()]
new Set(d3.timeHours(day[0], day[1]).map(formatHour))
new Set(d3.timeMinutes(day[0], day[1]).map(formatMinute))
new Set(d3.timeSeconds(day[0], day[1]).map(formatSecond))
formatHour = d3.timeFormat("%H")
formatMinute = d3.timeFormat("%M")
formatSecond = d3.timeFormat("%S")
d3.timeHours(new Date())
md`## Timespan formatting`
span = 3000000
seconds = Math.floor(span - (hours * 60 * 60) - (minutes * 60))
minutes = Math.floor((span - (hours * 60 * 60)) / 60)
hours = Math.floor(span / 60 / 60)
result = `${f(hours)}:${f(minutes)}:${f(seconds)}`
f = d3.format("02d")
md`## Imports`
d3 = require("d3@5")
d3_array = require("d3-array@2")
import {table} from "@tmcw/tables@513"
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.
