Published
Edited
May 3, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
formatMonth(d3.utcMonth(formatIso(years[0][1][0].date)))
Insert cell
years[0][1].map((d) => formatMonth(d3.utcMonth(formatIso(d.date))))
Insert cell
years = d3.groups(data, (d) => formatIso(d.date).getUTCFullYear()).reverse()
Insert cell
cellSize = 17
Insert cell
width = 954
Insert cell
height = cellSize * (weekday === "weekday" ? 7 : 9)
Insert cell
weekday = "monday"
Insert cell
timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday
Insert cell
countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7
Insert cell
function pathMonth(t) {
const n = weekday === "weekday" ? 5 : 7;
const d = Math.max(0, Math.min(n, countDay(t.getUTCDay())));
const w = timeWeek.count(d3.utcYear(t), t);
return `${d === 0 ? `M${w * cellSize},0`
: d === n ? `M${(w + 1) * cellSize},0`
: `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;
}
Insert cell
formatIso = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ")
Insert cell
formatDate = d3.utcFormat("%x")
Insert cell
formatDay = i => "SMTWTFS"[i]
Insert cell
formatMonth = d3.utcFormat("%b")
Insert cell
color = d3.scaleSequential(
d3.extent(data.map((d) => d.value)),
d3.interpolateTurbo
)
Insert cell
d3 = require("d3@6")
Insert cell
import {legend} from "@d3/color-legend"
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