Animar um grafo de conhecimento amplo em movimento

Um grafo de conhecimento amplo se anima com fluidez quando o cálculo das posições roda fora da tela e o desenho fica com a placa de vídeo. Grafo de conhecimento é o mapa de coisas ligadas por relações com nome, como empresa fundada por pessoa. Com a conta no lugar certo, 20 mil entidades se organizam em aglomerados enquanto o quadro segue a 60 por segundo.

A unidade do grafo é a tripla: sujeito, relação e objeto. Brasil GEO, fundada por, Alexandre Caramaschi. Cada sujeito e cada objeto vira um nó, cada relação vira uma aresta com rótulo, e o mesmo nó reaparecendo em muitas triplas é o que transforma uma lista em grafo. O Google deu nome à ideia em 2012, ao lançar o Knowledge Graph com a frase coisas, e não palavras.

Para quem faz GEO, o grafo é o assunto do negócio. Os motores generativos citam entidades que reconhecem, e reconhecem pelo que está ligado a elas em dados estruturados, no schema.org e nas páginas que se referem umas às outras. Este curso tem o próprio grafo: 15 trilhas, 33 capítulos, 146 recursos, 46 categorias, 14 laboratórios e 22 bibliotecas. São 276 nós e 363 arestas gerados a partir do código.

A figura abaixo mostra a tripla virando desenho. O nó é a coisa, a aresta é a relação com nome, e o React Flow aparece duas vezes porque é ensinado por um capítulo e pertence a uma categoria. Esse reaparecimento é a costura do grafo, e é ele que o layout precisa respeitar quando arruma os pontos na tela.

O desenho nasce de três forças. Todos os pontos se repelem, os pontos ligados se puxam como por uma mola, e uma gravidade fraca puxa tudo para o centro. Repetida milhares de vezes, essa conta separa o grafo em aglomerados, que são as comunidades, e deixa no meio os poucos pontos que ligam um aglomerado ao outro. O algoritmo padrão é o ForceAtlas2, publicado em 2014 pela equipe do Gephi.

O custo dessa conta é o que trava a tela. Cada rodada compara pontos entre si, e com 20 mil pontos a comparação completa passa de 200 milhões de pares. Duas decisões resolvem: a aproximação de Barnes e Hut, que agrupa pontos distantes num só, e o Web Worker, o fio de execução separado que faz a conta enquanto a tela só desenha. O laboratório abaixo usa as duas, pela biblioteca graphology.

Desenhar é a outra metade. O sigma.js, na versão 3 de março de 2024, desenha o grafo em WebGL, a interface que entrega o desenho à placa de vídeo, e mantém dezenas de milhares de nós e arestas interativos. Acima de 5 mil nós ele esconde as arestas enquanto a câmera se move e mostra rótulo só nos nós maiores, e é isso que segura os 60 quadros por segundo.

Quando o grafo passa de 100 mil pontos, a própria conta das forças vai para a placa de vídeo. O cosmos.gl, motor entregue à OpenJS Foundation em 2025 e reescrito na versão 3 sobre o luma.gl, calcula as forças e desenha em WebGL 2 e chega a um milhão de pontos no navegador. O laboratório traz os dois motores, para a pessoa ver onde um para e o outro continua.

O laboratório abaixo começa pelo grafo real do curso, com rótulos. Rode o layout e veja os aglomerados se formarem: as trilhas puxam os capítulos, os capítulos puxam os recursos e as categorias ficam no meio, ligando tudo.

O interruptor troca para o sintético de até 20 mil nós, e o segundo painel carrega o modo massivo na placa de vídeo, com até 200 mil pontos. O medidor mostra quadros por segundo e iterações do layout enquanto tudo acontece.

Quatro cuidados fazem a cena ensinar em vez de hipnotizar. O layout converge e para: grafo que se mexe para sempre é enfeite, e a pessoa não consegue ler.

A cor por tipo de nó tem legenda em texto ao lado do palco. O rótulo aparece só onde cabe, e a busca leva ao resto. E o número de nós aparece com a fonte: o grafo real diz de onde veio, e o sintético se declara cenário ilustrativo.

O trecho abaixo é o centro do laboratório. Ele mostra o grafo em graphology, o layout no worker com as configurações inferidas do tamanho, o sigma com o destaque de vizinhos e o cosmos recebendo posições e ligações em arrays tipados. O componente inteiro está no download.

Antes de aprovar uma cena de grafo, peça o print do medidor com o seu grafo, e não com o de exemplo. Se o quadro cair abaixo de 30 por segundo enquanto o layout roda, a conta está na thread errada ou o motor é pequeno demais para o tamanho.

Se o grafo nunca para, falta o critério de convergência. E se a pessoa não encontra a própria empresa em cinco segundos, falta a busca, que vale mais que qualquer efeito.