Reality Graph
An interactive map of matter: elements, compounds, materials and inventions, and how they connect.
A periodic table shows elements one by one. It does not show that iron ends up in steel, and steel in a steam locomotive. I wanted one place to browse those links. It also had to let you build a molecule and test a reaction.
Three decisions that shaped it.
- 01
Graph edges are derived from the data, not stored
Why. A compound lists its elements and an invention lists its prerequisites. The graph is built from those fields, so adding an entity adds its links.
Trade-off. Only links that fit a field exist. The whole graph is computed when the module loads.
- 02
D3 owns the SVG, React owns the filters
Why. The force simulation, zoom and labels run in D3 inside one effect. Filters live in a Zustand store and decide which nodes reach it.
Trade-off. Any filter change tears down the SVG and restarts the simulation, so the layout jumps.
- 03
Snapshot undo in the editor, saved molecules in IndexedDB
Why. Each edit pushes a copy of atoms and bonds, capped at 50 steps. Dexie keeps saved molecules across sessions without a server.
Trade-off. Snapshots copy the full molecule on every step. Saved molecules stay in that one browser.
Reality Graph
An interactive map of matter: elements, compounds, materials and inventions, and how they connect.
- Role
- Personal project: designed and built end to end
- Stack
- React 19, TypeScript, Zustand, D3, React Three Fiber, GSAP
A periodic table shows elements one by one. It does not show that iron ends up in steel, and steel in a steam locomotive. I wanted one place to browse those links. It also had to let you build a molecule and test a reaction.
Three decisions that shaped it.
Graph edges are derived from the data, not stored
Why. A compound lists its elements and an invention lists its prerequisites. The graph is built from those fields, so adding an entity adds its links.
Trade-off. Only links that fit a field exist. The whole graph is computed when the module loads.
D3 owns the SVG, React owns the filters
Why. The force simulation, zoom and labels run in D3 inside one effect. Filters live in a Zustand store and decide which nodes reach it.
Trade-off. Any filter change tears down the SVG and restarts the simulation, so the layout jumps.
Snapshot undo in the editor, saved molecules in IndexedDB
Why. Each edit pushes a copy of atoms and bonds, capped at 50 steps. Dexie keeps saved molecules across sessions without a server.
Trade-off. Snapshots copy the full molecule on every step. Saved molecules stay in that one browser.