Published
Edited
Mar 16, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable selected = null
Insert cell
mutable clickedDT = null
Insert cell
mutable clickedMonth = null
Insert cell
mutable weekDays = null
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colorScale = d3.scaleSequential().domain(d3.interpolateTurbo)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
years = d3.groups(DATA, d => d.date.getFullYear()).reverse()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
format = d3.format("+.2%")
Insert cell
formatMonth = d3.timeFormat("%b")
Insert cell
monthFormat = d3.timeFormat('%b')
Insert cell
formatDay = d => "SMTWTFS"[d.getDay()]
Insert cell
dayFormat = d3.timeFormat('%a')
Insert cell
formatDate = d3.utcFormat("%x")
Insert cell
Insert cell
// height = 540
Insert cell
height = cellSize * (weekday === "weekday" ? 7 : 9)
Insert cell
Insert cell
transition_duration = 500
Insert cell
timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday
Insert cell
cellSize = 17
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { turboColorScheme } from '@stroked/how-to-slice-a-sphere'
Insert cell
import { Routes } from '@stroked/timeline-data'
Insert cell
hourInSeconds = 60 * 60;
Insert cell
dayInSeconds = 24 * hourInSeconds
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
delaunay.find(100, 100)
Insert cell

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.
Learn more