Comment utiliser Plotly et Dash pour la visualisation de données

Wuhan Yuan Chuanghui revient, parlons de grands modèles le 20 avril »

Cet article est partagé par la communauté Huawei Cloud « Des données au déploiement en utilisant Plotly et Dash pour réaliser la visualisation des données et le déploiement de l'environnement de production » par Lemony Hug.

La visualisation des données est un élément essentiel de l'analyse des données, qui peut nous aider à comprendre les données de manière plus intuitive et à découvrir des modèles et des tendances cachés. Il existe de nombreux outils puissants pour la visualisation de données en Python, Plotly et Dash étant deux choix populaires. Plotly fournit une variété de fonctions de dessin interactives, tandis que Dash est un framework Python permettant de créer des applications Web interactives. Cet article présentera comment utiliser Plotly et Dash pour la visualisation de données et démontrera son application via un code de cas.

Installer Plotly et Dash

Tout d’abord, nous devons installer les bibliothèques Plotly et Dash. Vous pouvez les installer en utilisant pip avec la commande suivante :

pip installer plotly dash

Une fois l'installation terminée, nous pouvons commencer à utiliser ces deux bibliothèques.

Code de cas : application simple de visualisation de données

Commençons par un exemple simple, disons que nous avons des fichiers CSV de données de ventes et que nous souhaitons créer un graphique interactif pour visualiser ces données et les déployer en tant qu'application Web. Tout d’abord, nous devons importer les bibliothèques nécessaires :

importer un tiret
à partir du tableau de bord, importer dcc, html
importer plotly.express en tant que px
importer des pandas en tant que PD

#Lire les données
df = pd.read_csv('sales_data.csv')

#Créer une application Dash
app = dash.Dash(__nom__)

# mise en page
app.layout = html.Div([
    html.H1("Visualisation des données de vente"),
    dcc.Graph(
        id='graphique-ventes'
    )
])

# Rappeler
@app.callback(
    dash.dependencies.Output('sales-graph', 'figure'),
    [dash.dependencies.Input('sales-graph', 'value')]
)
def update_graph (année_sélectionnée) :
    filtered_df = df[df['Année'] == année_sélectionnée]
    fig = px.bar(filtered_df, x='Mois', y='Ventes', title=f'Sales data-{selected_year}')
    retour figue

# Démarrer l'application
si __name__ == '__main__' :
    app.run_server(debug=True)

Dans cet exemple, nous lisons d'abord un fichier CSV nommé sales_data.csv, puis créons une application Dash. Dans la mise en page de l'application, nous définissons un titre et une zone graphique vide. Nous avons ensuite mis en place une fonction de rappel afin que lorsque l'utilisateur sélectionne une année différente, le graphique soit mis à jour pour afficher les données de ventes de cette année. Enfin, nous démarrons l'application en appelant la méthode run_server.

Assurez-vous que votre fichier sales_data.csv contient les champs de données nécessaires (tels que Année, Mois et Ventes) pour que le code puisse s'exécuter correctement.

Code de cas : visualisation et interaction avancées des données

Dans le cas précédent, nous avons montré comment créer une application simple de visualisation de données à l'aide de Dash et Plotly. Explorons maintenant plus en détail certaines fonctionnalités avancées telles que l'ajout de plus d'interactivité et de personnalisation.

Supposons que nous souhaitions afficher les tendances des données de ventes et permettre aux utilisateurs de voir différentes tendances en sélectionnant différentes catégories de produits. Nous pouvons réaliser cette fonction grâce au code suivant :

importer un tiret
à partir du tableau de bord, importer dcc, html
importer plotly.express en tant que px
importer des pandas en tant que PD

#Lire les données
df = pd.read_csv('sales_data.csv')

#Créer une application Dash
app = dash.Dash(__nom__)

# mise en page
app.layout = html.Div([
    html.H1("Tendance des données de ventes"),
    dcc.Dropdown(
        id='liste-produit',
        options=[
            {'label' : 'Produit A', 'value' : 'Produit A'},
            {'label' : 'Produit B', 'value' : 'Produit B'},
            {'label' : 'Produit C', 'value' : 'Produit C'}
        ],
        valeur='Produit A'
    ),
    dcc.Graph(
        id='tendance des ventes'
    )
])

# Rappeler
@app.callback(
    dash.dependencies.Output('tendance des ventes', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend (produit_sélectionné) :
    filtered_df = df[df['Produit'] == produit_sélectionné]
    fig = px.line(filtered_df, x='Mois', y='Ventes', title=f'{selected_product}Tendance des ventes')
    retour figue

# Démarrer l'application
si __name__ == '__main__' :
    app.run_server(debug=True)

Dans cet exemple, nous avons ajouté un menu déroulant qui permet à l'utilisateur de sélectionner différentes catégories de produits. Au fur et à mesure que l'utilisateur sélectionne un produit différent, le graphique sera mis à jour pour afficher les tendances des ventes pour le produit sélectionné. Cela donne aux utilisateurs plus de flexibilité pour explorer les ventes de différents produits.

En plus des graphiques linéaires simples, Plotly fournit également une multitude de types de graphiques et d'options de personnalisation pour répondre à des besoins de visualisation plus complexes. Dash nous permet de créer des applications Web interactives et de mettre à jour dynamiquement des graphiques via des fonctions de rappel pour offrir aux utilisateurs une meilleure expérience.

Ajoutez de l'interactivité et du style

Dans le cas ci-dessus, nous avons montré comment utiliser Dash et Plotly pour créer une application de visualisation de données et fournir des fonctions interactives de base. Maintenant, ajoutons un peu plus d'interactivité et de style pour rendre notre application plus attrayante et plus facile à utiliser.

importer un tiret
à partir du tableau de bord, importer dcc, html, callback_context
importer plotly.express en tant que px
importer des pandas en tant que PD

#Lire les données
df = pd.read_csv('sales_data.csv')

# Obtenez une liste de produits unique
available_products = df['Produit'].unique()

#Créer une application Dash
app = dash.Dash(__nom__)

#Appliquer le style
app.layout = html.Div([
    html.H1("Tendance des données de ventes", style={'textAlign': 'center'}),
    html.Div([
        html.Label("Sélectionner le produit :"),
        dcc.Dropdown(
            id='liste-produit',
            options=[{'label' : produit, 'value' : produit} pour le produit dans available_products],
            valeur=produits_disponibles[0]
        )
    ], style={'width' : '50%', 'margin' : 'auto', 'textAlign' : 'center'}),
    dcc.Graph(
        id='tendance des ventes',
        config={'displayModeBar': False} # Désactive la barre de mode du graphique
    )
], style={'padding': '20px'})

# Rappeler
@app.callback(
    dash.dependencies.Output('tendance des ventes', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend (produit_sélectionné) :
    filtered_df = df[df['Produit'] == produit_sélectionné]
    fig = px.line(filtered_df, x='Mois', y='Ventes', title=f'{selected_product}Tendance des ventes')
    retour figue

# Démarrer l'application
si __name__ == '__main__' :
    app.run_server(debug=True)

Dans cet exemple, nous avons ajouté du style pour rendre l'application plus attrayante. Nous avons centré le titre et ajouté un espace blanc autour de la liste déroulante des produits pour ajouter à l'esthétique de la mise en page. De plus, nous avons désactivé la barre de mode du graphique pour simplifier l'interface utilisateur.

Grâce à ces améliorations, notre application offre désormais non seulement de puissantes capacités interactives de visualisation de données, mais offre également une meilleure apparence et une meilleure expérience utilisateur. Cela incitera les utilisateurs à utiliser davantage nos applications pour explorer les données et en tirer des informations précieuses.

Déployer dans un environnement de production

Après avoir terminé le développement d'une application de visualisation de données, nous souhaitons généralement déployer l'application dans un environnement de production afin que d'autres utilisateurs puissent y accéder et l'utiliser. Dans cette section, nous verrons comment déployer notre application Dash sur un serveur de production.

Utiliser Gunicorn et Nginx

Gunicorn est un serveur HTTP Python WSGI (serveur HTTP) qui peut gérer les requêtes HTTP des applications Web. Nginx est un serveur HTTP et proxy inverse hautes performances, généralement utilisé pour le traitement des fichiers statiques et l'équilibrage de charge.

Tout d’abord, nous devons installer Gunicorn et Nginx :

pip installer gunicorn
sudo apt-get install nginx

Ensuite, nous utilisons Gunicorn pour exécuter notre application Dash :

gunicorn -w 4 -b 0.0.0.0:8050 votre_application:application

Cela démarrera le serveur Gunicorn localement et exécutera l'application Dash sur le port 8050. Ensuite, nous devons configurer Nginx comme proxy inverse pour transmettre les requêtes HTTP au serveur Gunicorn.

Configurer Nginx

Ajoutez le contenu suivant au fichier de configuration de Nginx :

serveur {
    écoutez 80 ;
    nom_serveur votre_domaine.com ;

    emplacement / {
        proxy_pass http://127.0.0.1:8050 ;
        proxy_redirect désactivé ;
        proxy_set_header Hôte $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 $scheme;
    }
}

Remplacez votre_domaine.com par votre nom de domaine. Rechargez ensuite la configuration Nginx :

sudo systemctl recharger nginx

Désormais, votre application Dash a été déployée avec succès dans l'environnement de production et est accessible via votre nom de domaine.

Utiliser HTTPS

Pour améliorer la sécurité, nous pouvons également configurer Nginx pour utiliser le protocole HTTPS. Vous devez obtenir un certificat SSL et le configurer dans Nginx. Un moyen simple consiste à utiliser Let's Encrypt pour obtenir un certificat SSL gratuit. Voici un exemple de configuration simple :

serveur {
    écoutez 80 ;
    nom_serveur votre_domaine.com ;

    emplacement / {
        renvoie 301 https://$host$request_uri ;
    }
}

serveur {
    écoutez 443 SSL ;
    nom_serveur votre_domaine.com ;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem ;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem ;

    emplacement / {
        proxy_pass http://127.0.0.1:8050 ;
        proxy_redirect désactivé ;
        proxy_set_header Hôte $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 $scheme;
    }
}

Une fois configurée de cette façon, votre application Dash sera servie via le protocole HTTPS et toutes les requêtes HTTP seront redirigées vers HTTPS.

Authentification des utilisateurs et gestion des droits intégrées

Dans certains cas, vous souhaiterez peut-être restreindre l'accès à une application de visualisation de données à des utilisateurs ou groupes d'utilisateurs spécifiques uniquement. Pour y parvenir, nous pouvons intégrer des systèmes d’authentification des utilisateurs et de gestion des droits.

Utiliser l'authentification de base

Une méthode simple consiste à utiliser l’authentification de base. Vous pouvez configurer l'authentification de base dans Nginx pour obliger les utilisateurs à fournir un nom d'utilisateur et un mot de passe avant d'accéder à l'application. Voici un exemple de configuration Nginx :

serveur {
    écoutez 443 SSL ;
    nom_serveur votre_domaine.com ;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem ;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem ;

    emplacement / {
        auth_basic "Accès restreint" ;
        auth_basic_user_file /etc/nginx/.htpasswd ;

        proxy_pass http://127.0.0.1:8050 ;
        proxy_redirect désactivé ;
        proxy_set_header Hôte $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 $scheme;
    }
}

Dans cette configuration, nous activons l'authentification de base à l'aide de la directive auth_basic et spécifions un fichier de mots de passe /etc/nginx/.htpasswd. Vous devez utiliser l'outil htpasswd pour créer ce fichier de mot de passe et y ajouter le nom d'utilisateur et le mot de passe.

Utiliser l'authentification OAuth

Une autre méthode courante consiste à utiliser l'authentification OAuth. Grâce à OAuth, vous pouvez déléguer le processus d'authentification de l'utilisateur à des fournisseurs d'identité tiers, tels que Google, GitHub, etc. Une fois qu'un utilisateur s'est authentifié avec succès auprès d'un fournisseur d'identité tiers, il peut accéder à votre application.

Vous pouvez utiliser la bibliothèque dash-auth de Dash pour implémenter l'authentification OAuth. Cette bibliothèque offre un moyen simple d'intégrer plusieurs fournisseurs OAuth et de restreindre l'accès aux applications Dash.

Ajouter la gestion des autorisations

En plus de l'authentification, vous souhaiterez peut-être également autoriser les utilisateurs à déterminer s'ils ont accès à des données ou à des fonctionnalités spécifiques. Une approche courante consiste à implémenter un système de contrôle d’accès basé sur les rôles (RBAC) dans l’application. Avec RBAC, vous pouvez attribuer des utilisateurs à différents rôles et restreindre l'accès à différents rôles dans votre application.

Vous pouvez implémenter un système RBAC dans votre application Dash pour déterminer si un utilisateur est autorisé à effectuer certaines actions en fonction de son rôle. Cela peut impliquer de vérifier le rôle d'un utilisateur lorsqu'il se connecte et d'ajuster dynamiquement les fonctionnalités et l'accès aux données dans l'application en fonction du rôle.

Journalisation et gestion des erreurs

La journalisation et la gestion des erreurs sont très importantes lors du déploiement d'applications dans des environnements de production. Une bonne journalisation peut vous aider à suivre le fonctionnement de votre application et à détecter et résoudre les problèmes en temps opportun. La gestion des erreurs peut améliorer la stabilité des applications et réduire les interruptions de service causées par des erreurs.

Configurer la journalisation

Tout d’abord, configurons la journalisation pour notre application. Les applications Dash génèrent généralement des journaux sur stdout ou stderr. Nous pouvons enregistrer ces journaux en les redirigeant vers un fichier. Nous pouvons également utiliser le module de journalisation de Python pour implémenter une journalisation plus avancée.

journalisation des importations

logging.basicConfig(filename='app.log', level=logging.INFO)

L'ajout du code ci-dessus à l'application Dash enregistrera le journal dans un fichier nommé app.log et définira le niveau de journalisation sur INFO. Vous pouvez ajuster le niveau de journalisation selon vos besoins pour enregistrer différents niveaux d'informations.

La gestion des erreurs

Un autre aspect important est la gestion des erreurs. Lorsque des erreurs se produisent dans l'application, nous souhaitons pouvoir capturer et enregistrer ces erreurs tout en fournissant des messages d'erreur conviviaux.

Dans une application Dash, vous pouvez utiliser des blocs try-sauf pour intercepter les exceptions et renvoyer une page d'erreur ou afficher un message d'erreur convivial lorsqu'une exception se produit.

@app.server.errorhandler (Exception)
def handle_error(e):
    logging.error(f'Une erreur s'est produite : {str(e)}')
    return html.H1("Oups ! Quelque chose s'est mal passé."), 500

Dans le code ci-dessus, nous définissons une fonction de gestion des erreurs handle_error, qui intercepte toutes les exceptions. Lorsqu'une exception se produit, il enregistre le message d'erreur et renvoie une page contenant le message d'erreur à l'utilisateur.

Grâce à une bonne journalisation et à une bonne gestion des erreurs, nous pouvons mieux comprendre le fonctionnement de l'application et prendre les mesures appropriées lorsque des erreurs se produisent pour garantir la stabilité et la fiabilité de l'application.

Surveillance et optimisation des performances

Enfin, une fois l'application déployée dans un environnement de production, nous devons également surveiller régulièrement les performances de l'application et prendre des mesures pour optimiser les performances. Cela inclut la surveillance du temps de réponse de l'application, de l'utilisation de la mémoire, de la charge du processeur et d'autres indicateurs, ainsi que l'optimisation en fonction des résultats de la surveillance.

Vous pouvez utiliser des outils de surveillance tels que Prometheus, Grafana, etc. pour surveiller les indicateurs de performances des applications et effectuer des ajustements et des optimisations en fonction des résultats de la surveillance.

Résumer

Cet article détaille les étapes clés et les mesures nécessaires pour déployer des applications Dash dans un environnement de production. Tout d'abord, nous avons expliqué comment déployer des applications Dash à l'aide de Gunicorn et Nginx, et montré comment améliorer la sécurité des applications via le protocole HTTPS. Nous avons ensuite exploré comment intégrer les systèmes d'authentification des utilisateurs et de gestion des droits, ainsi que comment configurer la journalisation et la gestion des erreurs pour améliorer la stabilité et la fiabilité des applications. Enfin, nous soulignons l’importance de la surveillance et de l’optimisation des performances et proposons quelques outils de surveillance et méthodes d’optimisation. Grâce à ces mesures, nous pouvons déployer l'application Dash dans l'environnement de production, la rendre plus robuste et plus fiable dans l'environnement de production et fournir aux utilisateurs des services et une expérience de haute qualité.

Cliquez pour suivre et découvrir les nouvelles technologies de Huawei Cloud dès que possible~