SKP
Get in touch

CASE FILE 04 / 2023 / CREATIVE TECHNOLOGIST

ORBIT — INTERACTIVE REPORT.

An annual report for a climate research foundation, rebuilt as an interactive document. Twenty-two datasets, a mandatory print edition and an audience that included people using screen readers on a decade-old machine.

Year
2023
Role
Creative technologist
Stack
R3F / GSAP / TypeScript
Datasets
22
Wireframe icosahedron wrapped in cyan energy filaments with orbital telemetry readouts around it
Concept render — orbital geometry and telemetry

//The constraint#

Annual reports are usually a PDF with a nice cover. This one had to work as a web document, produce a print edition from the same source, and remain fully usable without JavaScript — because a meaningful slice of the readership were policy staff on locked-down government machines. Three output targets, one set of content, no duplication.

//What I built#

Content lived as structured data with the figures as plain tables. That was the base layer, and it was the thing that had to be correct: semantic markup, real headings, real table captions, readable without a single line of script. Visualisation was then layered over the tables progressively, replacing them only once the browser proved it could handle it.

Spiral galaxy of fine particles with pale blue arms, satellite coverage accumulating over time
Concept render — coverage over time

The 3D globe showing station data was the one genuinely interactive piece, and it was built to be skippable. It reads the same table the fallback uses, so the numbers can never drift between the pretty version and the accessible one. Print came from the same source through a dedicated stylesheet, with the interactive figures swapped for static renders generated at build time.

//Result and regrets#

It passed an external WCAG 2.1 AA audit with two minor findings, both fixed within a week. The print edition went out unchanged from the web content, which had never happened in the foundation's previous eight reports. Regret: I underestimated the editorial workflow entirely. The tooling I handed over assumed comfort with structured data files, and it needed a proper editing interface that I hadn't scoped.

Wireframe terrain surface in blue and white with an elevation legend, imaging resolution across a landscape
Concept render — elevation and resolution
Fig. 07 — react three fiber, typescript, gsap