Colophon of the Build · STRATUM
How the record was set
A short account of the brief this site answered, the one technique that carries its look, and what three passes of hostile self-critique changed.
01 The brief
The assignment was stratum, the finance and research credibility vertical: a boutique quantitative research letter, rendered as a scroll-driven data essay on one public, citable dataset. Scientific-plate aesthetics, diffraction motifs, mono data tables set like lab records, needle-drawn charts on seismogram paper. Palette fixed at paper, ink, teal ink as the single stroke, and depth blue reserved for data series only. Type fixed at Newsreader and IBM Plex Mono.
The register chambers were Pattern at Scale and The Quiet Page. The thing to prove: honest data storytelling with editorial standards, the vertical that buys trust from serious clients.
The dataset chosen is the NOAA Mauna Loa monthly mean CO2 record, the Keeling Curve, 820 monthly means from 1958 to 2026. It was picked because it holds two rhythms at two scales at once: a hundred-part secular climb and a yearly six-part breath. Pattern at scale, literally, in real public-domain measurement. The data was fetched once, processed by a build script, and baked to a local JSON; every derived figure is documented in the appendix.
02 The signature technique
Every chart is drawn to canvas from the baked data, and every line is laid twice: a faint offset ghost pass with sub-pixel jitter for the feel of a needle on paper, then an exact primary pass that never moves a real data point. The jitter lives only on the ghost, so the record stays honest while the ink looks hand-laid. The same routine draws straight for the 820-point series and smoothed, through a Catmull-Rom spline, for the yearly cycle.
// hand-drawn line: faint jittered ghost, then an exact primary pass
function needle(ctx, pts, color, width, smooth) {
ctx.save(); // ghost: texture only
ctx.globalAlpha = 0.28; ctx.strokeStyle = color;
ctx.lineWidth = width * 0.9;
ctx.beginPath(); tracePath(ctx, pts, smooth, true); ctx.stroke();
ctx.restore();
ctx.save(); // primary: geometrically exact, no jitter
ctx.strokeStyle = color; ctx.lineWidth = width;
ctx.beginPath(); tracePath(ctx, pts, smooth, false); ctx.stroke();
ctx.restore();
}
main.js · the needle. Charts draw on scroll via GSAP ScrollTrigger; on a wide screen the series reads out any month under the cursor.
Around the charts sit the rest of the plate: a diffraction-ring instrument motif behind the masthead, registration corner marks framing each figure, a stratigraphic scroll rail down the left margin that indexes the plates, and a print stylesheet built so the letter can actually be printed.
03 Three passes of critique