Como criar um histograma com Plotly

Histogramas são representações gráficas populares de pontos de dados organizados em faixas específicas. Eles aparecem com frequência em estatística para mostrar a quantidade de um determinado tipo de variável que ocorre dentro de um certo intervalo. Por exemplo, seu antigo professor de matemática pode ter usado um histograma para visualizar o número de notas obtidas por todas as pessoas da sua turma. 

Figura 1: Exemplo de histograma mostrando a distribuição de notas de uma turma. 

[Fonte: Exemplo de histograma com Matplotlib] 

Suas barras de alturas variadas lembram os gráficos de barras, mas histogramas servem para visualizar dados quantitativos, e não dados categóricos – que são o foco dos gráficos de barras. 

Em geral, os dados numéricos visualizados em histogramas são contínuos, ou seja, possuem infinitos valores possíveis. Tentar plotar todos os valores de variáveis contínuas costuma ser impraticável. Os histogramas resolvem isso agrupando diversos pontos de dados em faixas lógicas (os chamados bins) e permitindo sua visualização. 

Neste tutorial, vamos ver como implementar histogramas em Python usando a biblioteca de visualização de dados Plotly. Também vamos abordar diferentes formas de personalizar seu histograma no Plotly e por que a visualização de dados é importante desde o começo. 

Confira este workbook do DataLab para acompanhar o código do tutorial. 

A importância da visualização de dados na análise

Nenhuma empresa pode dizer que não se beneficia de entender melhor seus dados. O papel da análise de dados é ajudar negócios a otimizar sua performance e melhorar seus resultados; essa disciplina se estende a todas as áreas onde existem dados, já que gerar insights costuma ser uma vantagem competitiva.   

As visualizações de dados são as representações gráficas que analistas usam para comunicar informação e dados. Seu objetivo é resumir os dados em um formato de fácil compreensão, destacando os aprendizados essenciais para quem lê. 

Em outras palavras, empresas usam visualizações para identificar rapidamente tendências que, sem apoio visual, seriam difíceis de notar. Representações gráficas facilitam a comunicação de informações de forma universal, rápida e eficaz. 

Introdução ao Plotly

Plotly é uma biblioteca interativa e open source de visualização de dados para Python e R, escrita em JavaScript. Neste artigo, vamos focar no Plotly para Python, às vezes chamado de “plotly.py”, para diferenciá-lo da versão em JavaScript. 

Dica: Faça os cursos Introduction to data visualization with Plotly in Python ou Interactive data visualization with Plotly in R para pegar o jeito do Plotly.   

Muitos usuários do Plotly comentam que foram inicialmente “cativados” pela estética moderna que a biblioteca permite implementar com facilidade. O Plotly para Python possibilita criar visualizações web bonitas e interativas que podem ser: 

• exibidas em notebooks Jupyter, 
• salvas como arquivos HTML independentes, 
• servidas como parte de aplicações web feitas só em Python usando Dash.

Outro atrativo do Plotly é a grande variedade de tipos de gráficos disponíveis. A biblioteca oferece mais de 40 gráficos, cobrindo casos de uso em estatística, finanças, geografia, ciência e gráficos 3D. 

Também é fácil exportar visualizações criadas com Plotly graças à integração com o Kaleido – ferramenta de exportação de imagens. Há ainda amplo suporte para contextos fora da web, incluindo editores de desktop (como Spyder, PyCharm etc.) e publicação de documentos estáticos (por exemplo, exportar notebooks Jupyter para PDF). 

Instalar o plotly.py é bem simples; você pode usar o pip: 

pip install plotly>=5.11.0, <5.12.0

Ou o Conda: 

conda install -c plotly plotly>=5.11.0, <5.12.0

Observação: É recomendado instalar bibliotecas em um ambiente virtual para manter as dependências de cada projeto separadas. Você também pode começar com um workbook do DataLab - um IDE de Ciência de Dados em Python e R na nuvem. 

Usando o DataLab

O DataLab é um ambiente de desenvolvimento integrado (IDE) online que permite escrever código, analisar dados de forma individual ou colaborativa e compartilhar insights. Em outras palavras, pense no DataLab como um Google Docs pensado para ciência de dados; saiba mais no nosso artigo Using DataLab in the Classroom.

Para esta tarefa, precisamos criar um workbook a partir de um conjunto de dados. Felizmente, a DataCamp oferece um acervo rico e em crescimento de datasets interessantes para analisar. Ao criar um workbook a partir de um dataset, o ambiente já traz todos os dados pré-configurados e uma breve descrição, para você colocar a mão na massa desde o início.   

Os passos para criar um workbook usando um dataset da DataCamp são: 

• No app do DataLab, selecione "Datasets" na barra lateral.
• Escolha um dataset do seu interesse. Uma janela será exibida com uma prévia do dataset selecionado, incluindo dicionário de dados e link para a fonte, a possível escolha de linguagem (Python ou R) e um panorama de publicações que outros usuários criaram com esse dataset.
• Selecione Create workbook.

Figura 2: GIF mostrando como criar um workbook a partir de um dataset.

Observação: Veja o Creating a Plotly Histogram with Olympics Data para acompanhar o código.

Vamos usar o dataset Olympics Data, do acervo interno da DataCamp. Segundo a descrição, é um conjunto histórico dos Jogos Olímpicos modernos, de Atenas 1896 ao Rio 2016. Cada linha corresponde a um atleta (271.116 instâncias) competindo em um evento olímpico e qual medalha conquistou (se houver).

As colunas são as seguintes: 

Pelo que vimos, as colunas adequadas para montar um histograma são: age, height, weight e year. Isso porque histogramas são construídos com valores numéricos contínuos – eles representam a distribuição de dados numéricos, em que os dados são agrupados em bins e a contagem de cada bin é exibida. 

Vamos usar a coluna age para criar nosso histograma. 

Criando um histograma no Plotly

Criar um histograma em Python com Plotly é bem simples. Podemos usar o Plotly Express, que é uma interface de alto nível e fácil de usar…

import plotly.express as px

# Create a histogram
fig = px.histogram(olympic_data.age, x="age",
                  title="Distribution of Athletes age")
fig.show()

Figura 3: Histograma criado com Plotly Express

Também podemos usar Graph Objects.

import plotly.graph_objects as go

fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

# add the title
fig.update_layout(title=dict(text="Distribution of Athletes age"))
fig.show()

Figura 4: Histograma criado com Plotly Graph Objects. 

As funções do Plotly express chamam internamente graph_objects, que retorna uma figura. Por isso, as funções do Plotly Express são úteis: elas permitem desenhar visualizações que, usando graph_objects diretamente, exigiriam mais linhas de código. 

“O módulo plotly.express (geralmente importado como px) contém funções que podem criar figuras completas de uma vez e é chamado de Plotly Express ou PX. O Plotly Express faz parte da biblioteca Plotly e é o ponto de partida recomendado para criar a maioria das figuras comuns. Toda função do Plotly Express usa graph objects internamente e retorna uma instância de plotly.graph_objects.Figure.”

Fonte: Plotly Express in Python. 

Apesar do Plotly express ser a porta de entrada recomendada, vamos usar graph_objects para personalizar a aparência do nosso histograma, pois ele oferece mais flexibilidade.  

Personalizando a aparência do histograma no Plotly

No momento, nosso histograma está bem sem graça. Vamos deixá-lo mais atraente mudando as fontes do título e adicionando rótulos aos eixos. 

# Create histogram
fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

fig.update_layout(
    # Set the global font
    font = {
        "family":"Times new Roman",
        "size":16
    },
    # Update title font
    title = {
        "text": "Distribution of Athletes age",
        "y": 0.9, # Sets the y position with respect to `yref`
        "x": 0.5, # Sets the x position of title with respect to `xref`
        "xanchor":"center", # Sets the title's horizontal alignment with respect to its x position
        "yanchor": "top", # Sets the title's vertical alignment with respect to its y position. "      
        "font": { # Only configures font for title
            "family":"Arial",
            "size":20,
            "color": "red"
        }
    }
)

# Add X and Y labels
fig.update_xaxes(title_text="Age")
fig.update_yaxes(title_text="Number of Athletes")

# Display plot
fig.show()

Figura 5: Histograma do Plotly com título atualizado e rótulos nos eixos. 

Com esses ajustes, o histograma ficou mais informativo. 

Agora, vamos alterar o tamanho de cada bin. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5) # Change the bin size to 5
    )
  ]
)

Figura 6: Histograma do Plotly com bin de tamanho 5. 

No código acima, definimos o parâmetro xbins na instância go.Histogram como uma instância de go.histogram.XBins e passamos o tamanho desejado como parâmetro. Observe que poderíamos ter feito o mesmo usando um objeto dict com propriedades compatíveis. 

Por fim, vamos mudar a cor dos bins para laranja para dar mais destaque à visualização. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange") # Change the color
    )
  ]
)

Figura 7: Histograma do Plotly com bins laranja.

Bem melhor. 

No código acima, definimos o parâmetro marker na instância go.Histogram como uma instância de go.histogram.Marker e especificamos a cor desejada como parâmetro. 

Ainda há diversas outras personalizações que podemos fazer no nosso histograma do Plotly, como adicionar texto ao passar o mouse (hover). 

Habilitando hover text

Atualmente, ao passar o mouse sobre uma barra no histograma, é exibido um texto com o que ela representa – veja a Figura 8. 

Figura 8: O hover text exibido atualmente ao passar o mouse sobre o histograma. 

Isso não é muito intuitivo. Em visualização de dados, queremos que os gráficos sejam autoexplicativos – inclusive no hover. Então vamos atualizar a informação exibida quando passamos o mouse sobre um bin. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange"), # Change the color
        hovertemplate="<br>".join([
            "Age Range: %{x}",
            "Number of Athletes: %{y}"]) # Make hover text more informative
    )
  ]
)

Figura 9: Informações de hover atualizadas. 

O texto exibido ao passar o mouse ficou bem mais informativo, facilitando a interpretação da visualização. Fizemos isso atualizando o parâmetro hovertemplate na nossa instância go.Histogram. 

Adicionando opções de filtro

No início do tutorial, dissemos que poderíamos construir um histograma com as variáveis age, height, weight e year. Não precisamos criar um histograma separado para cada uma. 

Em vez disso, podemos construir um único histograma e adicionar botões de filtro para alternar qual variável será exibida na visualização. 

Veja como fica no código.

"""
Starter code provided by vestland on StackOverflow
Link: https://bit.ly/3ipqOMo
"""
# continuous features
continuous_vars = ["age", "height", "weight", "year"]

# plotly
fig = go.Figure()

# set up ONE trace
fig.add_trace(
    go.Histogram(x = olympic_data.age,
                xbins=go.histogram.XBins(size=5), # Change the bin size
                marker=go.histogram.Marker(color="orange"), # Change the color
            )
)

buttons = []

# button with one option for each dataframe
for col in continuous_vars:
    buttons.append(dict(method='restyle',
                        label=col,
                        visible=True,
                        args=[{"x":[olympic_data[col]],
                              "type":'histogram', [0]],
                        )
                  )

# some adjustments to the updatemenus
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)

updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True

# add dropdown menus to the figure
fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()

Figura 10: Histograma com filtros que permitem alternar várias variáveis em uma única visualização.

Pronto! Não deixe de conferir o workbook Creating a Plotly Histogram with Olympics Data e experimentar o que construímos neste tutorial. 

Conclusão 

Agora você já sabe como criar um histograma no Plotly para Python. Neste tutorial, vimos:

• o que é um histograma e como ele funciona
• a importância da visualização de dados na análise
• como começar com o DataLab
• como criar um histograma no Plotly 
• diferentes formas de personalizar seu histograma
• como aplicar filtros 

Se você quer se aprofundar em histogramas ou no uso do Plotly, confira os links abaixo:

• Histogramas no Matplotlib
• Como fazer um histograma com ggplot2
• Intermediate Interactive Data Visualization with Plotly in R