DB Neuron Graph: a sua base de dados como um cérebro 3D

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ás 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

Passa 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. Troca o gerador de dados de amostra por um fetch('/graph.json') e visualiza qualquer conjunto {nodes, links}.

Onde é útil

• Mapas de esquema. Aponta-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. Clientesprojetosfaturas, ou postsetiquetasautores. 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. Queres isto apontado aos teus dados? Diz-nos a forma e ligamos tudo.