A periodic table as a navigable atlas — every element a folio, every property a visual mark.

Atlas treats the periodic table as a directed graph of 118 elements connected by position, category, discovery, etymology, and measurable properties. The web app exposes that graph through an interactive periodic table, individual element folios, and seven visualization pages — all rendered with precise SVG text layout via @chenglou/pretext.

60% Oliver Byrne visual drama, 40% Edward Tufte data density:

• Hard colour fields — solid rects, no gradients, no border-radius
• Four colours — paper #f7f2e8, deep blue #133e7c, warm red #9e1c2c, mustard #c59b1a
• Block identity — s/p/d/f blocks map to blue/mustard/red/black so you recognise the block before reading a word
• Giant numerals — atomic number and symbol are hero elements, not labels
• High data-ink ratio — property bars where length IS the value, no chartjunk
• Pretext typography — all body text measured and positioned with @chenglou/pretext, rendered as SVG <text> elements with thin rules between lines
• 90% still, 10% explosive — text staggers in line-by-line, data plates wipe, bars grow, symbols morph via the View Transitions API

npm install
npm run build:data   # derive element data from seed
npm run dev          # http://localhost:5173

The reviewed social-card PNGs are committed, so a fresh clone serves them in development and production without host-dependent regeneration. If their design or element content changes, first bump ELEMENT_SOCIAL_CARD_VERSION, then run npm run build:social; the generator retains earlier versions and refuses to change an existing immutable version. Current element cards are opaque RGB PNGs so social-media image processors do not need to handle an alpha channel.

Every element folio connects to its neighbours in the directed graph:

• Positional — prev/next by atomic number
• Categorical — group, period, block, category index pages
• Historical — other elements by the same discoverer, link to discovery timeline
• Etymological — other elements sharing a name origin, link to etymology map
• Property-based — rankings, anomalies, scatter plots
• Discoverer graph — folio → discoverer detail → related discoverers (shared elements, overlapping eras) → back to folio
• Timeline era browsing — folio → era page (decade or "antiquity") → nearby eras → discoverers active in that era
• Cross-links — discoverer pages link to their active timeline era; era pages link to discoverers within them

src/
  components/    React components (PeriodicTable, Folio, PretextSvg, ...)
  pages/         Route-level page components (lazy-loaded)
  hooks/         usePretextLines, useShapedText, useViewTransition, ...
  lib/           data access, pretext wrapper, theme, grid layout
data/
  seed/          Source element data (committed)
  generated/     Derived JSON files (built from seed via scripts/)
scripts/         Data derivation and enrichment scripts
tests/
  unit/          Vitest unit tests
  e2e/           Playwright end-to-end tests (desktop + mobile)

Key dependencies:

• React 19 + React Router 7 — routing with lazy loading and data loaders
• @chenglou/pretext — precise text measurement for SVG layout (three tiers: simple lines, shaped text around plates, label fitting)
• Vite 6 — build tooling with ES2022 target
• Playwright — e2e tests covering all visualization pages, readability, and no-overlap assertions

npm run build:data

Reads data/seed/elements.json (118 elements with properties from PubChem, identifiers from Wikidata, summaries from Wikipedia) and derives:

• elements.json — full array
• element-*.json — one file per element (for route-level code splitting)
• groups.json, periods.json, blocks.json, categories.json — structural indices
• rankings.json — elements sorted by mass, electronegativity, ionization energy, radius
• anomalies.json, discoverers.json, etymology.json, timeline.json — visualization data

npm test              # unit tests (Vitest)
npm run test:e2e      # e2e tests (Playwright, desktop + mobile)

The e2e suite includes:

• Navigation tests — every route loads, keyboard nav works, transitions complete
• Visualization page tests — element counts, corner separation, hover tooltips, click navigation
• Readability/legibility tests — bounding-box overlap detection (assertNoOverlap), visible text assertions, mobile layout checks, page transition roundtrips

npm run deploy   # builds and deploys to Cloudflare Pages

Atlas would not exist without PubChem, Wikidata, and Wikipedia. These open data projects represent decades of painstaking work by scientists, editors, and volunteers worldwide. What Atlas adds is a layer of cross-linked navigation, visual encoding, and computed relationships that make the periodic table explorable as a connected graph rather than a flat table. Every element connects to its group, period, block, category, discoverer, era, etymology, neighbours, anomalies, and rankings — thirteen relationship types, all surfaced as navigable links. But the data beneath it all comes from the community. We are grateful.

Data: PubChem (public domain), Wikidata (CC0 1.0), Wikipedia excerpts (CC BY-SA 4.0).