DB Neuron Graph: tu base de datos como un cerebro 3D
Registros de base de datos como un cerebro 3D — cada nodo un registro, cada hilo una relación, cada pulso una sinapsis disparando. ~500 registros de muestra, dirigido por fuerzas en WebGL.
Hicimos una pregunta simple: ¿qué aspecto tiene realmente una base de datos si pudieras ver todas las relaciones a la vez? Las tablas esconden las conexiones. Así que dibujamos ~500 registros como una red 3D y dejamos que la física los ordenara — y se organizaron solos en algo que parece, inconfundiblemente, un cerebro.
Lo que estás viendo
Cada nodo blanco es un registro. Cada hilo es una relación — una clave foránea, una etiqueta, un vínculo. La muestra modela cuatro tablas: los clientes se enlazan a proyectos, los proyectos a facturas, y los proyectos comparten un conjunto de etiquetas. Un layout dirigido por fuerzas trata cada enlace como un muelle y cada nodo como una partícula cargada, y ejecuta la simulación en tres dimensiones hasta que se asienta. Los registros muy conectados se agrupan en clusters; los poco conectados se alejan a los bordes. La forma de telaraña es emergente, nunca dibujada.
La parte de la neurona
Pasa el ratón sobre cualquier nodo y sus relaciones se encienden — los vecinos quedan brillantes, el resto se atenúa, y las sinapsis que los conectan disparan un pulso de luz. Si lo dejas solo, el grafo sigue disparando al azar, como un cerebro en reposo que nunca calla. Son los mismos datos que una tabla mostraría en filas; aquí la estructura es la historia.
Cómo está construido
Un archivo HTML, sin build. 3d-force-graph (que envuelve Three.js y d3-force-3d) hace el trabajo pesado en la GPU vía WebGL. ~500 nodos y ~500 aristas corren sin esfuerzo en un portátil; para grafos mucho más grandes, esa es exactamente la carga donde la ruta de cómputo de WebGPU empieza a importar. Cambia el generador de datos de muestra por un fetch('/graph.json') y visualiza cualquier conjunto {nodes, links}.
Dónde es útil
- Mapas de esquema. Apúntalo a una base de datos SQL — tablas como nodos, claves foráneas como aristas — y la forma del esquema aparece al instante.
- Grafos de CRM / contenido. Clientes ↔ proyectos ↔ facturas, o posts ↔ etiquetas ↔ autores. Los hubs y los huérfanos saltan a la vista.
- Explicar datos a no-ingenieros. Nadie lee un diagrama de claves foráneas por gusto. Pero a todo el mundo le gusta girar un cerebro.
Los datos aquí son una muestra pública — nombres de empresa ficticios, generados localmente, sin backend. ¿Quieres esto apuntado a tus datos? Dinos la forma y lo conectamos.