Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Streamlit et Plotly : visualisation interactive des données simplifiée

Olaf Källström
Name
Olaf Källström

Updated on

Dans le domaine de la science des données, la visualisation joue un rôle crucial dans la compréhension de jeux de données complexes et l'extraction d'informations significatives. Deux outils puissants qui ont révolutionné ce domaine sont Streamlit et Plotly. Cet article vise à fournir un guide complet sur l'utilisation de ces outils ensemble pour créer des visualisations et des tableaux de bord interactifs. Que vous soyez débutant ou développeur expérimenté, vous trouverez tout ce dont vous avez besoin pour commencer avec Streamlit et Plotly.

Introduction à Streamlit et Plotly

Streamlit est un framework Python open-source qui permet aux développeurs de créer facilement des applications web interactives. Il est conçu pour aider les scientifiques des données et les ingénieurs en apprentissage automatique à transformer des scripts de données en applications web partageables en seulement quelques lignes de code. La simplicité et la flexibilité de Streamlit en ont fait un choix populaire parmi les professionnels des données.

Plotly, quant à lui, est une bibliothèque polyvalente qui permet la création de graphiques beaux et interactifs. Elle prend en charge plus de 40 types de graphiques uniques couvrant un large éventail de cas d'utilisation statistiques, financiers, géographiques, scientifiques et en 3D. L'interactivité de Plotly permet aux utilisateurs de zoomer, de parcourir, de survoler et d'approfondir les visualisations, rendant l'exploration des données intuitive et informative.

Lorsqu'ils sont utilisés ensemble, Streamlit et Plotly forment une combinaison puissante, permettant aux développeurs de créer des tableaux de bord interactifs avec des visualisations complexes, avec une relative facilité.

Alternative à l'utilisation de Plotly dans Streamlit : Utilisez PyGWalker :

Bien que Plotly soit un outil puissant, ce n'est pas la seule option disponible pour la visualisation des données en Python. PyGWalker (opens in a new tab) est également un autre outil impressionnant qui fonctionne merveilleusement bien comme alternative à Streamlit AgGrid.

Démonstration en ligne de PyGWalker + Streamlit (opens in a new tab)

PyGWalker (opens in a new tab) est une bibliothèque Python qui vous permet d'intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit sans effort.

Découvrez cette vidéo incroyable réalisée par Cómo explorar datos con PyGWalker en Python (opens in a new tab) qui montre les étapes détaillées pour renforcer votre application Streamlit avec cette puissante bibliothèque de visualisation des données en Python !


Un grand merci à Sven et sa formidable contribution (opens in a new tab) à la communauté de PyGWalker !

De plus, vous pouvez également consulter ces ressources :

Visualisez les données dans Streamlit avec PyGWalker (opens in a new tab)

Création de visualisations interactives avec Streamlit et Plotly

La création de visualisations interactives à l'aide de Streamlit et Plotly est un processus simple. La première étape consiste à importer les bibliothèques nécessaires dans votre script Python. Voici un exemple :

import streamlit as st
import plotly.express as px

Ensuite, vous pouvez créer une figure Plotly et l'afficher dans votre application Streamlit. Par exemple, créons un simple diagramme à barres à l'aide de Plotly et affichons-le dans Streamlit :

## Créer un dataframe exemple
df = pd.DataFrame({
   'Fruit': ['Pommes', 'Oranges', 'Bananes', 'Pommes', 'Oranges', 'Bananes'],
   'Quantité': [4, 1, 2, 2, 4, 5],
   'Ville': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})
 
## Créer un diagramme à barres à l'aide de Plotly
fig = px.bar(df, x='Fruit', y='Quantité', color='Ville', barmode='group')
 
## Afficher la figure dans Streamlit
st.plotly_chart(fig)

Dans cet exemple, px.bar est utilisé pour créer un diagramme à barres, et st.plotly_chart est utilisé pour afficher le diagramme dans l'application Streamlit. Le résultat est un diagramme à barres interactif sur lequel les utilisateurs peuvent survoler pour voir les valeurs des données, zoomer et dézoomer, et même le télécharger sous forme d'image statique.

Techniques avancées avec Streamlit et Plotly

Si la création de visualisations interactives de base avec Streamlit et Plotly est simple, ces outils offrent également des fonctionnalités avancées permettant de créer des visualisations plus complexes et personnalisées.

L'une de ces fonctionnalités est la possibilité de mettre à jour les figures Plotly dans Streamlit. Cela peut être fait en utilisant les méthodes update_layout et update_traces dans Plotly. Par exemple, vous pouvez mettre à jour la mise en page d'une figure pour changer son titre, ses étiquettes d'axe, etc. :

fig.update_layout(
    title='Nouveau titre',
    xaxis_title='Nouveau titre de l'axe X',
    yaxis_title='Nouveau titre de l'axe Y',
)

De même, vous pouvez mettre à jour les traces d'une figure pour modifier les propriétés des données tracées, comme la couleur des marqueurs :

fig.update_traces(marker_color='rgb(158,202,225)')

Une autre fonctionnalité avancée est la possibilité de résoudre les problèmes de dimensionnement des graphiques Plotly dans Streamlit. Parfois, un graphique Plotly peut ne pas s'adapter correctement à la mise en page d'une application Streamlit, ce qui peut entraîner des coupures ou des chevauchements avec d'autres éléments. Ceci peut être résolu en ajustant les paramètres height et width de la fonction st.plotly_chart :

st.plotly_chart(fig, use_container_width=True)

Dans cet exemple, use_container_width=True permet au graphique de prendre toute la largeur de la colonne principale de l'application Streamlit, garantissant ainsi qu'il s'intègre bien dans la mise en page.

Construction d'un tableau de bord Streamlit Plotly

La création d'un tableau de bord avec Streamlit et Plotly consiste à combiner plusieurs visualisations interactives et contrôles en une seule application. Les contrôles, tels que les curseurs, les cases à cocher et les boîtes de sélection, permettent aux utilisateurs d'interagir avec les visualisations et de les mettre à jour en temps réel.

Voici un exemple simple d'un tableau de bord Streamlit Plotly :

import streamlit as st
import plotly.express as px
import pandas as pd
 
## Charger les données
df = pd.read_csv('data.csv')
 
## Ajouter une boîte de sélection pour choisir le type de graphique
chart_type = st.selectbox('Choisissez un type de graphique', ['Bar', 'Line'])
 
## Créer le graphique
if chart_type == 'Bar':
    fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group')
elif chart_type == 'Line':
    fig = px.line(df, x='Fruit', y='Amount', color='City')
 
## Afficher le graphique
st.plotly_chart(fig, use_container_width=True)

Dans cet exemple, une boîte de sélection est ajoutée à l'application Streamlit en utilisant st.selectbox. La valeur sélectionnée est utilisée pour déterminer le type de graphique à créer avec Plotly. Le graphique est ensuite affiché dans l'application en utilisant st.plotly_chart.

La création d'un tableau de bord Streamlit Plotly peut être aussi simple ou complexe que nécessaire, en fonction des exigences de votre projet de visualisation de données. Avec la souplesse et la puissance de Streamlit et Plotly, les possibilités sont infinies.

Conclusion : La puissance de Streamlit et Plotly pour la visualisation de données

Streamlit et Plotly forment ensemble une combinaison puissante pour créer des visualisations de données interactives et des tableaux de bord. La simplicité et la flexibilité de Streamlit en font un excellent outil pour la création d'applications web, tandis que la gamme étendue de types de graphiques et de fonctionnalités d'interactivité de Plotly en font un outil polyvalent pour la visualisation de données.

L'intégration de Streamlit et Plotly ouvre un monde de possibilités pour les data scientists et les développeurs. De la création de simples graphiques à barres à la construction de tableaux de bord complexes avec plusieurs visualisations interactives, ces outils fournissent les capacités nécessaires pour transformer les données en informations.

Alors que les données continuent de jouer un rôle de plus en plus important dans notre monde, des outils tels que Streamlit et Plotly continueront à évoluer et à s'améliorer. En restant à jour avec ces outils et en apprenant à les utiliser efficacement, vous pouvez améliorer vos compétences en visualisation de données et créer des visualisations plus impactantes et instructives.

Avez-vous entendu parler de cet outil impressionnant d'analyse de données & de visualisation de données, qui transforme votre application Streamlit en Tableau ?

PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit, sans effort.

PyGWalker pour la visualisation de données dans Streamlit (opens in a new tab)

FAQ

1. Comment afficher un graphique Plotly interactif dans Streamlit ?

Vous pouvez afficher un graphique Plotly interactif dans Streamlit en utilisant la fonction st.plotly_chart. Tout d'abord, créez une figure Plotly, puis transmettez-la à st.plotly_chart pour l'afficher dans votre application Streamlit. Le résultat est un graphique interactif que les utilisateurs peuvent survoler, zoomer et même télécharger sous forme d'image statique.

2. Comment mettre à jour une figure Plotly dans Streamlit ?

Vous pouvez mettre à jour une figure Plotly dans Streamlit en utilisant les méthodes update_layout et update_traces de Plotly. La méthode 'update_layout' vous permet de modifier la mise en page de la figure, telle que le titre et les étiquettes des axes. La méthode update_traces vous permet de changer les propriétés des données tracées, telles que la couleur des marqueurs.

3. Comment éviter les problèmes de dimensionnement avec les graphiques Plotly dans Streamlit ?

Vous pouvez éviter les problèmes de dimensionnement avec les graphiques Plotly dans Streamlit en ajustant les paramètres height et width de la fonction st.plotly_chart. Par exemple, en définissant use_container_width=True, le graphique prendra toute la largeur de la colonne principale de l'application Streamlit, garantissant ainsi qu'il s'intègre bien dans la mise en page.