Published
Edited
Apr 26, 2021
1 fork
3 stars
md`# Understanding d3-time`
todayMidnightLocal = d3.timeDay()
// See, it's local time
todayMidnightLocal.toISOString()
beginningOfThisHourLocal = d3.timeHour()
todayMidnightUtc = d3.utcDay()
// Woohoo!
todayMidnightUtc.toISOString()
dateStr = "2021-04-15T15:20:05.123Z"
date = new Date(dateStr)
// date internally represents that UTC point in time, in milliseconds
+date // coerce to number
// same as .getTime()
date.getTime()
dateStr2 = date.toISOString()
// conversion from an iso 8601 datetime string and back preserves the value
dateStr === dateStr2
md`## interval.floor
interval.round and interval.ceil are similar`
date
dateBeginningOfYear = d3.timeYear.floor(date)
dateBeginningOfMonth = d3.timeMonth.floor(date)
dateBeginningOfWeek = d3.timeWeek.floor(date)
// beginning of the day of the input date
dateBeginningOfDay = d3.timeDay.floor(date)
// it's the beginning of the day in local time!
dateBeginningOfDay.toISOString()
dateBeginningOfHour = d3.timeHour.floor(date)
dateBeginningOfMinute = d3.timeMinute.floor(date)
dateBeginningOfSecond = d3.timeSecond.floor(date)
md`## interval.offset (date math!)`
date
tomorrow = d3.timeDay.offset(date, 1)
yesterday = d3.timeDay.offset(date, -1)
oneHourAgo = d3.timeHour.offset(date, -1)
md`## interval.range`
// one week prior to the date
start = d3.timeWeek.offset(date, -1)
end = date
everyDayBetween = d3.timeDay.range(start, end)
// note dates are floored to the specified interval
everyDayBetween[0].toISOString()
everyOtherDayBetween = d3.timeDay.range(start, end, 2)
everyMinuteBetween = d3.timeMinute.range(start, end)
md`## interval.every
Syntactic sugar on top of interval.filter`
// returns a function
everyOtherYear = d3.timeYear.every(2)
// called by itself, will just use new Date()
everyOtherYear()
end2 = end
start2 = d3.timeYear.offset(end2, -10)
// used with range
everyOtherYear.range(start2, end2)
everyTenMinutes = d3.timeMinute.every(10)
date
// the interval function works the same as any other interval, e.g. timeDay
everyTenMinutes.floor(date)
everyTenMinutes.ceil(date)
// 2 units = 20 minutes in this case
everyTenMinutes.offset(date, 2)
md`## interval.count`
minutesIntoTheDay = d3.timeMinute.count(d3.timeDay(), new Date())
start
end
daysBetween = d3.timeDay.count(start, end)
minutesBetween = d3.timeMinute.count(start, end)
md`## timeInterval`
// minimally, floor + offset. seems like you have to mutate date.
customInterval = d3.timeInterval(
date => {
date.setSeconds(0, 0);
},
(date, step) => {
date.setMinute(date.getMinute() + step);
}
)
date
customInterval(date)
customInterval(date, 2)
md`## What if we want every 10 minutes but offset by 3 minutes?`
// I think we have to use a filter
everyTenMinutesOffset = d3.timeMinute.filter(
d => (d.getMinutes() - 3) % 10 === 0
)
[start, end]
everyTenMinutesOffset.range(start, end)
md`## How is it used in TimeChart?`
timeChartInterval = d3.utcMinute.every(10) // sample frequency
timeChartStop = timeChartInterval() // exclusive
// remember calling this just calls it with new Date(), so it's the nearest "every 10 minutes" mark
timeChartStart = timeChartInterval.offset(timeChartStop, -timeChartTicks) // inclusive
// why -928? gives a 26px margin/indent at the left
// go back 928 intervals, i.e. 928 * 10 minutes == 9,280 minutes == 6.44 days or about a week's worth of data
timeChartTicks = 928
// 1 minute intervals == 15.466 hrs or a bit over a day's worth of data
// 1 hour intervals = 38.66 days
timeChartIntervalRange = timeChartInterval.range(timeChartStart, timeChartStop)
// internally, the width of the timechart will be determined by:
timeChartIntervalRange.length
width
timeChartData = {
let data = [];
for (let i = 0; i < timeChartTicks; i++) {
data.push({
date: timeChartIntervalRange[i],
value: Math.random() * Math.sin(i * 0.02)
});
}
return data;
}
TimeChart(timeChartData, {
interval: timeChartInterval,
start: timeChartStart,
stop: timeChartStop,
title: "Random data",
max: 1,
// bands: 1,
scheme: "piyg",
marginTop: -16
})
md`## Some real data`
bitcoinHistory = fetch(
`https://api.coincap.io/v2/assets/bitcoin/history?interval=h12&start=${+tcbStart}&end=${+tcbStop}` // 1 day intervals
)
.then(response => response.json())
.then(data => data)
tcbData = bitcoinHistory.data.map(d => ({
value: +d.priceUsd,
date: tcbInterval.floor(new Date(d.date)) // good idea to floor the date with the interval especially with day interval, to avoid timezone offset which will zero out all the data in the timechart
}))
maxPrice = d3.max(tcbData.map(d => d.value))
tcbInterval = d3.timeHour.every(12)
tcbStart = d3.timeYear.offset(tcbStop, -1) // max range for h12 data is 1 year
tcbStop = tcbInterval()
TimeChart(tcbData, {
interval: tcbInterval,
start: tcbStart,
stop: tcbStop,
title: "Bitcoin",
max: maxPrice,
marginTop: -16,
scheme: "blues"
// bands: 1
})
md`## Imports`
import { TimeChart, TimeAxis, d3 } from "@observablehq/timechart"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.