Como usar Plotly e Dash para visualização de dados

Wuhan Yuan Chuanghui retorna, vamos falar sobre modelos grandes em 20 de abril”

Este artigo foi compartilhado pela Huawei Cloud Community " Dos dados à implantação usando Plotly e Dash para realizar a visualização de dados e a implantação do ambiente de produção " por Lemony Hug.

A visualização de dados é uma parte vital da análise de dados, que pode nos ajudar a compreender os dados de forma mais intuitiva e a descobrir padrões e tendências ocultos. Existem muitas ferramentas poderosas para visualização de dados em Python, sendo Plotly e Dash duas escolhas populares. Plotly fornece uma variedade de funções de desenho interativo, enquanto Dash é uma estrutura Python para construir aplicativos web interativos. Este artigo apresentará como usar Plotly e Dash para visualização de dados e demonstrará sua aplicação por meio de código de caso.

Instale Plotly e Dash

Primeiro, precisamos instalar as bibliotecas Plotly e Dash. Você pode instalá-los usando pip com o seguinte comando:

pip instalar plotly dash

Assim que a instalação for concluída, podemos começar a usar essas duas bibliotecas.

Código do caso: aplicativo simples de visualização de dados

Vamos começar com um exemplo simples, digamos que temos alguns arquivos CSV de dados de vendas e queremos criar um gráfico interativo para visualizar esses dados e implantá-los como uma aplicação web. Primeiro, precisamos importar as bibliotecas necessárias:

traço de importação
do painel importar dcc, html
importar plotly.express como px
importar pandas como pd

#Ler dados
df = pd.read_csv('dados_vendas.csv')

#Criar aplicativo Dash
aplicativo = traço.Dash(__name__)

# layout
app.layout = html.Div([
    html.H1("Visualização de dados de vendas"),
    dcc.Graph(
        id='gráfico de vendas'
    )
])

# Ligar de volta
@app.callback(
    dash.dependencies.Output('gráfico de vendas', 'figura'),
    [dash.dependencies.Input('gráfico de vendas', 'valor')]
)
def update_graph(ano_selecionado):
    filtrado_df = df[df['Ano'] == ano_selecionado]
    fig = px.bar(filtered_df, x='Mês', y='Vendas', title=f'Dados de vendas-{ano_selecionado}')
    retornar figo

#Iniciar aplicação
se __nome__ == '__principal__':
    app.run_server(depuração = Verdadeiro)

Neste exemplo, primeiro lemos um arquivo CSV chamado sales_data.csv e depois criamos um aplicativo Dash. No layout da aplicação definimos um título e uma área vazia do gráfico. Em seguida, configuramos uma função de retorno de chamada para que, quando o usuário selecionar um ano diferente, o gráfico seja atualizado para mostrar os dados de vendas daquele ano. Finalmente, iniciamos a aplicação chamando o método run_server.

Certifique-se de que seu arquivo sales_data.csv contenha os campos de dados necessários (como Ano, Mês e Vendas) para que o código possa ser executado corretamente.

Código do caso: visualização e interação avançada de dados

No caso anterior, mostramos como criar um aplicativo simples de visualização de dados usando Dash e Plotly. Agora, vamos explorar mais alguns recursos avançados, como adicionar mais interatividade e personalização.

Digamos que queremos mostrar tendências nos dados de vendas e permitir que os usuários vejam diferentes tendências selecionando diferentes categorias de produtos. Podemos realizar esta função através do seguinte código:

traço de importação
do painel importar dcc, html
importar plotly.express como px
importar pandas como pd

#Ler dados
df = pd.read_csv('dados_vendas.csv')

#Criar aplicativo Dash
aplicativo = traço.Dash(__name__)

# layout
app.layout = html.Div([
    html.H1("Tendência de dados de vendas"),
    dcc.Dropdown(
        id='lista suspensa do produto',
        opções=[
            {'rótulo': 'Produto A', 'valor': 'Produto A'},
            {'rótulo': 'Produto B', 'valor': 'Produto B'},
            {'rótulo': 'Produto C', 'valor': 'Produto C'}
        ],
        valor='Produto A'
    ),
    dcc.Graph(
        id='tendência de vendas'
    )
])

# Ligar de volta
@app.callback(
    dash.dependencies.Output('tendência de vendas', 'figura'),
    [dash.dependencies.Input('dropdown do produto', 'valor')]
)
def update_trend(produto_selecionado):
    filtrado_df = df[df['Produto'] == produto_selecionado]
    fig = px.line(filtered_df, x='Mês', y='Vendas', title=f'{selected_product}Tendência de vendas')
    retornar figo

#Iniciar aplicação
se __nome__ == '__principal__':
    app.run_server(depuração = Verdadeiro)

Neste exemplo, adicionamos um menu suspenso que permite ao usuário selecionar diferentes categorias de produtos. À medida que o usuário seleciona um produto diferente, o gráfico será atualizado para mostrar as tendências de vendas do produto selecionado. Isso dá aos usuários mais flexibilidade para explorar as vendas de diferentes produtos.

Além de gráficos de linhas simples, o Plotly também oferece diversos tipos de gráficos e opções de personalização para atender a necessidades de visualização mais complexas. Dash nos permite construir aplicativos web interativos e atualizar gráficos dinamicamente por meio de funções de retorno de chamada para fornecer aos usuários uma experiência melhor.

Adicione interatividade e estilo

No caso acima, mostramos como usar Dash e Plotly para criar um aplicativo de visualização de dados e fornecer funções interativas básicas. Agora, vamos adicionar mais interatividade e estilo para tornar nosso aplicativo mais atraente e fácil de usar.

traço de importação
do painel importar dcc, html, callback_context
importar plotly.express como px
importar pandas como pd

#Ler dados
df = pd.read_csv('dados_vendas.csv')

# Obtenha uma lista de produtos exclusiva
produtos_disponíveis = df['Produto'].unique()

#Criar aplicativo Dash
aplicativo = traço.Dash(__name__)

#Aplicar estilo
app.layout = html.Div([
    html.H1("Tendência de dados de vendas", style={'textAlign': 'center'}),
    html.Div([
        html.Label("Selecionar produto:"),
        dcc.Dropdown(
            id='lista suspensa do produto',
            opções=[{'label': produto, 'valor': produto} para produto em produtos_disponíveis],
            valor=produtos_disponíveis[0]
        )
    ], estilo={'largura': '50%', 'margem': 'auto', 'textAlign': 'centro'}),
    dcc.Graph(
        id='tendência de vendas',
        config={'displayModeBar': False} # Desativa a barra de modo do gráfico
    )
], estilo={'padding': '20px'})

# Ligar de volta
@app.callback(
    dash.dependencies.Output('tendência de vendas', 'figura'),
    [dash.dependencies.Input('dropdown do produto', 'valor')]
)
def update_trend(produto_selecionado):
    filtrado_df = df[df['Produto'] == produto_selecionado]
    fig = px.line(filtered_df, x='Mês', y='Vendas', title=f'{selected_product}Tendência de vendas')
    retornar figo

#Iniciar aplicação
se __nome__ == '__principal__':
    app.run_server(depuração = Verdadeiro)

Neste exemplo, adicionamos alguns estilos para tornar o aplicativo mais atraente. Centralizamos o título e adicionamos algum espaço em branco ao redor do menu suspenso do produto para aumentar a estética do layout. Além disso, desabilitamos a barra de modo do gráfico para simplificar a interface do usuário.

Com essas melhorias, nosso aplicativo agora não apenas fornece poderosos recursos interativos de visualização de dados, mas também tem uma melhor aparência e experiência do usuário. Isso tornará os usuários mais dispostos a usar nossos aplicativos para explorar dados e obter insights valiosos a partir deles.

Implantar no ambiente de produção

Depois de concluir o desenvolvimento de um aplicativo de visualização de dados, geralmente queremos implantar o aplicativo em um ambiente de produção para que outros usuários possam acessá-lo e usá-lo. Nesta seção, discutiremos como implantar nosso aplicativo Dash em um servidor de produção.

Usando Gunicorn e Nginx

Gunicorn é um servidor HTTP Python WSGI (servidor HTTP) que pode lidar com solicitações HTTP de aplicativos da web. Nginx é um servidor HTTP e proxy reverso de alto desempenho, geralmente usado para processamento de arquivos estáticos e balanceamento de carga.

Primeiro, precisamos instalar o Gunicorn e o Nginx:

pip instalar gunicorn
sudo apt-get instalar nginx

A seguir, usamos Gunicorn para executar nosso aplicativo Dash:

gunicorn -w 4 -b 0.0.0.0:8050 seu_app:app

Isso iniciará o servidor Gunicorn localmente e executará o aplicativo Dash na porta 8050. Em seguida, precisamos configurar o Nginx como um proxy reverso para encaminhar solicitações HTTP ao servidor Gunicorn.

Configurar o Nginx

Adicione o seguinte conteúdo ao arquivo de configuração do Nginx:

servidor {
    ouça 80;
    nome_servidor seu_dominio.com;

    localização / {
        proxy_pass http://127.0.0.1:8050;
        proxy_redirect desativado;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $esquema;
    }
}

Substitua your_domain.com pelo seu nome de domínio. Em seguida, recarregue a configuração do Nginx:

sudo systemctl recarregar nginx

Agora, seu aplicativo Dash foi implantado com sucesso no ambiente de produção e pode ser acessado através do seu nome de domínio.

Usar HTTPS

Para melhorar a segurança, também podemos configurar o Nginx para usar o protocolo HTTPS. Você precisa obter um certificado SSL e configurá-lo no Nginx. Uma maneira fácil é usar o Let's Encrypt para obter um certificado SSL gratuito. Aqui está um exemplo de configuração simples:

servidor {
    ouça 80;
    nome_servidor seu_dominio.com;

    localização / {
        retorne 301 https://$host$request_uri;
    }
}

servidor {
    ouça 443 SSL;
    nome_servidor seu_dominio.com;

    ssl_certificate /etc/letsencrypt/live/seu_domínio.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/seu_domínio.com/privkey.pem;

    localização / {
        proxy_pass http://127.0.0.1:8050;
        proxy_redirect desativado;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $esquema;
    }
}

Uma vez configurado desta forma, seu aplicativo Dash será servido pelo protocolo HTTPS e todas as solicitações HTTP serão redirecionadas para HTTPS.

Autenticação de usuário integrada e gerenciamento de direitos

Em alguns casos, você pode querer restringir o acesso a um aplicativo de visualização de dados apenas a usuários ou grupos de usuários específicos. Para conseguir isso, podemos integrar sistemas de autenticação de usuários e gerenciamento de direitos.

Use autenticação básica

Um método simples é usar a autenticação básica. Você pode configurar a autenticação básica no Nginx para exigir que os usuários forneçam um nome de usuário e uma senha antes de acessar o aplicativo. A seguir está um exemplo de configuração do Nginx:

servidor {
    ouça 443 SSL;
    nome_servidor seu_dominio.com;

    ssl_certificate /etc/letsencrypt/live/seu_domínio.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/seu_domínio.com/privkey.pem;

    localização / {
        auth_basic "Acesso Restrito";
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:8050;
        proxy_redirect desativado;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $esquema;
    }
}

Nesta configuração, habilitamos a autenticação básica usando a diretiva auth_basic e especificamos um arquivo de senha /etc/nginx/.htpasswd. Você precisa usar a ferramenta htpasswd para criar este arquivo de senha e adicionar o nome de usuário e a senha a ele.

Usar autenticação OAuth

Outro método comum é usar a autenticação OAuth. Através do OAuth, você pode delegar o processo de autenticação do usuário a provedores de identidade terceirizados, como Google, GitHub, etc. Depois que um usuário for autenticado com sucesso com um provedor de identidade de terceiros, ele poderá acessar seu aplicativo.

Você pode usar a biblioteca dash-auth do Dash para implementar a autenticação OAuth. Esta biblioteca fornece uma maneira fácil de integrar vários provedores OAuth e restringir o acesso a aplicações Dash.

Adicionar gerenciamento de permissões

Além da autenticação, você também pode autorizar os usuários a determinar se eles têm acesso a dados ou funcionalidades específicas. Uma abordagem comum é implementar um sistema de controle de acesso baseado em função (RBAC) no aplicativo. Com o RBAC, você pode atribuir usuários a diferentes funções e restringir o acesso a diferentes funções em seu aplicativo.

Você pode implementar um sistema RBAC em seu aplicativo Dash para determinar se um usuário tem permissão para realizar determinadas ações com base em sua função. Isso pode envolver a verificação da função de um usuário quando ele faz login e o ajuste dinâmico da funcionalidade e do acesso aos dados no aplicativo com base na função.

Registro e tratamento de erros

O registro e o tratamento de erros são muito importantes ao implantar aplicativos em ambientes de produção. Um bom registro pode ajudá-lo a rastrear a operação do seu aplicativo e detectar e resolver problemas em tempo hábil. O tratamento de erros pode melhorar a estabilidade do aplicativo e reduzir interrupções de serviço causadas por erros.

Configurar o registro em log

Primeiro, vamos configurar o log para nosso aplicativo. Os aplicativos Dash geralmente geram logs para stdout ou stderr. Podemos registrar esses logs redirecionando-os para um arquivo. Também podemos usar o módulo de registro do Python para implementar registros mais avançados.

registro de importação

logging.basicConfig(filename='app.log', nível=logging.INFO)

Adicionar o código acima ao aplicativo Dash registrará o log em um arquivo chamado app.log e definirá o nível de log como INFO. Você pode ajustar o nível de log conforme necessário para registrar diferentes níveis de informações.

Manipulação de erros

Outro aspecto importante é o tratamento de erros. Quando ocorrem erros no aplicativo, queremos ser capazes de capturar e registrar esses erros e, ao mesmo tempo, fornecer mensagens de erro fáceis de usar.

Em um aplicativo Dash, você pode usar blocos try-except para capturar exceções e retornar uma página de erro ou exibir uma mensagem de erro amigável quando ocorrer uma exceção.

@app.server.errorhandler(Exceção)
def handle_error(e):
    logging.error(f'Ocorreu um erro: {str(e)}')
    return html.H1("Ops! Algo deu errado."), 500

No código acima, definimos uma função de tratamento de erros handle_error, que captura todas as exceções. Quando ocorre uma exceção, ele registrará a mensagem de erro e retornará uma página contendo a mensagem de erro ao usuário.

Por meio de um bom registro e tratamento de erros, podemos compreender melhor a operação do aplicativo e tomar as medidas apropriadas quando ocorrerem erros para garantir a estabilidade e confiabilidade do aplicativo.

Monitoramento e otimização de desempenho

Finalmente, uma vez que o aplicativo é implantado em um ambiente de produção, também precisamos monitorar regularmente o desempenho do aplicativo e tomar medidas para otimizar o desempenho. Isso inclui monitorar o tempo de resposta do aplicativo, uso de memória, carga da CPU e outros indicadores, além de otimizar com base nos resultados do monitoramento.

Você pode usar ferramentas de monitoramento como Prometheus, Grafana, etc. para monitorar indicadores de desempenho de aplicativos e fazer ajustes e otimizações com base nos resultados do monitoramento.

Resumir

Este artigo detalha as principais etapas e medidas necessárias para implantar aplicações Dash em um ambiente de produção. Primeiro, discutimos como implantar aplicativos Dash usando Gunicorn e Nginx e mostramos como melhorar a segurança dos aplicativos por meio do protocolo HTTPS. A seguir, exploramos como integrar sistemas de autenticação de usuário e gerenciamento de direitos e como configurar o registro em log e o tratamento de erros para melhorar a estabilidade e a confiabilidade do aplicativo. Por fim, enfatizamos a importância do monitoramento e da otimização do desempenho e propomos algumas ferramentas de monitoramento e métodos de otimização. Através dessas medidas, podemos implantar o aplicativo Dash no ambiente de produção, torná-lo mais robusto e confiável no ambiente de produção e fornecer aos usuários serviços e experiência de alta qualidade.

Clique para seguir e conhecer as novas tecnologias da Huawei Cloud o mais rápido possível~