Published
Edited
Feb 24, 2022
mutable hoveredDate = null
// colorScale = d3.scaleSequential(d3.interpolateViridis).domain([12, 0])
// colorScale = d3.scaleSequential(d3.interpolateYlGnBu).domain([0, 12])
colorScale = d3.scaleQuantize(d3.schemeYlGnBu[5]).domain([0, 12]).nice()
colorScale.thresholds()
params = ({
innerRadius: 100,
outerRadius: 350,
radToDeg: 180 / Math.PI,
msToDays: 1000 * 60 * 60 * 24, // ms > s > hr > days,
msToHours: 1000 * 60 * 60,
msToMin: 1000 * 60,
nightEnd: 9, // 9am
nightStart: 18.5, // 6:30pm
fixSleepBefore: new Date("2021/10/04"), // date before which we need to calculate sleep windows
})
margin = ({
top: 150,
bottom: 50,
left: 50,
right: 50
})
height = params.outerRadius * 2.5 + margin.top + margin.bottom
numDays = Math.floor((dateExtent[1] - dateExtent[0]) / params.msToDays) + 1
dateExtent = d3.extent(sleepLogs, (d) => d.aStart)
firstDay = formatters.dateParse(formatters.date(dateExtent[0]))
timeSinceMidnightExtent = [
d3.min(sleepLogs, (d) => d.timeToStart),
d3.max(sleepLogs, (d) => d.timeToEnd)
]
formatters = ({
date: d3.utcFormat("%Y-%m-%d"),
dateParse: d3.utcParse("%Y-%m-%d"),
yTickFormat: (d) => (d < 24 ? `${d - 12}pm` : `${d - 24}am`)
})
dataGroupedByDay= d3.groups(sleepLogs, (d) => formatters.date(d.aStart))
sleepLogs
sleepLogs.filter((d) => d.timeToEnd - d.timeToStart < 0)
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
sleepLogs = FileAttachment("sleepLogs.csv")
.csv()
.then((data) => data.map((d) => d3.autoType(d)))
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.
