01The brief
Terra Rhythm is a self-initiated editorial piece in Hannah Kwakye's portfolio collection — the entry that demonstrates scroll-driven data storytelling as a discipline: sticky scenes, hand-rolled SVG charts, dataviz-grade annotation, and long-form pacing. The imagined publication context is a science-and-culture magazine feature: wonder-driven, apolitical, written from inside the region it describes.
Subject choice mattered. West Africa's rainfall rhythm is a genuinely magnificent system — a single moving belt that gives one city two wet seasons and its neighbour one — and it's a story most chart-literate readers outside the region have never been shown. It also lets one essay demonstrate five different chart forms without a single contrived visual.
02The problem
Climate-adjacent data writing usually fails one of two ways: it's a dashboard with no narrative (accurate, unread), or it's a mood film with no data (felt, unlearned). The design problem was to hold both — teach chart-reading while the reader thinks they're just reading.
That framing produced the essay's structure: every act introduces exactly one instrument, spends four or five scenes teaching the reader to hear it, and hands its conclusion to the next act. The wheel poses the question, the map answers it, the farm and the city show the stakes, the future complicates it. A reader who finishes has, without noticing, read a radial chart, an animated map, a gantt, a hyetograph against a threshold, and a variance band — five literacies smuggled inside one story.
03Directions considered — and rejected
A single interactive dashboard
Rejected. Dashboards answer questions the reader already has; this audience doesn't have one yet. Without narrative sequencing there's no reason the August pause should ever be noticed, let alone explained. Exploration was traded for authored order.
A motion/video essay
Rejected. Video controls the clock, but it can't be paused mid-thought and inspected, it's heavy, it's inaccessible by default, and nothing in it is reusable. Scroll gives the reader the playhead — every scene waits as long as understanding takes — and SVG keeps every label real text.
Real observational datasets
Rejected, deliberately. Real station data would drag the piece into questions it shouldn't claim authority on — measurement provenance, station homogeneity, climate attribution — and would put a portfolio demo in the position of looking citable. Hand-authored illustrative data, loudly labeled, keeps the piece honest about what it is (a teaching artifact about shape) while staying faithful to the documented patterns. The label isn't a disclaimer buried in a footer; it's on the title screen, on every chart, and in a method note with the full tables.
Canvas or WebGL scenes
Rejected. The essay's soul is annotation — leader lines, direct labels, a threshold with a sentence attached. SVG gives crisp, zoomable, selectable, screen-reader-addressable text inside the graphic itself, and CSS handles most of the choreography for free. Nothing here needs a GPU.
04Key decisions & trade-offs
- One pinned stage per act rather than one global morphing stage. A global stage is a spectacular demo but couples every scene to every other scene; per-act stages keep each instrument's code and state isolated, and cost only a page-length of scroll between acts — which the act-break bands turn into pacing.
- The year-wheel as recurring instrument. The radial form was chosen over a conventional column chart because the essay's core insight is circularity — December leaning into January. Act II then re-explains the wheel's two peaks with the map, and Act V closes on it. Repetition builds literacy; novelty would have reset it.
- Discrete steps + eased targets over scroll-scrubbed animation. Scrubbing ties motion speed to flick speed and punishes slow readers; step targets with a self-sleeping lerp give every reader the same choreography, reverse gracefully, and collapse to instant final states under reduced motion.
- A dark fourth act. Storm slate for the Accra chapter is scenography — the sky going dark at breakfast — but it also resets attention twenty minutes into a long read, and it forced a properly validated dark-surface chart colour rather than a lazy opacity flip.
- Mobile: stage above prose. On phones the stage pins to the top ~45% of the screen and prose slides beneath it. The trade-off is a smaller chart; the mitigation is SVG type bumped in viewBox units so axis text stays legible at 0.55× scale. The alternative — inlining charts between paragraphs — was rejected because it breaks the essay's one signature: the instrument that stays while the words move.
- Copy discipline. The subject touches climate and infrastructure, so the writing keeps to wonder and arithmetic: no blame, no policy, no forecasting authority. "Floods are subtraction" is as far as the essay editorialises.
05Intended impact
As a design goal, Terra Rhythm should leave a reader able to re-read all five charts unaided — that's the measurable version of "data storytelling." As a portfolio piece, it demonstrates capabilities that transfer directly to client work: long-form scrollytelling architecture, bespoke SVG dataviz with defensible colour and annotation craft, editorial art direction under an accessibility-first constraint, and the judgment to label invented data as invented.
The same machinery — pinned instruments, stepped prose, validated palettes, table-view twins — fits annual reports, product explainers, civic communication and journalism. The essay is the demo; the discipline is the deliverable.