---
title: Case Study: Interactive Data Report in React Three
description: An annual report rebuilt as an interactive document: twenty-two datasets, a mandatory print edition, and readers on screen readers and decade-old hardware.
canonical: https://www.hire-web-dev.com/work/orbit/
section: Case studies
updated: 2026-09-11
author: SumanKumar Phuyal
site: hire-web-dev.com
note: >-
  Generated from the page of record at the canonical URL above.
  The four case studies are placeholder work and their metrics
  were never measured;
  imagery is AI-generated concept art. See https://www.hire-web-dev.com/disclosure/.
---

# 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.

## The constraint

<!-- anchor: https://www.hire-web-dev.com/work/orbit/#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

<!-- anchor: https://www.hire-web-dev.com/work/orbit/#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.

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

<!-- anchor: https://www.hire-web-dev.com/work/orbit/#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.

## Key facts

- Year: 2023
- Role: Creative technologist
- Stack: R3F / GSAP / TypeScript
- Datasets: 22

## Case file

- Year: 2023
- Role: Creative technologist
- Audit: WCAG 2.1 AA
- Outputs: Web / print / no-JS

## Topics

REACT THREE FIBER, TYPESCRIPT, GSAP, ACCESSIBILITY, DATA VIZ, PRINT CSS

## Image

![Wireframe icosahedron wrapped in cyan energy filaments with orbital telemetry readouts around it](https://www.hire-web-dev.com/assets/img/orbit-wireframe-icosahedron-telemetry.jpg)