VISUAL VOCABULARY / 01

Graph Atlas / Atlas de gráficos

Compare os mesmos dados, escolha um gráfico para sua tarefa e copie uma instrução de criação.

12 tempos de entrega. O que você quer ver?

Alterne a visualização para comparar valores individuais e sua distribuição.

Gráfico de barras01020304050Tempo de entrega · minID13579111281214151617182022263248
Valores individuais · 12

O histograma conta observações em intervalos numéricos; as barras mostram valores por categoria.

Os botões escolhem uma visualização estática. As explicações podem ser lidas sem movimento.

Barras e histograma ↓

Tempo de entrega · min · 8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48

02 / Escolher um propósito

Alterne a visualização para comparar valores individuais e sua distribuição.

Gráfico de barras01020304050Tempo de entrega · minID13579111281214151617182022263248
Gráfico de barras
Histograma0123456FrequênciaTempo de entrega · min0102030405016311
Histograma

Barras usam categorias; histogramas usam intervalos numéricos.

[0,10)=1; [10,20)=6; [20,30)=3; [30,40)=1; [40,50)=1; n=12

Gráficos e dados são exemplos fictícios originais, não resultados nem previsões.

03 / 12

Escolher um propósito

12 entradas

01

Gráfico de barras / Bar chart

Comparação
Gráfico de barras01020304050Tempo de entrega · minID13579111281214151617182022263248
Dados do exemplo · ID 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
O que representa
O comprimento das barras compara quantidades entre categorias.
Como se diferencia
O histograma conta observações em intervalos numéricos; as barras mostram valores por categoria.
Quando usar
Comparar vendas por departamento ou tempos individuais de entrega.
Condições e cuidados
Comece o eixo de quantidades em zero e mantenha as unidades.
Instrução de criação

Crie um gráfico com estes dados fictícios. ID 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Gráfico de barras / Bar chart. Comparar vendas por departamento ou tempos individuais de entrega. Comece o eixo de quantidades em zero e mantenha as unidades.

02

Gráfico de linhas / Line chart

Evolução
Gráfico de linhas01020304050QuantidadeMês135791112
Dados do exemplo · Mês 1–12; Quantidade [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
O que representa
Pontos conectados mostram mudanças em uma sequência ordenada.
Como se diferencia
A dispersão mostra duas variáveis numéricas; ligar pontos pressupõe ordem ou continuidade.
Quando usar
Acompanhar vendas mensais ou séries temporais.
Condições e cuidados
Ordene os tempos e informe intervalos e dados ausentes.
Instrução de criação

Crie um gráfico com estes dados fictícios. Mês 1–12; Quantidade [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Gráfico de linhas / Line chart. Acompanhar vendas mensais ou séries temporais. Ordene os tempos e informe intervalos e dados ausentes.

03

Gráfico de áreas / Area chart

Evolução
Gráfico de áreas01020304050QuantidadeMês135791112
Dados do exemplo · Mês 1–12; Quantidade [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
O que representa
A região preenchida entre a linha e a base destaca a quantidade em uma sequência.
Como se diferencia
A linha destaca mudanças; a área destaca a magnitude acima da base.
Quando usar
Mostrar mudanças de volume ao longo do tempo.
Condições e cuidados
Use base zero e evite esconder séries com áreas sobrepostas.
Instrução de criação

Crie um gráfico com estes dados fictícios. Mês 1–12; Quantidade [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Gráfico de áreas / Area chart. Mostrar mudanças de volume ao longo do tempo. Use base zero e evite esconder séries com áreas sobrepostas.

04

Barras empilhadas 100% / 100% stacked bar chart

Proporção
Barras empilhadas 100%Proporção · %1A 25B 40C 352A 40B 20C 40
Dados do exemplo · 1: A=25, B=40, C=35; 2: A=40, B=20, C=40; Proporção · %; Quantidade 1=100, 2=200
O que representa
Barras do mesmo comprimento comparam a composição proporcional de totais diferentes.
Como se diferencia
Barras empilhadas comuns preservam o total; a visualização 100% elimina suas diferenças.
Quando usar
Comparar composição entre departamentos ou períodos.
Condições e cuidados
Mantenha os mesmos componentes e informe os totais originais.
Instrução de criação

Crie um gráfico com estes dados fictícios. 1: A=25, B=40, C=35; 2: A=40, B=20, C=40; Proporção · %; Quantidade 1=100, 2=200. Barras empilhadas 100% / 100% stacked bar chart. Comparar composição entre departamentos ou períodos. Mantenha os mesmos componentes e informe os totais originais.

05

Gráfico de pizza / Pie chart

Proporção
Gráfico de pizzaA 25%B 40%C 35%
Dados do exemplo · A=25, B=40, C=35; Proporção · %
O que representa
As fatias dividem um círculo em partes de um total.
Como se diferencia
Barras facilitam comparar valores próximos; a pizza destaca partes de um todo.
Quando usar
Mostrar poucos componentes sem sobreposição.
Condições e cuidados
As proporções devem somar 100%; exclua valores negativos e componentes sobrepostos.
Instrução de criação

Crie um gráfico com estes dados fictícios. A=25, B=40, C=35; Proporção · %. Gráfico de pizza / Pie chart. Mostrar poucos componentes sem sobreposição. As proporções devem somar 100%; exclua valores negativos e componentes sobrepostos.

06

Histograma / Histogram

Distribuição
Histograma0123456FrequênciaTempo de entrega · min0102030405016311
Dados do exemplo · ID 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
O que representa
Intervalos numéricos agrupam observações para mostrar a distribuição.
Como se diferencia
Barras usam categorias; histogramas usam intervalos numéricos.
Quando usar
Examinar concentração, dispersão e caudas nos tempos de entrega.
Condições e cuidados
Informe os limites. Com larguras diferentes, a área deve ser proporcional à frequência.
Instrução de criação

Crie um gráfico com estes dados fictícios. ID 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Histograma / Histogram. Examinar concentração, dispersão e caudas nos tempos de entrega. Informe os limites. Com larguras diferentes, a área deve ser proporcional à frequência. Largura do intervalo · minutos 10; [0,10), [10,20), [20,30), [30,40), [40,50).

07

Diagrama de caixa / Box plot

Distribuição
Diagrama de caixaTempo de entrega · min0102030405017.5
Dados do exemplo · ID 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
O que representa
Mediana, quartis, bigodes e pontos externos resumem uma distribuição.
Como se diferencia
O histograma mostra a forma; a caixa pode esconder vários picos.
Quando usar
Comparar centro e dispersão dos tempos entre grupos.
Condições e cuidados
Informe os métodos de quartis e bigodes; pontos externos não são necessariamente erros.

Quartis por interpolação linear; bigodes até observações dentro de 1,5 IQR. O ponto externo é 48 min.

Instrução de criação

Crie um gráfico com estes dados fictícios. ID 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Diagrama de caixa / Box plot. Comparar centro e dispersão dos tempos entre grupos. Informe os métodos de quartis e bigodes; pontos externos não são necessariamente erros. Quartis por interpolação linear; bigodes até observações dentro de 1,5 IQR. O ponto externo é 48 min.

08

Gráfico de dispersão / Scatter plot

Relação
Gráfico de dispersão01020304050Tempo de entrega · minDistância · km135791112
Dados do exemplo · Distância · km 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
O que representa
As posições horizontal e vertical mostram a relação entre duas variáveis numéricas.
Como se diferencia
Linhas também implicam ordem; a dispersão mantém os pontos sem conexão.
Quando usar
Explorar distância e tempo de entrega.
Condições e cuidados
Identifique eixos e unidades; correlação não comprova causalidade.
Instrução de criação

Crie um gráfico com estes dados fictícios. Distância · km 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Gráfico de dispersão / Scatter plot. Explorar distância e tempo de entrega. Identifique eixos e unidades; correlação não comprova causalidade.

09

Gráfico de bolhas / Bubble chart

Relação
Gráfico de bolhas01020304050Tempo de entrega · minDistância · km135791112Área do círculo = pacotes 4 / 9 / 16 / 25
Dados do exemplo · Distância · km 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]; Área do círculo = pacotes 4 / 9 / 16 / 25
O que representa
A área do círculo acrescenta uma terceira quantidade à dispersão.
Como se diferencia
A dispersão representa duas quantidades por posição; bolhas também exigem ler tamanho.
Quando usar
Comparar distância, tempo de entrega e número de pacotes.
Condições e cuidados
Faça a área, não o raio, proporcional ao valor; informe escala e sobreposição.
Instrução de criação

Crie um gráfico com estes dados fictícios. Distância · km 1–12; Tempo de entrega · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]; Área do círculo = pacotes 4 / 9 / 16 / 25. Gráfico de bolhas / Bubble chart. Comparar distância, tempo de entrega e número de pacotes. Faça a área, não o raio, proporcional ao valor; informe escala e sobreposição.

10

Barras ordenadas / Ranked bar chart

Classificação
Barras ordenadasProporção · %B40C35A25
Dados do exemplo · A=25, B=40, C=35; Proporção · %
O que representa
Ordenar as barras por valor revela posições e diferenças.
Como se diferencia
Barras sem ordenação preservam a sequência original; ordenar elimina a cronologia.
Quando usar
Identificar produtos ou departamentos líderes e suas diferenças.
Condições e cuidados
Defina empates e não reordene uma sequência temporal ou de processos.
Instrução de criação

Crie um gráfico com estes dados fictícios. A=25, B=40, C=35; Proporção · %. Barras ordenadas / Ranked bar chart. Identificar produtos ou departamentos líderes e suas diferenças. Defina empates e não reordene uma sequência temporal ou de processos.

11

Gráfico de cascata / Waterfall chart

Fluxo
Gráfico de cascata050100150QuantidadeEtapa1234510030-2010120
Dados do exemplo · Quantidade 100; Δ +30, −20, +10; Σ 120
O que representa
Aumentos e quedas sucessivos ligam o valor inicial ao total final.
Como se diferencia
Barras empilhadas mostram componentes; a cascata mostra mudanças acumuladas.
Quando usar
Explicar a evolução de um orçamento ou lucro.
Condições e cuidados
Diferencie início, mudanças e total; confira a soma.
Instrução de criação

Crie um gráfico com estes dados fictícios. Quantidade 100; Δ +30, −20, +10; Σ 120. Gráfico de cascata / Waterfall chart. Explicar a evolução de um orçamento ou lucro. Diferencie início, mudanças e total; confira a soma.

12

Diagrama de Sankey / Sankey diagram

Fluxo
Diagrama de SankeyA 60B 40C 50D 50
Dados do exemplo · A→C=40, A→D=20, B→C=10, B→D=30; Quantidade
O que representa
A largura das faixas representa quantidades entre origens e destinos.
Como se diferencia
Um fluxograma mostra etapas ou relações; Sankey quantifica cada caminho.
Quando usar
Explorar transferências ou distribuição de recursos.
Condições e cuidados
Use unidades consistentes e informe balanços e perdas.

A largura é proporcional ao fluxo. A envia 60 e B 40; C e D recebem 50 cada.

Instrução de criação

Crie um gráfico com estes dados fictícios. A→C=40, A→D=20, B→C=10, B→D=30; Quantidade. Diagrama de Sankey / Sankey diagram. Explorar transferências ou distribuição de recursos. Use unidades consistentes e informe balanços e perdas.

Cobertura por finalidade

Escolher um propósitoIncluídoAinda não incluído
ComparaçãoGráfico de barras2
EvoluçãoGráfico de linhas, Gráfico de áreas2
ProporçãoBarras empilhadas 100%, Gráfico de pizza2
DistribuiçãoHistograma, Diagrama de caixa3
RelaçãoGráfico de dispersão, Gráfico de bolhas2
ClassificaçãoBarras ordenadas2
FluxoGráfico de cascata, Diagrama de Sankey2

Fora do escopo · Mapas, diagramas de relações e superfícies estatísticas 3D especializadas.

Fontes dos termos e condições

Outras expressões visuais

Vocabulário visual de design web · Visualizador de hierarquias · Visualizador de círculos