Published
Edited
Sep 14, 2020
2 forks
6 stars
years = d3.groups(data, d => d.date.getUTCFullYear()).reverse()
cellSize = 17
width = 954
height = cellSize * (weekday === "weekday" ? 7 : 9)
weekday = "monday"
timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday
countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7
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}`;
}
formatValue = x => `${Math.exp(x).toFixed(2)}×`
formatDate = d3.utcFormat("%x")
formatDay = i => "SMTWTFS"[i]
formatMonth = d3.utcFormat("%b")
color = d3.scaleDiverging([d3.min(data, d => d.value), 0, d3.max(data, d => d.value)], d3.interpolateSpectral)
d3 = require("d3@6")
import {legend} from "@d3/color-legend"
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.
