Projetar gráficos e painéis pela decisão

O velocímetro gasta um quarto da tela para mostrar um único número e obriga o olho a estimar ângulo em vez de comparar altura. O bullet chart faz a mesma leitura numa linha fina e vence em qualquer painel de decisão.

A pergunta de quem lê escolhe o gráfico, e o volume de pontos escolhe a técnica de desenho. A biblioteca entra depois, por critério e número, não por gosto ou moda do agente (o assistente de IA que escreve código a partir do pedido).

A percepção decide a forma. Cleveland e McGill mediram que o olho compara posição e comprimento com muito mais precisão do que ângulo e área. Por isso a barra vence a pizza e o bullet chart vence o velocímetro.

Tufte acrescenta a razão dado-tinta: todo traço que não carrega dado é tinta a apagar, e o 3D decorativo é o exemplo mais caro. Wilkinson descreve qualquer gráfico como dado, marca e escala, a gramática que o Vega-Lite e o Observable Plot seguem.

Daí saem duas exigências para cada peça do painel: uma pergunta por gráfico e o denominador escrito à vista de quem lê.

A pesquisa recente confirma o cânone com número. O estudo Dashboard Design Patterns, de Bach e outros, catalogou 144 painéis e extraiu 42 padrões recorrentes de layout e de interação.

O painel evolui junto com o problema que ele mede, e a primeira entrega quase nunca é a definitiva. Reserve orçamento para a segunda rodada, depois que alguém tiver usado o painel para decidir alguma coisa.

Quatro trocas resolvem a maior parte dos pedidos. O bullet chart substitui o velocímetro porque compara realizado e meta numa linha fina. O waterfall substitui a barra solta para explicar variação de margem, receita ou custo de aquisição, degrau a degrau.

Small multiples, a mesma miniatura repetida por unidade ou por mês, substituem o gráfico único cheio de linhas. O slopegraph mostra quem subiu e quem caiu entre dois períodos, e a tabela de variância fecha a conta com realizado, plano e projeção lado a lado.

Escreva o período e o denominador dentro do próprio gráfico. Um crescimento de 40% sem base nem período é um desenho bonito sem informação nenhuma.

Numa rede de academias, a pizza de matrículas por unidade vira barra ordenada, e o velocímetro de meta vira um bullet chart por unidade. O gerente vê em três segundos quem está atrás da meta, e a evasão aparece como cancelamentos sobre ativos no início do mês.

O volume de pontos escolhe a técnica de desenho. Em SVG (desenho vetorial em que cada barra é um elemento da página, com cor própria) a peça pequena nasce acessível e troca de tema com o site. Até algumas centenas de pontos, o SVG à mão ou o Observable Plot resolve.

Canvas é uma tela de pixels, como uma foto: desenha dezenas de milhares de pontos por segundo e devolve nada ao leitor de tela. Nesse volume entram o uPlot e o ECharts com renderização progressiva; milhões de pontos pedem WebGL, a placa de vídeo. Toda peça em canvas leva a tabela equivalente ao lado, como a aula seguinte mostra.

A regra do manual para painel operacional cabe numa frase: tente o ECharts antes de inventar moda. A versão 6.1 trouxe layout em matriz, chord, beeswarm e quebra de eixo, e aguenta milhões de pontos com renderização progressiva.

Em projeto React (a base mais usada para montar a tela em pedaços reaproveitáveis), o Recharts v3 liga a camada de acessibilidade por padrão. O MUI X Charts v9 vence quando o projeto já roda MUI, e o Highcharts 12.5 é a escolha corporativa, com acessibilidade e sonificação inclusas.

D3 é para a história com anotação, nunca para entregar 30 gráficos comuns em cinco dias. Para série financeira de tick, o Lightweight Charts da TradingView desenha candlestick em canvas com 35 kB, e o uPlot faz série massiva com cerca de 40 kB.

O guia de gráficos do hub de design, em https://brasilgeo.ai/leadlovers2026/design/graficos/, fixa esse padrão para todo painel do projeto. Nenhum painel novo nasce com uma biblioteca diferente da anterior.

Antes de mandar o próximo pedido de painel ao agente, escreva a pergunta de cada peça e troque pizza, velocímetro e 3D por barra, bullet chart e waterfall. Escolha a biblioteca pela tabela desta aula, sempre com o período e o denominador escritos dentro do gráfico.

O board em HTML, o Recharts acessível e a biblioteca na investigação

O board mensal sai em HTML e CSS puro, com fonte e dono ao lado de cada número; a biblioteca de gráfico entra só na tela de investigação. Quem prepara o número do conselho leva daqui o kit de peças, o Recharts acessível e a fórmula da métrica num lugar só.

Painel de diretoria e painel de operação respondem a públicos diferentes. O board (o grupo que aprova o mês) quer narrativa, materialidade, risco e recomendação; quem opera filtra, cruza e desce ao detalhe.

A regra dos dois cliques separa o painel pronto do rascunho. Se o conselheiro não descobre em dois cliques a fonte, a definição, o frescor e o responsável pelo número, a peça volta para a mesa.

Quatro peças cobrem quase todo board mensal. O cartão de indicador dá o nível, o bullet compara realizado com meta e o waterfall explica a variação degrau a degrau. A tabela de variância fecha a conta, com números alinhados e folha de impressão que sai certa.

Dê nome de componente (o bloco de código pronto que se encaixa na tela) a cada peça no pedido ao agente. O vocabulário executivo tem nove nomes: kpi-card, variance-table, waterfall-bridge, executive-callout, risk-matrix, marketing-funnel, decision-card, confidence-badge e methodology-note. Cada nome tem um trabalho só, e o agente para de inventar gráfico onde cabia um cartão.

Para board, o HTML e o CSS puro costumam vencer o gráfico hiperinterativo. O painel carrega leve, imprime certo e dispensa biblioteca para mostrar um número e uma seta.

Na tela de investigação em React (a base mais usada para montar a tela em pedaços reaproveitáveis), o Recharts v3 é o ponto de partida. Ele desenha em SVG e monta cada peça com componentes prontos.

A instalação leva cinco passos: instalar o pacote, importar barras e eixos e envolver o gráfico num contêiner que ajusta a largura sozinho. Depois, passe a cor pelo token (o valor de cor guardado com nome, como a etiqueta na lata de tinta) da marca. Confirme a camada de acessibilidade, ligada por padrão na versão 3.

O erro mais comum é colocar o contêiner responsivo dentro de uma divisão sem altura: ele tenta ocupar cem por cento de zero e o gráfico não aparece. Declare a altura em pixels no próprio contêiner. O segundo erro é o cinza claro de fábrica nos rótulos de eixo, que reprova no teste de contraste.

Todo gráfico crítico ganha a tabela equivalente, escondida da tela e presente para o leitor de tela (o programa que lê a página em voz alta). Nunca com display:none, que apaga o dado para todo mundo.

O Chartability, com o checklist POUR-CAF, é a auditoria que cobra isso peça por peça, e a sonificação que o Highcharts traz como módulo entra como canal complementar.

Canvas e WebGL desenham pixels e devolvem nada ao leitor de tela. Toda peça desenhada assim exige uma camada DOM com ARIA (as etiquetas que descrevem a peça para o leitor de tela) em paralelo.

A biblioteca entra quando a pessoa precisa investigar. O ApexCharts 7.1 virou superfície de investigação, sem quebrar gráfico existente. Ele soma anotações desenháveis no gráfico, régua de medição, filtro cruzado, desfazer e refazer, visão por URL, plugins e renderizador em canvas.

Use o ApexCharts 7.1 quando o painel precisa dessa interação sem trocar de biblioteca. Painel operacional de volume pede ECharts 6.1, e série financeira de tick pede o Lightweight Charts, como a aula anterior mostrou.

A lógica da métrica vive em código versionado, numa camada semântica (o arquivo único onde a fórmula de cada indicador mora, como a receita na cozinha). Nenhuma tela calcula receita recorrente, custo de aquisição ou retorno de mídia por conta própria.

Cube e dbt integraram as duas plataformas em 16 de julho de 2026: o modelo dbt vira um cubo governado, com dimensões, medidas e junções herdadas. O motivo é a IA. O benchmark do dbt registra acurácia próxima de 100% quando o agente responde métrica pela camada semântica, contra o texto convertido direto em SQL.

Quem dispensa a plataforma inteira tem o Boring Semantic Layer sobre o Ibis 12, uma camada leve inspirada no Malloy.

Num escritório de contabilidade, a definição de margem vive num arquivo só, lido por todas as telas. Duas empresas atendidas nunca recebem a mesma conta feita de dois jeitos.

Antes de fechar o próximo board mensal, nomeie cada peça como componente no pedido ao agente. Exija fonte, definição, frescor e responsável dentro do próprio cartão, abertos em um clique. Tire a fórmula de cada indicador das telas e faça toda tela ler de um único modelo versionado.