Dashboards em Python com Dash e Plotly

Na aula de hoje eu quero te mostrar como construir dashboards em Python utilizando as bibliotecas dash e plotly!

Resposta rápida: para fazer dashboards em Python, use dash e plotly juntos: o plotly desenha os gráficos e o dash monta a página web que os exibe e reage aos filtros. Instale as duas com pip, monte o layout numa lista de componentes e rode o script, que sobe um servidor local no navegador. O resultado é uma página, não um arquivo.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Adapta o exemplo de layout da documentação do Dash a uma base de vendas em Excel: gráfico de barras por produto e loja, uma lista suspensa com as lojas e um callback que filtra o gráfico pela loja escolhida. A aula trata o Dash como recurso um pouco mais avançado, que pede uma base de Python antes.

Neste vídeo (48 min):

• 1:22 - O Dash como extensão do plotly: gráficos que interagem com botões e listas, sobre a base do Flask
• 3:58 - Instalação de dash, pandas e openpyxl pelo terminal do PyCharm; no Jupyter, só o dash
• 4:58 - Layout e callbacks, as duas estruturas de um dashboard no Dash
• 9:44 - O exemplo da documentação no ar: maçãs, laranjas e bananas num gráfico de barras no navegador
• 18:25 - pd.read_excel troca a tabela de frutas pela base de vendas
• 19:40 - Gráfico refeito com produto no eixo X, quantidade nas barras e cor por loja
• 22:56 - Mais um gráfico na página: outra figura e outro dcc.Graph com outro id
• 26:03 - A lista suspensa da documentação entra no layout, antes do gráfico
• 28:02 - Opções da lista com .unique() na coluna de loja, mais a opção de todas as lojas com append
• 38:15 - Primeiro callback: trocar a loja na lista muda o texto de loja selecionada
• 45:32 - O callback ligado ao gráfico: cada loja escolhida filtra as barras, e todas as lojas volta ao gráfico inteiro
• 46:43 - Alternativa para quem já sabe Power BI: tratar a base no Python e montar o dashboard no Power BI

Trechos do vídeo:

• No layout do Dash, texto, imagem e cor são itens de HTML; o que se relaciona ao gráfico, como o próprio gráfico ou uma lista suspensa que o edita, é componente do dcc (Dash Core Components).
• Num callback do Dash, o Input é quem seleciona o valor e o Output é quem vai ser modificado. Os dois são apontados pelo id do componente e depois pelo parâmetro: value na lista suspensa, children no texto de um div, figure no gráfico.
• A função logo abaixo do decorator do callback recebe como parâmetro o valor do input e tem de devolver o que vai ocupar o parâmetro do output.
• O dashboard roda num servidor local: o link só abre no computador que está rodando o código. Para outra pessoa acessar, o caminho é fazer o deploy num servidor.
• No .loc do pandas vêm primeiro as linhas e depois as colunas: : nas colunas pega todas, e nas linhas cabe uma regra, como a coluna da loja igual ao valor escolhido na lista.

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Como Criar Dashboards com Python

Você sabia que é possível criar dashboards em Python? Hoje eu quero te mostrar como fazer isso utilizando a biblioteca dash e a biblioteca plotly.

Como vamos tratar da criação de dashboards nós vamos falar sobre criação de gráficos no Python, pois os dashboards precisam desses gráficos para facilitar a visualização dos dados.

Python Impressionador

Você vai aprender a linguagem de Programação que mais cresce no Mundo para fazer automações incríveis, desenvolver sites, fazer análises de dados, trabalhar com Ciência de Dados, Inteligência Artificial, mesmo que você nunca tenha tido nenhum contato com Programação na vida.

Black Friday · Lote Especial · Lote 1 · Último Lote

De R$ 1.497 56% OFF54% OFF53% OFF

por 12x R$ 6467,5069

Preço do Lote Especial até 13/11, às 23h59Último dia do Lote Especial: o preço vale até hoje, às 23h59Preço do Lote 1 até 20/11, às 23h59Último dia do Lote 1: o preço vale até hoje, às 23h59Preço do Último Lote até 27/11, às 23h59Último dia do Último Lote: o preço vale até hoje, às 23h59

Começar agoraQuero a oferta de Black Friday

Dashboard com Python

Como a documentação dessas bibliotecas já utiliza algumas bases de dados já prontas, e nós queremos de mostrar tudo passo a passo, então não se esqueça de baixar os arquivos para poder acompanhar a aula!

OBS: Aqui no blog nós já temos um conteúdo falando sobre a biblioteca plotly que é uma biblioteca para criação de gráficos.

O dash seria uma extensão do plotly, então você vai conseguir criar gráficos que conseguem interagir com outras coisas, tipo botão, caixa de seleção, lista de valores…

Ele cria o gráfico dentro de uma base do flask, ou seja, você vai conseguir pegar qualquer gráfico criado através do dash e colocar em um site

OBS: Se você ainda não sabe o que é flask ou queira saber um pouco mais sobre a criação de sites com flask nós temos um post aqui no blog falando só sobre esse assunto. Basta clicar aqui para acessar essa página.

Para o nosso projeto vamos precisar da biblioteca dash e da biblioteca pandas (que é uma biblioteca para análise de dados).

Outra biblioteca que vamos ter que instalar é a biblioteca openpyxl, pois o pandas utiliza ela para ler dados em Excel.

OBS: Para esse exemplo nós vamos utilizar o editor de Python PyCharm, então se você ainda não tem ou quer acompanhar utilizando o mesmo editor basta clicar aqui que temos um passo a passo de instalação.

Vamos ter basicamente duas partes na construção do dashboard com o Dash. A primeira delas é o layout que é toda a parte visual e a segunda é o callback que seria a funcionalidade que vai dar para o gráfico.

Para dar início a construção do nosso layout nós já vamos pegar o código pronto que tem no próprio site do dash, então você pode copiar e depois nós vamos fazer as nossas alterações.

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Ao rodar o código padrão você vai verificar se tudo está rodando normalmente, se não estiver pode não ter instalado as bibliotecas ou pode estar com algum problema de configuração no seu Python.

Após rodar o código você vai receber uma mensagem de que o dash está rodando no site x, então basta clicar nele ou copiar e colar no seu navegador que você já vai se deparar com esse resultado.

Então temos basicamente um site com esse dashboard que foi utilizando o exemplo da própria documentação do dash.

Para o layout nós temos 2 tipos de itens para o nosso dashboard. Vamos ter os itens em HTML e os itens em DCC (dashboard core components).

Geralmente tudo o que for relacionado ao gráfico nós vamos utilizar o dcc e o que não estiver relacionado ao gráfico nós vamos utilizar o html.

Na parte app.layout = html.Div(children=[ você vai notar que aqui vamos começar uma “árvore”, então temos um grande bloco onde vamos colocar os outros blocos dentro para criar o nosso dashboard.

Você vai notar que temos 3 blocos de códigos, 1 é para o título, o outro para o texto logo abaixo do título e o último para o gráfico.

Então agora que você já tem uma noção dessa construção nós podemos alterar essas informações para poder criar o nosso dashboard.

Esses ajustes são para inserir as nossas informações e os nossos dados. Então lembre-se de que você vai poder alterar essas informações para ajustar o seu dashboard.

Pode alterar os títulos, textos e o próprio gráfico para criar o seu dashboard personalizado.

Nós agora vamos inserir os elementos do dcc (dash core components). Lembrando de que você pode pegar todas essas informações dentro da documentação.

Nós vamos inserir um botão de Dropdown, que é uma lista. Então vamos utilizar essa lista para que possamos selecionar as lojas.

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame

# see https://plotly.com/python/px-arguments/ for more options

df = pd.read_excel("Vendas.xlsx")


# criando o gráfico
fig = px.bar(df, x="Produto", y="Quantidade", color="ID Loja", barmode="group")

opcoes = list(df['ID Loja'].unique())

opcoes.append("Todas as Lojas")

app.layout = html.Div(children=[

    html.H1(children='Faturamento das Lojas'),

    html.H2(children='Gráfico com o Faturamento de Todos os Produtos separados por Loja'),

    html.Div(children='''

        Obs: Esse gráfico mostra a quantidade de produtos vendidos, não o faturamento.

    '''),

    dcc.Dropdown(opcoes, value='Todas as Lojas', id='lista_lojas'),

    dcc.Graph(

        id='grafico_quantidade_vendas',

        figure=fig

    )

])

@app.callback(

    Output('grafico_quantidade_vendas', 'figure'),

    Input('lista_lojas', 'value')

)

def update_output(value):

    if value == "Todas as Lojas":

        fig = px.bar(df, x="Produto", y="Quantidade", color="ID Loja", barmode="group")

    else:

        tabela_filtrada = df.loc[df['ID Loja']==value, :]

        fig = px.bar(tabela_filtrada, x="Produto", y="Quantidade", color="ID Loja", barmode="group")

    return fig


if __name__ == '__main__':

    app.run_server(debug=True)

E depois nós vamos dar uma funcionalidade para essa lista, por isso do callback, que comentei anteriormente. Que é uma funcionalidade dentro do nosso dashboard.

Esse é o nosso código completo já com o dropdown com as opções das lojas e uma opção padrão de todas as lojas.

Outra coisa é o callback que vamos colocá-lo antes do if __name__ == ‘__main__’:. E claro, além de definir o output (saída) e o input (entrada).

Nós temos que definir como esses valores serão alterados dentro do nosso dashboard, então vamos utilizar a função IF para verificar se estamos com “Todas as Lojas” para deixar a visualização total.

E caso selecione qualquer outra opção vamos ajustar o gráfico para essa informação selecionada!

Aqui temos o dashboard final com a nossa caixa de listagem para que o usuário possa selecionar qual loja quer analisar.

Aqui temos o gráfico já filtrado com a informação selecionada, então você de fato tem um dashboard que permite com que o usuário faça a interação com os dados.

Então você pode utilizar o dropdown, slider, tab, tooltip entre outros diversos callbacks para compor o seu dashboard.

Agora é praticar e ler a documentação para inserir novos elementos para que você consiga criar o seu próprio dashboard em Python!

Conclusão de Dashboards em Python

Nessa aula eu te mostrei como criar um dashboard em Python utilizando o dash e o plotly.

Você agora vai poder criar os seus próprios dashboards em Python e ainda vai poder colocá-los no seu site se precisar para deixar disponível para os usuários!

Hashtag Treinamentos

Para acessar outras publicações de Python, clique aqui!