DB Neuron Graph: a sua base de dados como um cérebro 3D
Registos de base de dados como um cérebro 3D — cada nó um registo, cada fio uma relação, cada pulso uma sinapse a disparar. ~500 registos de amostra, força-dirigida em WebGL.
Fizemos uma pergunta simples: que aspeto tem realmente uma base de dados se pudéssemos ver todas as relações ao mesmo tempo? As tabelas escondem as ligações. Por isso desenhámos ~500 registos como uma rede 3D e deixámos a física organizá-los — e arrumaram-se sozinhos em algo que parece, inconfundivelmente, um cérebro.
O que está a ver
Cada nó branco é um registo. Cada fio é uma relação — uma chave estrangeira, uma etiqueta, um vínculo. A amostra modela quatro tabelas: clientes ligam-se a projetos, projetos ligam-se a faturas, e os projetos partilham um conjunto de etiquetas. Um layout força-dirigido trata cada ligação como uma mola e cada nó como uma partícula carregada, e corre a simulação em três dimensões até estabilizar. Registos muito ligados juntam-se em clusters; os pouco ligados afastam-se para as bordas. A forma de teia é emergente, nunca desenhada.
A parte do neurónio
Passe o rato sobre qualquer nó e as suas relações acendem-se — os vizinhos ficam claros, o resto esbate-se, e as sinapses que os ligam disparam um pulso de luz. Deixado sozinho, o grafo continua a disparar ao acaso, como um cérebro em repouso que nunca fica em silêncio. São os mesmos dados que uma tabela mostraria em linhas; aqui a estrutura é a história.
Como é feito
Um ficheiro HTML, sem build. O 3d-force-graph (que embrulha o Three.js e o d3-force-3d) faz o trabalho pesado no GPU via WebGL. ~500 nós e ~500 arestas correm sem esforço num portátil; para grafos muito maiores, é precisamente esta a carga em que o caminho de computação do WebGPU começa a importar. Troque o gerador de dados de amostra por um fetch('/graph.json') e visualiza qualquer conjunto {nodes, links}.
Onde é útil
- Mapas de esquema. Aponte-o a uma base de dados SQL — tabelas como nós, chaves estrangeiras como arestas — e a forma do esquema aparece instantaneamente.
- Grafos de CRM / conteúdo. Clientes ↔ projetos ↔ faturas, ou posts ↔ etiquetas ↔ autores. Os hubs e os órfãos saltam à vista.
- Explicar dados a não-engenheiros. Ninguém lê um diagrama de chaves estrangeiras por gosto. Mas toda a gente gosta de rodar um cérebro.
Os dados aqui são uma amostra pública — nomes de empresa fictícios, gerados localmente, sem backend. Quer isto apontado aos seus dados? Diga-nos a forma e ligamos tudo.