Reality Graph
Un mapa interactivo de la materia: elementos, compuestos, materiales e inventos, y cómo se conectan.
Una tabla periódica muestra los elementos de a uno. No muestra que el hierro termina en el acero, y el acero en una locomotora a vapor. Quería un lugar para recorrer esos vínculos. También tenía que dejarte armar una molécula y probar una reacción.
Tres decisiones que lo definieron.
- 01
Las aristas del grafo se derivan de los datos, no se guardan
Por qué. Un compuesto lista sus elementos y un invento lista sus requisitos. El grafo se arma con esos campos, así que sumar una entidad suma sus vínculos.
El costo. Solo existen los vínculos que entran en un campo. El grafo entero se calcula al cargar el módulo.
- 02
D3 maneja el SVG, React maneja los filtros
Por qué. La simulación de fuerzas, el zoom y las etiquetas corren en D3 dentro de un efecto. Los filtros viven en un store de Zustand y deciden qué nodos le llegan.
El costo. Cualquier cambio de filtro borra el SVG y reinicia la simulación, así que el layout salta.
- 03
Undo por snapshots en el editor, moléculas guardadas en IndexedDB
Por qué. Cada edición guarda una copia de átomos y enlaces, con un tope de 50 pasos. Dexie conserva las moléculas guardadas entre sesiones sin servidor.
El costo. Los snapshots copian la molécula entera en cada paso. Lo guardado queda en ese navegador.
Reality Graph
Un mapa interactivo de la materia: elementos, compuestos, materiales e inventos, y cómo se conectan.
- Rol
- Proyecto personal: diseñado y construido de punta a punta
- Stack
- React 19, TypeScript, Zustand, D3, React Three Fiber, GSAP
Una tabla periódica muestra los elementos de a uno. No muestra que el hierro termina en el acero, y el acero en una locomotora a vapor. Quería un lugar para recorrer esos vínculos. También tenía que dejarte armar una molécula y probar una reacción.
Tres decisiones que lo definieron.
Las aristas del grafo se derivan de los datos, no se guardan
Por qué. Un compuesto lista sus elementos y un invento lista sus requisitos. El grafo se arma con esos campos, así que sumar una entidad suma sus vínculos.
El costo. Solo existen los vínculos que entran en un campo. El grafo entero se calcula al cargar el módulo.
D3 maneja el SVG, React maneja los filtros
Por qué. La simulación de fuerzas, el zoom y las etiquetas corren en D3 dentro de un efecto. Los filtros viven en un store de Zustand y deciden qué nodos le llegan.
El costo. Cualquier cambio de filtro borra el SVG y reinicia la simulación, así que el layout salta.
Undo por snapshots en el editor, moléculas guardadas en IndexedDB
Por qué. Cada edición guarda una copia de átomos y enlaces, con un tope de 50 pasos. Dexie conserva las moléculas guardadas entre sesiones sin servidor.
El costo. Los snapshots copian la molécula entera en cada paso. Lo guardado queda en ese navegador.