“Com os Dashboards da Sala de Performance, a DP6 nos trouxe uma forte contribuição sobre como dados digitais podem representar ganhos tangíveis para o negócio ao nos ajudar a construir métricas e correlações de dados online e off-line.” – Barbara Pamplona, Coordenadora de Operação da Sala de Performance da Fiat Chrysler Automobiles, cliente DP6

Na nossa série básica de Dataviz, o post “Guia de gráficos básicos” trouxe 10 gráficos simples que podem ser utilizados no seu dia-a-dia, com dicas sobre a melhor forma de usar cada um.

Este guia de gráficos avançados traz  10 exemplos de visualizações complexas para mostrar seus dados. Há dicas de uso, cuidados necessários e curiosidades sobre cada gráfico. A indicação de legibilidade considera a experiência da pessoa que lê o gráfico com interpretação de dados, ou seja, se os gráficos são fáceis de ler ou mais complexos.

Em caso de dúvidas sobre a função de cada gráfico (comparação, distribuição, composição ou relação), recomendamos consultar também o artigo “Como escolher o melhor gráfico para meus dados?”.

GUIA DE GRÁFICOS AVANÇADOS

1. Mapa / geográfico

Legibilidade: fácil

Função: distribuição

Exemplos: sessões por cidade, vendas por estado, receita por país

guiaavancado_mapa

Os gráficos regionais podem usar uma escala de cor gradual, como no exemplo acima, ou com diferentes cores para indicar cada segmento dos dados.


2. Gauge

Legibilidade: fácil

Função: comparação

Exemplos: acompanhamento de metas, alerta para instabilidades

CUIDADO: Segundo a lei potencial de Stevens, nossa percepção visual de comprimentos é melhor do que a de áreas, o que faz com que gráficos lineares  (exemplos: colunas, linhas, bullet) normalmente sejam mais fáceis de ler e comparar do que gráficos radiais (exemplos: pizza, radar, gauge). Embora o gauge seja uma opção considerada mais atraente e adotada com mais frequência, primeiramente, considere se o gráfico bullet é mais adequado para seus dados.

guiaavancado_gauge

Nos gráficos gauge, muitas vezes se usa a escala de cores de semáforo para indicar se o valor observado está muito longe da meta (vermelho), está abaixo da meta (amarelo) ou se já atingiu a meta (verde).


3. Bullet

Legibilidade: média

Função: comparação

Exemplos: meta de leads ou de vendas

CUIDADO: Embora tenham o mesmo propósito, o gráfico bullet não é tão comum quanto o gauge, por isso consideramos que tem legibilidade “média”. Visualmente, o bullet mostra o cumprimento das metas de forma mais precisa que o gauge.

guiaavancado_bullet

As colunas de vendas realizadas “perseguem” a indicação do alvo da meta como uma bala de revólver, por isso o nome “bullet”. Na prática, o gráfico bullet pode ser feito com um gráfico de colunas ou de barras.


4. Sazonalidade

Legibilidade: média

Função: distribuição

Exemplos: evolutivo de vendas

guiaavancado_sazonalidade

Na prática, os gráficos de sazonalidade podem ser feitos como um gráfico de colunas agrupadas. O exemplo acima agrupa por mês os dados de 2015, 2016 e a projeção de 2017, além de destacar com cores diferentes os meses mais intensos e menos intensos.


5. Sunburst

Legibilidade: média

Função: composição

Exemplos: vendas por subcategorias, caminhos de navegação

CUIDADO: Conforme comentado sobre o gráfico gauge, nossa percepção visual de comprimentos é melhor do que a de áreas. No gráfico sunburst, o volume de dados é representado pelo ângulo, e não pela área de cada fatia. Porém, como os círculos externos representam uma área maior que os círculos internos, a presença de muitos níveis pode distorcer a noção de volume dos dados.

guiaavancado_sunburst

Em um gráfico sunburst, os círculos internos representam os níveis primários, que se desdobram nos círculos externos conforme subcategorias ou dados subsequentes (como na navegação em landing pages e nas páginas seguintes de um site).


6. Diagrama de Venn

Legibilidade: média

Função: composição

Exemplos: participação de cada canal nas vendas

guiaavancado_venn

O diagrama de Venn é usado na matemática para mostrar a composição de elementos de cada conjunto. Em uma perspectiva multicanal, o diagrama de Venn exibe a sobreposição dos diferentes canais de mídia, mostrando que algumas vendas podem ter influência de mais de um canal.


7. Funil

Legibilidade: média

Função: composição

Exemplos: formulários com várias etapas, fases de um carrinho de compras

CUIDADO: Quando um funil tem muitas etapas ou diferenças muito grandes entre etapas, a comparação visual pode ficar prejudicada. No primeiro caso, em que o funil fica muito “longo” por ter muitas fases ou passos, é possível avaliar se as etapas podem ser agrupadas no gráfico. No segundo caso, normalmente, a primeira etapa tem um volume bem maior que as demais, então, para não prejudicar a comparação das outras, é possível usar escala logarítmica para a construção do gráfico.

guiaavancado_funil

O gráfico de funil normalmente é usado para mostrar que, em processos de várias etapas, sempre há uma perda. A grande função do funil é mostrar quais etapas tiveram maior perda (de usuários, de receita, entre outras métricas), para que se possa investigar problemas e oportunidades de melhoria.


8. Treemap

Legibilidade: difícil

Função: composição

Exemplos: reconhecimento de padrões de navegação e conversão

guiaavancado_treemap1

O gráfico treemap é a representação visual de uma árvore de dados. Assim como em uma árvore, há um único tronco, que se desdobra em vários galhos, e cada galho pode ter zero ou mais folhas. No gráfico, o tronco, galhos e folhas são diferentes níveis de informação, representados por retângulos, cujo tamanho e cor significam os valores atribuídos a cada elemento.

guiaavancado_treemap2

No treemap, cada retângulo tem uma área e uma cor correlacionada com a estrutura da árvore, o que facilita a identificação de padrões que seriam difíceis de detectar em uma visualização simples de árvore de dados, como o exemplo acima.


9. Gráfico de vela ou “boxplot”

Legibilidade: ninja

Função: distribuição

Exemplos: análises demográficas de grupos de interesse em determinados tópicos ou produtos

CUIDADO: Para entender um gráfico de vela é importante entender os conceitos estatísticos de mediana e quartis. O gráfico de vela é usado para identificar a variação de uma variável em diferentes conjuntos de dados, ou, em outras palavras, para saber onde estão localizados 50% dos valores mais prováveis, a mediana e os valores extremos de cada conjunto. Cada conjunto de dados é ordenado e dividido em quatro grupos com o mesmo número de elementos: o risco no meio da “caixa” é a mediana, e a caixa delimita o primeiro e o terceiro quartil (dentro da caixa estão 50% dos elementos do conjunto, que indicam os valores mais prováveis).

guiaavancado_boxplot

O gráfico de vela é chamado também de “boxplot”,  diagrama de caixa ou diagrama de extremos e quartis. Tanto a altura da caixa quanto a altura da linha indicam a dispersão dos dados: quanto menor a caixa, menos dispersos estão os valores mais prováveis do conjunto de dados, e quanto menor a linha, menos dispersos estão os valores extremos do conjunto de dados.


10. Sankey

Legibilidade: ninja

Função: composição

Exemplos: fluxos (cadastro, vendas, formulários, navegação) com muitas ramificações

guiaavancado_sankey

O gráfico sankey mostra os caminhos que levam a diferentes etapas, indicando o volume do fluxo entre elas. De certo modo, é uma versão mais complexa de um funil, em que há ramificações dos caminhos.

guiaavancado_minard

O mais famoso gráfico sankey é conhecido como Diagrama de Minard, e detalha seis variáveis sobre a campanha de Napoleão na Rússia em 1812: o tamanho das tropas, a distância, temperatura, latitude e longitude, direção da viagem, e a localização relativa a certas datas. É um número impressionante de tipos diferentes de dados exibidos em um único gráfico! Até hoje o Diagrama de Minard serve como inspiração para visualizações complexas, como o gráfico de fluxos de navegação do Google Analytics.

Conhecer os gráficos é importante, mas para o dia-a-dia do Marketing Digital é necessário saber criar dashboards eficientes com esses gráficos. O segundo artigo dessa série sobre visualização de dados ensina como planejar e criar um dashboard eficiente, não deixe de ler!

Quais gráficos você gostaria de ver no guia e que não apareceram nesse post? Você usa os gráficos acima para outros objetivos? Comente com a gente, vamos trocar experiências!

Leia também os outros artigos da série de DataViz:

BÁSICOS

  1. Desafios e tendências da visualização de dados
  2. Como escolher o melhor gráfico para meus dados?
  3. Guia de gráficos básicos
  4. 5 dicas para facilitar a leitura e entendimento de gráficos

INTERMEDIÁRIOS

  1. Por que DataViz é essencial e como provar pro seu chefe
  2. Como criar dashboards eficientes
  3. Guia de gráficos avançados

Coautoria de:

20160601_110209-Copia-96x96Ingrid Pino: Participa de projetos de Data Science e Data Visualization em cinco países e atua desde 2012 com Inteligência de Negócios na área de Marketing, com foco em Digital Analytics e Análises de Mercado.

renata-galindo-96x96

Renata Galindo: Atua há 5 anos no mercado de Marketing Digital, tendo passado pela área de Performance Media e atualmente trabalha em Digital Analytics, com foco em análise, criação de dash’s e DataViz.

[Agradecemos Angélica Oliveira pela adaptação do Sankey para este artigo].