Escolher mapas, diagramas e cenas espaciais

Um mapa só vale a tela quando a geografia muda a decisão; quando um ranking por estado responde, a tabela ordenada vence. Quem escolhe entre mapa e lista para o próprio site termina com o teste que decide, o mapa sem chave paga e a cor que diz a verdade.

Antes de instalar qualquer biblioteca (o pacote de código pronto que desenha o mapa na tela), faça o teste do embaralhamento: troque o Acre de lugar com Sergipe. Se a conclusão continua a mesma, a geografia não muda a decisão, e uma lista ordenada resolve melhor.

Passam no teste a rota de entrega e o raio de atendimento de uma clínica. Reprova quase sempre a penetração por estado, porque a cor muda a leitura sem mudar a decisão.

Quando o mapa vence o teste, escolha o degrau mais baixo que resolve. O Leaflet resolve poucos marcadores numa tarde; fique na série 1.x, porque a 2.0 segue em alfa sem data de lançamento e migração planejada hoje é aposta.

O MapLibre GL JS v6 desenha o mapa vetorial a partir de um arquivo que você hospeda. Ele exige WebGL2 (o desenho pela placa de vídeo dentro do navegador) e só sai como módulo ES. Projeto novo entra na v6; quem ainda depende do formato UMD ou de WebGL1 fica na v5 até trocar o empacotador.

O deck.gl 9.3 desenha na placa de vídeo quando o volume passa de centenas de milhares de pontos, e só compensa nesse volume. A 9.4 em alfa explora WebGPU e fica na prova de conceito. O Kepler.gl explora o dado sem código, sobre loaders.gl 4.0 e Node 20, e o trio deck.gl, MapLibre e Kepler é a stack de geomarketing.

Mapbox GL JS entra só quando a licença paga já existe. O OpenLayers segue a escolha para trabalho de GIS, com projeções e formatos que os outros não leem.

O mapa sem chave troca a chave de API (a senha paga que libera cada carregamento do mapa) por um único arquivo PMTiles hospedado por você. O navegador pede só o trecho do arquivo que precisa, como quem lê duas páginas de um livro sem comprar o volume inteiro, e nenhum servidor conta pedido.

O Protomaps publica builds diários do mapa-base do OpenStreetMap, e a versão 4.5 do PMTiles é a atual. Você troca fatura variável por armazenamento fixo e agenda a atualização do arquivo, porque o mapa desatualizado custa o mesmo trabalho do mapa correto.

A montagem tem ordem. Recorte só o território que precisa. Suba o arquivo com entrega parcial ligada, senão cada visita baixa o arquivo inteiro. Registre o protocolo antes de criar o mapa, senão o erro chega disfarçado de falha de rede.

O erro mais fácil de cometer é colorir pelo número bruto. Vendas e clientes crescem junto com a população, e o mapa vira uma cópia do mapa demográfico.

Escolha o denominador (o número que divide o dado, como habitantes ou domicílios) antes da cor, e escreva o nome dele na legenda. A figura circula sozinha, e o que só você sabe não protege ninguém.

Numa imobiliária, a pergunta sobre qual bairro vende mais rápido passa no teste, e o mapa entra com MapLibre v6 lendo um PMTiles do próprio armazenamento. A pergunta sobre qual imóvel tem o menor preço reprova, e a lista ordenada resolve sem mapa.

Colorir pelo número de imóveis vendidos faz o bairro mais populoso brilhar. Dividir pelo total de imóveis do bairro mostra onde a venda é proporcionalmente mais forte, com o denominador escrito na legenda.

Antes de publicar o mapa, teste o embaralhamento na última pergunta que ele responde e confirme que ainda há geografia real ali. Divida sempre pelo denominador certo e confira na aba de rede do navegador que só o seu domínio aparece nas requisições.

Três famílias de diagrama, editor visual e o 3D que raramente vale

Diagrama é uma palavra para três famílias com preços diferentes. Quem desenha decide a família: você em texto, o cliente arrastando peças ou ninguém, porque a rede se acomoda sozinha. Quem pede a peça para o próprio site aprende a nomear a família certa, separar o editor visual do painel e recusar o 3D que raramente vale.

Na primeira família você escreve o desenho em texto e a máquina posiciona cada caixa. O Mermaid 11.10 resolve até 12 elementos, a régua do hub de design. Acima disso, ou com camadas dentro de camadas, o D2 desenha o agrupamento como conceito próprio e exporta SVG, PNG e PDF. O Kroki serve as duas linguagens como serviço único.

O modelo C4 (quatro níveis de zoom: contexto, contêiner, componente e código) define o que desenhar em cada figura. Um diagrama que mistura o nível de contexto com o de código fica ilegível para os dois públicos.

Saída de IA passa pelo portão mermaid.parse() antes de renderizar, porque o agente erra sintaxe em silêncio. O compilador mmdc roda no build e entrega SVG estático com os tokens do site, e a figura se refaz a cada publicação a partir do mesmo texto.

A armadilha de tema derruba o diagrama pronto. O SVG chamado via img não herda as variáveis de cor da página, e o texto some no tema escuro. Use o SVG inline ou compile duas versões, clara e escura, e dê a todo texto do SVG uma cor própria.

Coloque a regressão visual do diagrama na esteira de integração: uma captura por build, comparada com a anterior, avisa quando a mudança de texto virou caixa sobreposta.

Na segunda família quem usa o produto arrasta, conecta e apaga peças. O React Flow e o Svelte Flow, do projeto xyflow com mais de 36 mil estrelas, tratam cada nó como componente rico, com formulário e estado próprios.

O tldraw transforma rascunho em HTML por IA com o Make Real. O Excalidraw converte Mermaid em formas editáveis e colabora ao vivo via Yjs (a sincronização que deixa várias pessoas editarem o mesmo quadro).

Editor sério de diagrama, com conectores e desfazer, é categoria própria: GoJS ou JointJS sobre um canvas como o Konva 9 ou o PixiJS. O Konva 9 traz o Transformer para mover e redimensionar, e ligações para React, Vue, Svelte e Angular.

O Fabric.js 6 faz editor de imagem tipo Canva com ida e volta para SVG. O Paper.js teve a última versão em julho de 2024, sinal de manutenção lenta; prefira Fabric ou Konva.

Nunca use a mesma stack para o painel e para o editor visual: ECharts ou D3 de um lado, JointJS ou GoJS com Konva ou PixiJS do outro. O editor colaborativo soma Yjs para a edição a várias mãos e WebAssembly só como acelerador cirúrgico do layout.

Na terceira família o desenho é a rede: cadeia de fornecedores, quem indicou quem, quais páginas linkam para quais. O Cytoscape.js traz os algoritmos prontos, o vis-network faz a física de simulação e o Sigma.js com Graphology desenha em WebGL mais de 100 mil nós.

Acima do teto do WebGL, o deck.gl com WebGPU (a via mais nova para a placa de vídeo) é o degrau seguinte.

O 3D obedece à regra de board: em relatório executivo é quase sempre vaidade, e vale em hero institucional, página de produto e data art.

Quando vale, o Three.js r184 renderiza por WebGPU em produção desde a r171, e o TSL compila o mesmo material para WGSL e GLSL. Com o Safari 26 embarcando WebGPU, ele virou piso. A pilha declarativa é o React Three Fiber com Drei, o TresJS 5.8 no Vue e o Threlte no Svelte.

O gaussian splatting (a captura fotorrealista feita de milhões de pontos coloridos, como uma foto que dá para girar) ganhou o Spark 2.0, da World Labs. Ele transmite mais de 100 milhões de splats sobre Three.js, inclusive em celular e VR.

Para o caso mais simples, o model-viewer mostra um arquivo GLTF sem uma linha de código. O Globe.gl faz globo de dados quando a geografia muda a decisão.

Numa escola, o fluxo de matrícula tem nove caixas e sai em Mermaid compilado no build, no nível de contexto do C4. A coordenação que quer montar trilhas arrastando disciplinas pede outra família, o React Flow, com outro orçamento. O gráfico 3D no relatório à mantenedora sai do pedido, porque impressiona sem esclarecer.

Antes de pedir a próxima peça, escreva a família na primeira linha do pedido ao agente, texto compilado, editor com nós ou rede que se acomoda sozinha. Só aceite 3D em vitrine institucional, produto ou data art, nunca em relatório executivo, e mantenha o painel e o editor em stacks separadas.