Gráficos e visualização de dados: o painel que cabe numa decisão
A reunião de segunda abre com um painel de quarenta indicadores e fecha sem nenhuma decisão: esse é o gráfico mais caro da empresa. O caminho contrário começa antes da biblioteca e cada regra deste guia vem com número e origem: a percepção humana lê posição e comprimento com mais precisão do que ângulo e área, como Cleveland e McGill mediram em experimentos publicados em 1984, e é por isso que barra ordenada vence pizza e bullet chart vence velocímetro; o rótulo obedece aos 4,5:1 da WCAG 2.2 e as formas aos 3:1, conferidos nos dois temas; o ECharts 6.1, de maio de 2026, segue a primeira tentativa para painel operacional; o Observable Plot e o visx cobrem a figura editorial em SVG; o uPlot desenha milhões de pontos custando cerca de 40 kB; e todo número exibido carrega fonte, data e dono, na regra dos dois cliques que este portal aplica a relatório desde o primeiro guia. Painel sem essas âncoras impressiona na projeção e desinforma na decisão.
Guia do menu Design do portal, construído sobre pesquisa de fontes primárias com data de acesso 02/09/2026 e sobre os guias taxonômicos de relatórios visuais e stacks de frontend mantidos pela casa. Ele fecha o menu de execução visual ao lado dos guias de ícones, ilustrações, animação e geração de imagens e de diagramas de arquitetura e fluxo.
Antes da biblioteca: quem lê e o que decide?
O erro que gera o painel de quarenta indicadores acontece antes da primeira linha de código, quando ninguém pergunta quem vai ler. Um relatório de leitura, o que a diretoria abre na segunda, precisa de poucos gráficos com meta, comparação e recomendação, e quase nada de interação. Um painel de exploração, o que o time de mídia usa para caçar a campanha que sangra, precisa de filtro, drill-down e período comparado, e aceita densidade que mataria o primeiro. Misturar os dois públicos numa tela só produz o pior dos mundos: denso demais para decidir, raso demais para investigar.
A régua que separa os dois é a mesma que o portal aplica a relatório desde os guias de medição: se quem lê não descobre em dois cliques de onde veio o número, qual a definição da métrica, quando foi atualizada e quem responde por ela, a tela ainda pertence a quem a fez, e não a quem decide. O painel de uma página do glossário, com nove a onze indicadores e denominador explícito em cada um, existe exatamente para caber nessa régua.
Regra da casa: antes de escolher biblioteca, escreva numa frase qual decisão a tela alimenta e quem a toma. Tela sem decisão declarada volta para a mesa de quem pediu; a biblioteca se escolhe depois, e sempre em função dessa frase.
O tipo certo por pergunta: a hierarquia da percepção
Existe medição por trás da escolha do tipo de gráfico. Nos experimentos de percepção gráfica que William Cleveland e Robert McGill publicaram em 1984 no Journal of the American Statistical Association, pessoas comparando valores por posição numa escala comum erraram menos do que comparando por comprimento, e muito menos do que comparando por ângulo, área ou saturação de cor. A consequência prática atravessa quatro décadas intacta: barra ordenada responde melhor que pizza, linha responde melhor que área empilhada quando a pergunta é tendência, e qualquer informação crítica codificada só em cor vai se perder em parte da audiência.
Linha com meta
Para evolução no tempo. A meta desenhada como referência na própria escala transforma a linha de curiosidade em julgamento: acima ou abaixo do combinado.
Barra ordenada
Para ranquear canais, segmentos ou campanhas. A ordenação decrescente faz o olho ler a resposta sem procurar; ordem alfabética joga esse trabalho no leitor.
Bullet chart
Para meta contra realizado. Stephen Few o desenhou como substituto direto do velocímetro: mesma resposta, um décimo do espaço, e vários indicadores empilhados na mesma coluna.
Waterfall
Para explicar de onde veio uma variação: o que somou e o que subtraiu entre o número de partida e o de chegada, barra a barra, sem parágrafo de justificativa.
Small multiples
Para comparar a mesma métrica entre regiões ou squads: uma grade de gráficos pequenos e idênticos, em que a exceção salta aos olhos porque tudo o mais é igual.
Variance table
Para o valor exato: realizado, plano e período anterior lado a lado, com algarismos tabulares alinhados. Em reporte executivo, a tabela é cidadã de primeira classe.
Anti-padrões medidos: pizza com mais de três fatias obriga comparação por ângulo, a leitura mais imprecisa da hierarquia; velocímetro gasta tela para esconder comparação; efeito 3D distorce a proporção que o gráfico existia para mostrar. Quando um desses aparecer em rascunho, a pergunta que o remove é sempre a mesma: qual comparação essa forma está impedindo?
SVG ou canvas: o custo de cada pixel
Toda biblioteca de gráficos desenha em um de dois substratos, e a escolha define o que a página consegue fazer depois. Em SVG, cada barra, linha e rótulo é um elemento do DOM: herda token de cor do tema, imprime nítido em qualquer escala, aceita :hover de CSS puro e conversa com leitor de tela. O limite é de volume: alguns milhares de elementos, e a interação começa a engasgar. Em canvas, o desenho vira um bitmap único que pinta milhões de pontos sem esforço, e o limite é o oposto: o bitmap não expõe semântica nenhuma, nem cor por token, nem texto selecionável, nem acessibilidade.
A régua é a mesma do guia de diagramas, aplicada a dados: figura editorial e painel executivo em SVG, densidade operacional em canvas. E o canvas cobra pedágio fixo: todo gráfico desenhado nele exige uma camada paralela em DOM, com resumo em texto e os mesmos dados em tabela, porque a WCAG não abre exceção para bitmap. Bibliotecas como ECharts renderizam nos dois substratos com a mesma option, o que permite começar em SVG e migrar só a tela que provar necessidade.
Uma biblioteca por projeto: a régua de setembro de 2026
O guia de ícones deste menu exige uma família por projeto, e a razão vale dobrada para gráficos: cada biblioteca traz paleta, tipografia de eixo, tooltip e animação próprios, e um painel montado com três bibliotecas parece três produtos colados. A tabela traz a régua de escolha com o estado verificado em setembro de 2026; a segunda biblioteca só entra no projeto com justificativa escrita de caso que a primeira não cobre.
| Biblioteca | Quando escolher | Estado verificado (set/2026) |
|---|---|---|
| Apache ECharts | Primeira tentativa para painel operacional: filtro, zoom, série longa, atualização frequente. | Versão 6.1 anunciada em 25/05/2026, com matrix layout, diagrama de acordes e beeswarm; renderização progressiva para séries de milhões de pontos; desenha em SVG ou canvas com a mesma option. |
| Observable Plot / visx | Figura editorial em página de conteúdo: SVG leve, estilizado por token, sem runtime pesado. | Plot segue a gramática concisa da equipe do D3; visx entrega primitivas D3 para quem monta biblioteca própria em React. |
| Chart.js | Protótipo e relatório leve em canvas, quando a tela pede seis gráficos comuns e nenhuma sofisticação. | Maduro e estável; segue o atalho honesto para validar uma tela antes de investir. |
| ApexCharts | Painel investigativo sem trocar de biblioteca: anotação, medição e filtro cruzado prontos. | Versão 7 lançada em julho de 2026 com anotações arrastáveis, cross-filtering entre gráficos, undo e redo e visão compartilhável por URL, sem quebrar gráficos existentes. |
| Recharts / MUI X Charts | Projeto React que quer gráfico como componente, com acessibilidade de fábrica. | Recharts v3 liga o accessibilityLayer por padrão; MUI X Charts v9, de 08/04/2026, traz navegação por teclado ligada por padrão. |
| uPlot | Série temporal massiva em tempo real: telemetria, monitoramento, tick de mercado. | Cerca de 40 kB de biblioteca desenhando milhões de pontos em canvas; sem tipos exóticos, de propósito. |
| Lightweight Charts | Gráfico financeiro: candlestick, OHLC, profundidade de ofertas. | Biblioteca da TradingView, base de 35 kB na versão 5; caso especializado que nenhuma generalista cobre tão barato. |
| D3.js | Visualização sob medida com anotação e narrativa, quando o formato pedido não existe em catálogo. | Segue a caixa de ferramentas de elite, com o custo declarado: é kit de construção, e entregar trinta gráficos comuns em cinco dias com D3 é escolher o caminho longo. |
Fontes: anúncio do ECharts 6.1 na lista dev do projeto Apache (25/05/2026), blog oficial do ApexCharts (julho de 2026), blog do MUI (08/04/2026), releases do Recharts v3, documentação do uPlot e da TradingView. Verificação da casa com data de acesso 02/09/2026.
Licença antes do commit: Highcharts entrega módulo de acessibilidade e sonificação inclusos, e cobra licença comercial por isso; quem orça biblioteca paga como se fosse livre repete o susto que o guia de diagramas registrou com o tldraw. Toda biblioteca da tabela acima, fora Highcharts e o tier pago do MUI X, segue em licença permissiva verificada.
Cor por token e os números da norma
A paleta de fábrica de toda biblioteca de gráficos foi calibrada para fundo claro, e o WebAIM Million de 2026 encontrou falha de contraste WCAG em 95,9% do milhão de home pages auditadas; gráfico segue a estatística quando ninguém confere. Os números da norma valem para dado como valem para diagrama: rótulo e valor de eixo com 4,5:1 contra o fundo (critério 1.4.3, nível AA), linha, barra e fatia com 3:1 (critério 1.4.11), e nenhuma série identificada apenas pela cor (critério 1.4.1), o que pede rótulo direto na série, marcador ou tracejado além da tinta.
A execução é a mesma do guia de tokens: a paleta do gráfico sai das variáveis do projeto, nunca de hexadecimal solto na option, e a escala de categoria nasce em OKLCH para que as variantes clara e escura mantenham a mesma distância de contraste. Painel que troca de tema com o site precisa ser aberto nos dois temas antes de publicar, com o auditor de contraste do navegador na frente; a função contrast-color(), em Baseline desde abril de 2026, resolve o preto ou branco de um rótulo sobre cor dinâmica, e mesmo ela falha em tom intermediário, então serve de reforço, nunca de dispensa da auditoria.
- Toda cor do gráfico vem de
var(--token); hexadecimal na option reprova em revisão. - Rótulos e eixos com 4,5:1, formas com 3:1, conferidos no tema claro e no escuro.
- Série distinguível sem cor: rótulo direto, marcador ou tracejado.
- Fonte de eixo e rótulo com 14px ou mais; algarismos tabulares em qualquer coluna de número.
Além do contraste: o gráfico que todo mundo lê
Contraste aprovado ainda deixa de fora quem navega por teclado e quem usa leitor de tela, e 2026 mudou o piso do que as bibliotecas entregam de fábrica: a navegação por teclado ligada por padrão no MUI X Charts v9 e o accessibilityLayer do Recharts v3 transformaram em default o que era plugin. O que a biblioteca não resolve sozinha é a alternativa textual: todo gráfico crítico do portal publica junto um resumo em uma frase com a conclusão e uma tabela com os mesmos dados, o mesmo pacto do guia de diagramas com o accTitle e o accDescr.
Para auditar, o Chartability, conjunto de heurísticas mantido como projeto aberto sob o princípio POUR das diretrizes do W3C, funciona como checklist de saída: perceptível, operável, compreensível e robusto aplicados a visualização de dados, num passe que um revisor sem formação em acessibilidade executa. Sonificação, que o módulo de acessibilidade do Highcharts inclui em toda licença, entra como canal complementar para tendência e padrão; complementar ao texto, nunca substituto dele.
Todo número exibido tem fonte, data e dono
O painel bonito com número órfão desinforma com mais autoridade que a planilha feia, porque a moldura visual empresta credibilidade ao dado que ninguém conferiu. Os guias de medição deste portal já cobram a escada de confiança do dado e o dono da métrica; a execução visual traduz a cobrança em três elementos fixos na tela: a fonte e a data de atualização visíveis junto do gráfico, o denominador explícito em toda porcentagem, e o nome de quem responde pelo indicador a um clique de distância.
Filtro e período comparado moram na URL, não em estado local, pela mesma razão que o guia de navegação aplicou a abas e paginação: a visão filtrada que gerou a discussão precisa ser compartilhável por link, senão cada pessoa da reunião olha para um recorte diferente do mesmo painel. Em React, a biblioteca nuqs resolve o padrão; em qualquer stack, o critério de aceite é copiar a URL, abrir noutra máquina e encontrar a mesma tela.
IA gerando gráficos: o número fabricado é o defeito mais caro
Agente gera option de ECharts e spec de Vega-Lite em segundos, e o guia de diagramas já ensinou a metade da defesa: validar a sintaxe antes do render, como o mermaid.parse() faz por lá. Gráfico tem uma segunda superfície de risco que diagrama não tem, e ela é pior: o dado. Modelo de linguagem completa lacuna de série com valor plausível, arredonda para o número redondo e inventa o mês que falta na base, tudo com a mesma fluência com que acerta. Número plausível errado num painel contamina retroativamente a confiança em todos os painéis anteriores.
Regra da casa: o agente desenha, a fonte fornece. Todo gráfico gerado por IA passa por três conferências antes de publicar: a série bate com a consulta na origem, valor a valor nas pontas e por total; a spec declara de onde leu os dados, sem valor embutido à mão; e o agente aponta a origem de cada número que exibiu, ou o número sai. Pedir spec declarativa em vez de código imperativo barateia as três conferências, porque JSON se audita por leitura.
Quando o caso sai do gráfico pronto
Três fronteiras separam este guia de projetos maiores, e cruzar qualquer uma sem perceber é onde o orçamento estoura. A primeira é a do formato sob medida: quando a visualização pedida não existe em catálogo e carrega anotação e narrativa próprias, o caso vira D3, com prazo de projeto e não de tarefa. A segunda é a da planilha: quando quem usa precisa editar célula, fórmula e filtro dentro do produto, a resposta deixou de ser biblioteca de gráfico e virou planilha embutida, território do Univer, sucessor declarado do Luckysheet pelos próprios mantenedores. A terceira é a das redes: nós e arestas, força e comunidade pertencem ao guia de diagramas e grafos, com Cytoscape.js e Sigma.js.
Em todas as três, a pergunta de triagem é a mesma que abriu este guia: quem usa a tela e o que essa pessoa decide ali. Leitor que só lê fica no gráfico pronto; usuário que edita, salva e repassa cruzou a fronteira do produto, e produto se orça com licença conferida, teste e suporte.
Prompts prontos
Painel executivo de uma página
Monte o painel executivo desta operação com no máximo 11 indicadores,
no formato painel de uma página.
Requisitos:
- Cada indicador com meta, período comparado e denominador explícito.
- Meta vs. realizado em bullet chart; variação explicada em waterfall;
valor exato em variance table com algarismos tabulares.
- Nenhum velocímetro, nenhuma pizza, nenhum efeito 3D.
- Toda cor via var(--token) do projeto; nada de hexadecimal na option.
- Fonte e data de atualização visíveis junto de cada gráfico.
Critérios de aceite:
1. Cada indicador responde a uma decisão declarada em uma frase.
2. Rótulos passam 4,5:1 e formas 3:1 nos temas claro e escuro.
3. Cada gráfico tem resumo em texto e tabela alternativa com os dados.Gráfico com dados conferíveis
Gere a spec do gráfico (Vega-Lite ou option do ECharts) para a série
abaixo, SEM alterar, completar ou arredondar nenhum valor.
Critérios de aceite:
1. A spec referencia os dados da fonte; nenhum valor digitado à mão.
2. Se um período estiver faltando na série, o gráfico mostra a lacuna,
em vez de interpolar.
3. Para cada número exibido, você aponta a linha da fonte de onde veio.
4. Se não tiver certeza de um valor, diga que não tem, em vez de
arriscar.Auditoria de um painel antes de publicar
Audite o painel anexo nos dois temas do site (claro e escuro):
1. Liste todo rótulo e valor de eixo abaixo de 4,5:1 e toda forma
abaixo de 3:1 (WCAG 2.2, critérios 1.4.3 e 1.4.11).
2. Aponte séries distinguidas apenas por cor (critério 1.4.1).
3. Verifique se cada gráfico tem resumo em texto e tabela alternativa.
4. Liste todo número exibido sem fonte e data visíveis e toda
porcentagem sem denominador.
5. Confira se filtro e período sobrevivem ao copiar e colar a URL.
Devolva as correções em ordem de impacto, sem reescrever o painel.Perguntas frequentes
Qual biblioteca de gráficos escolher primeiro?
Para painel operacional com filtro e atualização frequente, comece pelo Apache ECharts, que chegou à versão 6.1 em maio de 2026 com renderização progressiva para séries longas. Para figura editorial em página de conteúdo, Observable Plot ou visx geram SVG leve e estilizável por token. Para série temporal com centenas de milhares de pontos, o uPlot entrega o desenho com cerca de 40 kB. A regra da casa vale aqui como nos ícones: uma família por projeto, e a segunda biblioteca só entra com justificativa escrita.
Quando usar SVG e quando usar canvas num gráfico?
SVG serve bem até alguns milhares de elementos: cada barra e rótulo existe no DOM, herda token de cor, imprime nítido e conversa com leitor de tela. Acima disso o desenho trava, e o canvas assume, pintando milhões de pontos num bitmap único. O custo do canvas é a semântica: o bitmap não expõe nada por conta própria, então todo gráfico em canvas exige uma camada paralela de texto e ARIA com os mesmos dados.
Por que bullet chart no lugar de velocímetro?
O velocímetro gasta um quarto da tela para exibir um único número e esconde a comparação que importa. O bullet chart, desenhado por Stephen Few como resposta direta a esse desperdício, mostra na mesma barra o realizado, a meta e as faixas de referência, e empilha vários indicadores no espaço que um velocímetro ocupa sozinho. A percepção também agradece: leitura por posição e comprimento é mais precisa que leitura por ângulo, como os experimentos de Cleveland e McGill mediram em 1984.
O que a WCAG 2.2 exige de um gráfico?
Texto de rótulo com contraste mínimo de 4,5:1 contra o fundo (critério 1.4.3, nível AA), linhas e formas com 3:1 (critério 1.4.11) e nenhuma informação transmitida apenas por cor (critério 1.4.1): série distinguida também por rótulo direto, marcador ou tracejado. A verificação vale nos dois temas, porque a paleta de fábrica das bibliotecas foi calibrada para fundo claro e degrada no escuro.
Como publicar um gráfico gerado por IA sem publicar um número errado?
Separando os dois riscos. A spec do gráfico, de preferência declarativa como no Vega-Lite ou na option do ECharts, é conferível por leitura e por validador. O dado é outro problema: modelo de linguagem completa lacuna com número plausível, e número plausível errado contamina o relatório inteiro. A régua do portal manda conferir a série contra a fonte antes do render, exibir a fonte e a data junto do gráfico e recusar qualquer valor que o agente não consiga apontar de onde veio.
Quando o painel precisa de tabela em vez de gráfico?
Quando a pergunta pede o valor exato, e não a tendência: realizado contra meta contra período anterior, linha a linha, é território de tabela com algarismos tabulares alinhados. Executivo confere número, e a variance table responde mais rápido que qualquer barra. O gráfico entra quando a pergunta é de forma: direção, sazonalidade, concentração, exceção.
Por onde começar
Volte ao painel de quarenta indicadores da sua reunião de segunda e aplique a triagem deste guia: escreva a decisão que cada gráfico alimenta, corte o que ficar sem frase, troque velocímetro por bullet e pizza por barra ordenada, e abra o resultado nos dois temas com o auditor de contraste na frente. O que sobreviver, com fonte, data e dono visíveis, cabe numa página, e é essa página que decide. O menu Design fecha com este guia ao lado dos de ícones, ilustrações, animação e geração de imagens, menus, abas e paginação, React: componentes e estado, diagramas de arquitetura e fluxo e Tailwind, tokens e CSS moderno; o restante do portal segue no glossário.