Datascape

The Hidden Dimension — six familiar charts, each opened back into the dimension it flattened.

Live: datascape-5of.pages.dev

Every chart on a page is flat because something was folded away: height, density, time, the ground under the water. Each piece here starts from a chart you have seen before, built from real measurements, and opens it into the space it came from. Three.js and Vite, no framework.

The pieces

Piece	The flat chart	What it opens into	Data
Storm Chamber	Weather radar map	The fourteen cones of one radar volume scan, filled into a box of sky that can be cut open, 13 minutes before the 2013 Rozel tornado	NOAA NEXRAD Level II (KDDC); NCEI Storm Events
The Shadow of Water	Phase diagram of water	The pressure–temperature–density surface that casts it	IAPWS-95 (CoolProp), IAPWS R10-06 and R14-08 (iapws)
The Electric Heart	12-lead ECG	The loop the heart's electrical vector draws in space	PTB Diagnostic ECG Database (PhysioNet)
Between Tides	Tide gauge curve	A month of measured tide laid over the surveyed ground it floods	NOAA CO-OPS 8410140; NOAA NCEI CUDEM
Commit City	GitHub contribution calendar	A city at night, or a contour terrain, one building a day	GitHub, for any username
PSR B1919+21	The stacked pulsar plot	White ridges driven by music, a microphone or a built-in synth	Your audio

The four stories are guided in chapters, with a "Hidden dimension" control that folds each scene back to its flat chart. Every figure on screen comes from the data it cites, and each piece has an "About the data" panel. docs/storm-chamber.md documents Storm Chamber's method, verification and limitations in full.

Run it

Requires Node.js 20 or later (CI uses the version in .nvmrc). The stories need WebGL 2.

npm install
npm run dev        # http://localhost:5173
npm run build      # static site in dist/
npm run preview    # serve dist/, with /api/contributions

Commit City reads the calendar through /api/contributions?user=<name>&year=<year>, because a browser cannot fetch it directly. With a GITHUB_TOKEN (any read-only token) the server uses GitHub's GraphQL API. Without one it parses the public github.com/users/<name>/contributions page, which needs no setup but can break when GitHub changes the page. Results are cached in memory for ten minutes.

Tests

npm run lint       # ESLint
npm test           # Vitest: data integrity, beam geometry, physical reference values, every figure in the prose
npm run test:e2e   # Playwright on the production build: every chapter, interactions, layout, accessibility

The unit tests read the committed data the way the pages do. They check:

• the layout and encoding of every binary;
• the 4/3-Earth radar beam model against the textbook formula and the Python generator;
• the gridded storm against the sweeps it came from;
• the water surface's critical and triple points against IAPWS;
• the ECG's heart rate against its own R peaks;
• the tide data against its own summary;
• that every number in Storm Chamber's text is derived from the data.

Locally the browser tests drive your installed Google Chrome with the real GPU. In CI they run on Chromium with WebGL in SwiftShader, split across two runners. They check:

• every chapter of every story, by keyboard and from deep links;
• the readouts and that frames are actually drawn;
• scene labels on phone and laptop layouts;
• fallbacks without WebGL, DecompressionStream or JavaScript, and recovery from a lost GPU context;
• axe-core accessibility on all seven pages.

Reproduce the data

Everything in public/data/ is generated by the scripts in scripts/ and can be rebuilt byte for byte from public sources:

python3.12 -m venv .venv && .venv/bin/pip install -r scripts/requirements.txt
PYTHON=.venv/bin/python scripts/check_reproducible.sh               # all four stories
PYTHON=.venv/bin/python scripts/check_reproducible.sh storm tides   # or some of them

The script downloads about 300 MB of sources: the radar volume, the PTB record and two CUDEM tiles. Set DATASCAPE_CACHE=<dir> to keep them between runs. It checks each source against the SHA-256 it had when the data were made, reruns the unmodified generators, and compares every output with the committed file. CI does the same whenever a generator or the data change, and weekly.

How it is built

index.html, storm.html, water.html,   one page per piece; Vite builds them as a multi-page app
heart.html, tides.html,
skyline.html, pulsar.html
src/shared/        renderer and post-processing, the chapter card and camera rig, scene labels,
                   the dimension control, the About panel, self-hosted fonts, series styles
src/storm/         radar beam model, sweeps, ray-marched volume with precomputed sunlight, section
src/water/         IAPWS surface, coexistence walls, processes, the diagrams it casts
src/heart/         ECG paper, vectorcardiogram trace and its shadows
src/tides/         terrain, water plane, tide timeline and recorder
src/skyline/       instanced city, contour terrain, plinth, hover and snapshot
src/pulsar/        ring-buffer ridges, audio sources, the demo synth
server/            contribution calendar fetch and parse (runs in Node and Workers)
functions/         Cloudflare Pages Function: /api/contributions
scripts/           Python generators for public/data/, and the reproducibility check
tests/unit/        Vitest
tests/e2e/         Playwright

Storm Chamber adapts its resolution to keep frames on time. It counts frames that miss the display's interval and trades pixel ratio for a steady 60 fps (measurements are in the Storm Chamber notes).

Deploy

The site is static, plus one Cloudflare Pages Function:

• Build command: npm run build
• Output directory: dist
• Node: the version in .nvmrc
• API: functions/ serves /api/contributions.
• Environment: set GITHUB_TOKEN (a fine-grained token with read-only access to public repositories is enough) to avoid GitHub's limits on page scraping.
• Caching: public/_headers makes hashed assets immutable and caches the data for a day.

To check a build under the Pages runtime before deploying, or a deployed preview:

npm run build && npx wrangler pages dev dist --port 8788
BASE_URL=http://localhost:8788 npm run test:e2e

Sources and credits

• Radar: NOAA NEXRAD Level II, KDDC, 19 May 2013 00:04:55 UTC, from the NOAA Open Data Dissemination archive (public domain). The tornado record is NOAA NCEI Storm Events, event 457695.
• Water: IAPWS-95 via CoolProp 8.0. Ice Ih (R10-06) and the sublimation and melting curves (R14-08) via iapws.
• ECG: PTB Diagnostic ECG Database 1.0.0, record patient122/s0312lre (Bousseljot, Kreiseler and Schnabel, 1995), via PhysioNet (Goldberger et al., Circulation 101(23), 2000). Licensed under the Open Data Commons Attribution License v1.0.
• Tides: NOAA CO-OPS station 8410140, Eastport, Maine, verified 6-minute water levels and predictions, September 2024. Ground from the NOAA NCEI Continuously Updated DEM (CUDEM), 1/9 arc-second topobathy (public domain).
• Type: Instrument Serif, Inter and JetBrains Mono (SIL Open Font License), self-hosted via Fontsource.