Transformações e Personalização¶

Esse notebook vai tratar das Transformações nos dados e Personalização de gráficos possíveis utilizando Altair. Transformações de dados são parte fundamental da Visualização da Informação, escolher o nível de detalhe é tão importante quando as variáveis visuais. E a visualização se torna inútil se ninguém entende o que ela transmite. Em adição as variáveis visuais, um gráfico precisa de elementos de referência, contexto ou guias para ajudar a entender o gráfico. Eixos e legendas são parte fundamental de uma visualização eficiente!

Então, começamos importando as bibliotecas necesárias.

E carregando nosso arquivo local `dados.csv`, com os dados de sensores climáticos no ano de 2019 do estado do Pará por semana. Os valores estão agrupados pela média.

Histograma¶

Vamos começar com um idioma visual de agregação conhecido: o histograma. O histograma apresenta a frequência de determinados grupos em uma distribuição.

Vamos começar sem agregar nada: um scatterplot da temperatura máxima pela data.

O modo mais simples para agregar os pontos na distribuição é adicionando o argumento bin na variável visual.

Conseguimos ver algumas divisões bem definidas, mas alterando um pouco o argumento `bin` podemos ajustar o número de grupos. Vamos tentar 20 grupos.

Parece bom, mas como fica com 40 divisões? 5? É fácil ver as diferenças usando esse scatterplot? Adicione opacidade e veja se a frequência fica mais explícita.

Parece que dividimos bem. Agora temos muitos pontos, vamos contar o número de pontos por cada intervalo com a função count().

Para aproveitar o espação vamos trocar a marca de point para bar e pronto, temos um histograma.

As temperaturas ficam concentradas no intervalo de 25 até 29 graus. Qual o intervalo das temperaturas mínimas?

Ainda contando frequências, podemos contar um campo em função de outro usando bin nos dois mapeamentos visuais. Vamos ver a relação entre a Pressão Atmosférica máxima e a Temperatura do ar mapeando quantas vezes aparecem juntos pelo tamanho.

Como fica o scatterplot? Tire os parâmetros bin, cor e o tamanho para ver como fica e veja se dá pra enxergar o mesmo padrão.

Para aproveitar o espaço, ao mesmo tempo que alinha as divisões dos grupos, podemos tirar o tamanho e trocar a marca de círculos para retângulos.

A mudança no esquema de cor faz saltar melhor as diferenças mesmo usando a área e a cor na primeira versão. Mais abaixo vamos aprender a manipular essas decisões automáticas e ajustar os padrões conforme for melhor para o domínio do problema.

Agregação¶

Contagem é um tipo de agregação, e Altair tem outras funções que permitem agregações estatísticas e em função do tempo.

Momentos estatísticos e ordem¶

Momentos são funções que descrevem uma distribuição, como média, mediana, variância e desvio padrão. Com Altair também podemos agrupar somando e utilizar percentis.

Agora vamos mostrar a média das temperaturas máximas por cidade.

Substitua a média (average) pela mediana (median) e veja o que acontece com o gráfico. Nessa distribuição fica muita diferente?

Importante: As barras ficam melhor para mostrar essa distribuição, mas não é recomendável tirar a base 0 quando o mapeamento é feito com barras. A comparação entre barras é normalmente feita com uma base comum, já que é feito em função de razão.

As barras estão ordenadas pelo nome, e podemos ordenar pelo valor das médias.

Trocando ascending por descending inverte a distribuição.

Temos valores de umidade relativa mínima e máxima, e podemos agrupar pelos quartis para mostrar a distribuição.

Usando os quartis inferior e superior dá pra ver que o tamanho das barras é mais ou menos igual, com algumas barras bem grandes, mostrando uma variação de temperatura mínima grande nesses casos.

Tiramos a base 0, mas como as barras não tem a mesma base, podemos comparar só os intervalos

Tempo¶

Usando as funções de agregação de tempo do Altair podemos contextualizar os nossos dados temporais.
Até aqui temos utilizado um arquivo local com os dados agregados por semana, o `dados.csv`. Agora vamos carregar um arquivo com mais dados, o completo.csv, assim poderemos ver também agregação por hora e dia. Esse arquivo tem os dados de cada sensor por hora ao invés de agregado por semana.

Como o arquivo é grande, vamos carregar pela URL do repositório para evitar erros de memória.

Agora conseguimos fazer umas análises a nível de hora, usando a função hour(<campo>):

Apesar de simples e óbvio, conseguimos ver que os dias são quentes e as noites um pouco mais frias, isso confirma que os sensores de temperatura estão em bom funcionamento.

Usando month(), como fica a distribuição? E mapeando a temperatura mínima para Y2?

Usando Transformações Avançadas¶

Usando Altair, ainda é possíevl criar campos novos baseado em operações, ou modificar campos já existens com parâmetros de busca.

Vamos ver a diferença entre as temperaturas máxima e mínima ao longo do do dia, criando um novo campo chamado 'Diferença' e adicionando ao conjunto de dados.

O termo datum é como Vega-Lite se refere a cada linha dos dados (datum é singular de data em inglês), e a grafia do nome dos campos varia entre duas formas: datum[campo] e datum.campo. A forma [ ] deve ser usada quando o atributo tem espaços no nome. As operações matemáticas e lógicas seguem a sintaxe do Javascript, que pode ser vista no documento de referência.

Durante a noite pouco tem mudança de temperatura, e durante o dia oscila um pouco mais.

Conseguimos observar um grau de oscilação grande em alguns horários, talvez em função das estações do ano. Vamos fazer uma transformação de filtro e ver todas as cidades em no mês das férias, julho.

Novo repartimento tem pouca variação em Julho, podemos detalhar um pouco mais.

Explicando melhor as transformações que fizemos nos dados para esse gráfico:

• Utilizando transform_calculate criamos um novo campo da diferença das temperaturas mínimas e máximas de uma medição.
• Utilizando transform_filter aplicamos dois filtros: o primeiro (month(datum.Data) == 6) para indicar que só queremos o mês de Julho e (&&) apenas a cidade de Novo Repartimento (datum.Cidade == 'Novo Repartimento').

Podemos ver uma varição muito pequena durante os dias. Essas trocas de temperatura são importantes para depósitos de alimento e bebidas, e mostra que durante as férias essa variação é pequena e uniforme.

Experimente trocar de Julho para o mês de Março, e verifique se existe outra cidade do mesmo jeito.

Descobrimos a menor diferença olhando para os gráficos, mas como são muitos, ainda é um esforço visual. Como uma cidade se destacou bem mais que as outras, também foi mais fácil identificar. Aplicando mais transformações podemos ordenar para mostrar as 10 primeiras cidades que apresentam menos diferença, e mudar a variável visual mapeando a diferença de cor para tamanho da barra:

Sobre as transformações pra esse gráfico:

• transform_calculate e o primeiro transform_filter estão como no heatmap
• transform_aggregate cria uma agregação de um campo pelo outro através de uma função, nesse caso agrupamos a média da diferença de cada cidade.
• transform_window aplica uma função aos dados da agregação. Rank=rank() cria uma nova coluna nos novos dados com a posição de cada um baseado no valor da agregação.
• O segundo transform_filter indica que só queremos as 10 primeiras cidades.

Procure Pacajá e Soure no heatmap acima e veja como é muito mais simples comparar depois das transformações.

Aperte nos três pontinhos ao lado do gráfico e veja no Editor Web do Vega como os dados ficam depois de transformados.

Para nós que estamos construindo esses gráficos, fica simples de entender o que está acontecendo olhando o código, mas o público alvo de uma visualização nem sempre tem esse contexto. Vamos continuar agora vendo meios de deixar adequar esses os gráficos para ambientes que não são de programação.

Personalização¶

Até aqui temos muitas ferramentas de exploração, manipulação de dados e mapeamento, e agora vamos ver ferramentas de manipulação de estilo. Afinal, se ninguém entende o que a visualização está tentando comunicar ela não serve para nada!

Vamos ver alguns exemplos novos e melhorar alguns gráficos que já fizemos aqui mesmo.

Escalas e Eixos¶

Para mostrar como alterar escalas e eixos vamos usar um campo da nossa

Podemos ver que tem muitos valores na borda do 0, então vamos mexer um pouco na escala e esticar um pouco o eixo. Vamos mudar a escala da padrão linear para logarítimica, que destaca as bordas da distribuição, ao mesmo tempo que aumentamos o alcance (`range`), começando no ponto normal mas seguindo até 850 pixels.

Antes do 0.1 temos alguns valores soltos, mostrando que o começo não é uniforme mas depois de 0.1 até 1.5 passa a ser.

Podemos comparar com outra váriavel também ambas. Podemos ver abaixo a relação da umidade com as medidas de precipítação.

Conseguimos ver um aglomerado, onde tem medições de Umidade máxima perto do limite superior também tem precipitação.

Acabamos de mexer com a escala de uma váriavel e não indicamos isso em lugar nenhum. Vamos adicionar um título, e descrever melhor os eixos, indicando as mudanças na escala. Aproveitando, também vamos mexer nas marcações da escala e mudar a opacidade e tamanho dos círculos pra mostrar melhor o aglomerado. Por fim, aumentar o tamanho.

Tente criar esse gráfico uma mudança de cada vez e veja como ele vai se transformando.

Cores e legendas¶

Agora que conseguimos manipular os elementos do gráfico, ainda podemos melhorar o estilo das cores e legendas nos nossos gráficos.

Para mostrar isso, vamos escolher duas cidades, Capitão Poço e Altamira para comparar temperaturas máximas e mínimas.

Podemos aplicar o filtro diretamente no dataframe separando as duas cidades, ou usar a transformação no Altair.

Vamos primeiro fazer um gráfico de linhas pra comparar durante os meses.

Agora vamos mudar as linhas para as área com valores mínimo e máximo, e tirar o mapeamento automático. Vamos escolher cores próximas das bandeiras dos municípios alterando o domain e o range.

Quanto ao heatmap anterior, podemos mudar o esquema de cor dele para um mais familiar em relação a temperaturas, e algumas mudanças de estilo em relação ao título usando a função configure_title.

Como fica a distribuição por mês? Por semana? Experimente os esquemas de cor orangered, magma

Nossas análises até aqui estão restritas a uma única visão, e temos um limite de quanta informação é possível entender desse jeito. No próximo notebook vamos ver como ampliar as visões e usar interação para maximizar o uso das variáveis visuais.

Exercícios¶

1. Mude o agregação de horas para dia da semana no último heatmap. Mude também o esquema de cor para um tom azulado.

2. Crie um heatmap do mês em relação ao dia, com a cor mapeada para a média das temperaturas. Esse heatmap deve ser aplicado somente para uma cidade, que deve ser indicada no título.

3. Crie um gráfico de barras divergentes, cada lado deve ter uma cor diferente.

4. Escolha um atributo e crie um gráfico com dois histogramas lado a lado, um para abril e outro para maio.

5. Crie um gráfico de inclinação, com inclinações para cima em verde e para baixo em vermelho.

6. Crie um gráfico de barras empilhado mapeando três atributos da base. Perceba que a base não tem dois atributos categóricos, então um deles ser gerado por uma transformação.

7. Adicione inverno e verão com cores diferentes em um histograma.

Crie uma célula com o conteúdo abaixo, e use x para resolver os exercícios 8 e 9:

import pandas as pd
import numpy as np
x = pd.DataFrame({'x': np.linspace(-5, 5)})

8. Crie um gráfico de linhas utilizando esse DataFrame com seno e coseno da distribuição x usando transform_calculate.

9. Use transform_filter e remova as regiões do gráfico onde a curva do coseno é menor que a curva do seno.