The concept
Weather as a load-bearing thing.
Alder Vale’s imaginary gauge has only one job: record the water that falls into a small North Pennine valley. The design gives those daily observations a civic scale. A cathedral felt right because it is built in bays, because its windows turn light into information, and because people already use its language to describe awe.
The site makes a wet year taller and more crowded; a dry one is spare. Nothing in the main drawing is a decorative photograph or a static mockup. Change the year and the same rainfall data re-cuts the building.
Signature technique
Canvas that rebuilds from the ledger.
The hard-coded 1985–2024 records hold annual rain, March rain, the wettest-month total, and wet-day count. A small deterministic distribution creates the twelve monthly bays. Column height reads monthly fall; paired arches respond to local peaks; seasonal totals pull four flying buttresses; March cuts the central portal; and the rose window becomes twelve proportional segments. The lower rain transept uses those same monthly values again, letting one month open into forty year-staves before a chosen year is sent back to the cathedral.
values.forEach((rain, i) => {
const phase = smooth(clamp((p - i * .035) / .32));
const columnHeight = (height * .29 + (rain / 155) * height * .31) * phase;
fillRect(colX, baseY - columnHeight, colW, columnHeight, "#9FB3C8", .76);
});
drawRose(center, roseY + height * .085,
Math.min(width * .2, height * .15), values, selected.annual, p);
const seasons = [0, 3, 6, 9].map(start =>
values.slice(start, start + 3).reduce((sum, value) => sum + value, 0));
readerStaves.innerHTML = values.map((value, index) =>
'<button class="rain-stave" style="--level:' +
Math.max(18, Math.round(value / high * 100)) + '%"></button>'
).join("");Palette + type
Ink, rain, brass, paper.
High-contrast serif for the part of the site that carries memory and gravity.
Condensed grotesk for the observational layer: dates, measurements, labels, and quiet instructions.
Three passes
What changed while it was being made.
- Pass 1 — correctnessReworked the canvas lifecycle so its structural build starts only when visible, pauses while hidden or off-screen, and resumes from its current stage. The device pixel ratio remains capped at 2; a no-observer fallback still renders the cathedral. Enlarged the year scrubber, archive controls, and footer links to 44px targets; hardened narrow grids and guide code blocks against page-level overflow; and added guide reduced-motion support. Known limitation: the visual is canvas-only, so the nearby caption and explanatory sections provide its non-visual description rather than a data table.
- Pass 2 — design depthWeak moment 1: the closing “Reading the stones” block repeated the earlier split-column rhythm. It became a twelve-column composition: an oversized chapter number sits behind the copy while the method ledger overlaps it as an offset slab. Weak moment 2: the seasonal chart was too quiet beside the cathedral. A cropped 1,015 mm annual mark and ribbed bars gave the ordinary year a larger, more architectural field. Weak moment 3: the hero stopped safely inside its grid and its display type lacked force. Its tightened, balanced scale now works with a frame that pushes into the margin; the cathedral also gained data-driven buttresses and a March-cut portal.
- Pass 3 — complexifyThe average-month bars were still only a captioned chart. They became the rain transept: each bay is now a keyboard-operable key that opens forty animated annual staves, identifies its low, high, and average readings, and can send a chosen year back to the hero cathedral. “Close the glass” is a real cleared state rather than a blank panel, returning the twelve-bay annual rhythm. The final sweep added Open Graph metadata, tightened the explanatory copy, and retained reduced-motion overrides, visible focus styling, and narrow one-column layouts around the new instrument.