7 famílias, 46 visuais + 4 elementos

Selo de estado: Preview (teto atual do produto) · Curso ACD-330 — Dashboards: visuais, filtros, interações e design · Aula 2 de 12 · Atualizado em 2026-10-04.

Objetivo#

Ao final desta aula você vai selecionar visual pela pergunta de negócio.

Vídeo#

Identificador: acd-330-02-escolher-o-visual-certo · Duração-alvo: 8 min · Tela: /dashboards.

Roteiro (capítulos):

0:00–1:00 — As abas Inserir e Visual (/dashboards/[id]) — o mesmo catálogo de 46+4 itens cria um visual novo e troca o tipo do selecionado.
1:00–2:30 — As 7 famílias por pergunta de negócio — tour rápido pelas famílias usando a tabela de decisão.
2:30–4:00 — "Quanto" e "quem é maior" (/dashboards/[id]) — KPI e barras para as perguntas mais comuns.
4:00–5:30 — Composição sem exagerar (/dashboards/[id]) — por que pizza com muitas fatias falha e quando treemap/cascata resolvem melhor.
5:30–7:00 — Tabela, mapa e os visuais de nicho — quando o número exato ou o território vencem o gráfico.
7:00–8:00 — Onde cada família é aprofundada — mapa das aulas 3 a 6 do curso.

Conteúdo#

O catálogo por trás da aba Inserir

O ingestia.bi tem um catálogo único de 46 visuais de dados + 4 elementos de layout (texto, forma, imagem, botão) — 50 itens no total, o que sustenta a marca "50+ visuais" só quando os elementos de layout entram na conta. Esse catálogo alimenta duas abas do editor: a aba Inserir (cria um visual novo a partir de um campo arrastado) e a aba Visual (troca o tipo do visual já selecionado, sem perder os campos configurados) — ambas usam os mesmos ícones e cores, então o que você aprende numa vale na outra. Nenhum item é mock: cada um tem componente React dedicado (Recharts ou SVG próprio) e uma amostra sintética de referência obrigatória — a suíte de testes falha se faltar.

Sete famílias, pela pergunta que respondem

O catálogo de visuais do produto (ver ficha completa) organiza os 46 em 10 categorias técnicas. Para decidir rápido na hora de montar um painel, esta aula agrupa essas categorias em 7 famílias pela pergunta de negócio — é a mesma lógica que a documentação do produto recomenda: "a escolha do tipo depende da pergunta (comparar, compor, distribuir, relacionar, mapear)", mais duas perguntas adicionais (meta e detalhe linha a linha).

Pergunta de negócio	Família (visuais)	Exemplos mais usados	Aprofundado em
"Qual é o número e ele bateu a meta?"	KPIs, cartões e medidores (7)	`kpi`, `kpi-spark`, `multikpi`, `bullet`, `gauge`	Aula 3
"Quem vende mais, em que ordem?"	Comparação e tendência (6)	`bar`, `hbar`, `line`, `combo`	Aula 4
"Como as partes compõem o total?"	Composição e parte-do-todo (7)	`treemap`, `waterfall`, `pie`, `donut`	Aula 4
"Onde está a concentração ou a relação entre métricas?"	Distribuição e relação (10)	`pareto`, `scatter`, `histogram`, `radar`	Aula 4 (Pareto)
"Como isso evolui no tempo ou no fluxo?"	Tempo, fluxo e prazo (5)	`calendar`, `gantt`, `sankey`, `motion`	Visão geral (sem aula dedicada)
"Preciso do número exato, linha a linha?"	Tabelas e vitrine (6)	`table`, `matrix`, `pivot`, `heatmap`	Aula 5
"Onde isso acontece no Brasil?"	Mapas do Brasil (5)	`map`, `mapcity`, `bubblemap`, `geoheat`	Aula 6

Como aparece no produto

No editor, arraste um campo de dimensão (ex.: produtos.categoria) para uma área vazia do canvas: nasce um bar por padrão. Arraste uma métrica (vendas.valor) para dentro dele, no poço valor. Se a pergunta pedir outro visual, não recomece: selecione o visual e troque o tipo na aba Visual — os poços de campo (eixo, valor, legenda) tentam se recompor automaticamente. As aulas 3 a 6 aprofundam, com ficha própria, 19 dos 46 visuais (os mais usados em painel comercial/financeiro de PME); os demais — como sankey, network, radar ou tornado — ficam no catálogo para casos específicos e você pode explorá-los pela aba Inserir sem uma aula dedicada.

Exemplo na Aurora Varejo

A pergunta "quais categorias respondem pela receita?" tem pelo menos três respostas válidas no catálogo: um bar (comparação direta, lê bem até ~8 categorias), um treemap (compõe o todo, lê bem com muitas categorias de tamanhos desiguais) ou um pareto (mostra o acumulado 80/20 e já ordena por você). Para a Aurora Varejo, com produtos.categoria em {Bebidas, Limpeza, Higiene} — só 3 categorias — o bar simples já resolve; um pareto vira útil quando a lista crescer para 30+ produtos.

Erros comuns de design

Gráfico errado para a pergunta. Uma linha pede uma dimensão ordenável (tempo); usá-la para comparar categorias sem ordem natural confunde o leitor — é o papel das barras.
Pizza com 12 fatias. Pizza e rosca só funcionam até 4–5 categorias; acima disso, as fatias ficam indistinguíveis — troque para bar, treemap ou pareto (que já ordena e acumula).
Treemap com valores muito próximos. A área deixa de comunicar diferença quando os números são parecidos — nesse caso, barras comparam melhor que área.
Achar que existe um "visual perfeito" universal. A pergunta de negócio muda a resposta certa; o mesmo dado de receita por categoria pede visual diferente se a pergunta é "quem é maior" (barras) ou "quanto cada um pesa no total" (treemap/pizza com poucas categorias).
Esperar instalar um visual de terceiro. Não existe hoje uma loja/SDK de visuais externos no produto — é Roadmap (arquitetura de sandbox ainda não construída); o que está disponível é só o catálogo nativo dos 46+4.

Estado atual (Preview)

Esta capacidade (C00.3, fixtures dos 46 visuais + baseline de testes) está em Preview: a estrutura do catálogo (46 visuais de dados + 4 elementos, uma amostra sintética por item) é testada e determinística, mas o baseline visual entre ambientes (o "isso parece igual em qualquer navegador") não é sustentado hoje — por isso o selo caiu de GA-candidato para Preview nesta frente. A renderização final na tela continua NÃO MEDIDO para qualquer visual (sem teste de snapshot de imagem).

Nota

Comparado ao Power BI, os ~40 visuais nativos daquela ferramenta são empatados ou superados item a item (inclui visuais que lá são pagos: sankey, mekko, bullet); os 5 mapas do Brasil com malha IBGE municipal vão além do que o Power BI oferece pronto. É equivalência por item, com evidência — não paridade total de produto.

Faça você mesmo#

No workspace de treino Aurora Varejo (abra /dashboards no console):

Crie um painel "Catálogo — Aurora" com uma página "Exploração".
Para "qual é a receita do mês?", insira um kpi com vendas.valor.
Para "quem vende mais, por categoria?", troque para bar com produtos.categoria + vendas.valor.
Pela aba Visual, troque o mesmo visual para pie e observe por que ele já fica difícil de ler com mais de 4–5 categorias.
Troque de novo para treemap e compare a leitura com o bar do passo 3.
Para "onde vendemos mais?", insira um map com filiais.uf + vendas.valor.
Para "quero o detalhe linha a linha", insira uma table com as colunas de vendas.
Anote, para cada um dos 4 visuais criados, a pergunta de negócio que ele responde melhor.

Você terminou quando: o painel "Catálogo — Aurora" tem pelo menos 4 visuais de famílias diferentes (KPI, comparação/composição, mapa, tabela), cada um ligado à pergunta de negócio certa.

Checagem rápida#

Três perguntas no final da aula, corrigidas no servidor. A aula só conta como concluída depois da checagem.

Documentação relacionada#

Capacidades ensinadas#

C00.3 — o selo exibido na aula é sempre o estado mais conservador entre as capacidades citadas; nada aqui é "GA".