Prérequis

Avant de plonger dans cette leçon, vous devriez être familier avec :

• La création de visualisations avec Matplotlib et Seaborn
• L'exécution d'un script Python depuis le terminal

Objectifs pédagogiques

À la fin de cette leçon, vous serez capable de :

• Créer des applications web interactives avec Streamlit
• Visualiser des données en utilisant les composants Streamlit

Streamlit est une bibliothèque Python open-source qui vous permet de créer rapidement et facilement de belles applications web et tableaux de bord interactifs avec un minimum de code. Avec Streamlit, vous pouvez construire des applications web en utilisant des bibliothèques Python familières comme pandas, Matplotlib, Seaborn sans avoir besoin de compétences avancées en développement web.

Dans cette leçon, vous apprendrez à construire un tableau de bord interactif à partir de zéro en utilisant Streamlit. Ce tableau de bord permettra aux utilisateurs d'explorer et de visualiser dynamiquement les données de ventes dans une application web interactive. Vous découvrirez comment :

• Visualiser efficacement les données en utilisant différents types de graphiques.
• Créer des filtres interactifs pour permettre aux utilisateurs d'explorer des sous-ensembles spécifiques de données.
• Afficher des métriques clés qui se mettent à jour dynamiquement en fonction des interactions des utilisateurs.

À la fin de cette leçon, vous aurez un tableau de bord interactif entièrement fonctionnel qui fournit un moyen convivial de communiquer des insights sur les données et d'interagir avec votre audience en temps réel.

Avant de plonger dans le code, il est essentiel de configurer correctement notre environnement. Nous commencerons par organiser nos fichiers de projet et mettre en place un espace de travail rationalisé en utilisant Anaconda Navigator et JupyterLab. Cela nous permettra de créer, gérer et exécuter facilement notre application Streamlit dans une interface familière.

Suivez ces étapes pour commencer à construire un tableau de bord Streamlit interactif :

1. Ouvrir Anaconda Navigator :

• Lancez Anaconda Navigator sur votre ordinateur.

2. Sélectionner l'environnement de base :

• Dans Anaconda Navigator, allez dans l'onglet "Environments" et sélectionnez l'environnement base où Streamlit est déjà installé. Cela évite d'avoir à installer Streamlit séparément.

3. Lancer JupyterLab :

• Dans l'onglet "Home", trouvez JupyterLab et cliquez sur "Launch".

4. Naviguer vers votre dossier existant :

• Dans JupyterLab, utilisez l'explorateur de fichiers sur le côté gauche pour naviguer vers le dossier Dashboard_Streamlit, qui contient votre sous-dossier exercise.

5. Configurer les fichiers dans le dossier exercise :

• Ouvrir le dossier exercise :
  • Double-cliquez sur le dossier exercise dans l'explorateur de fichiers pour l'ouvrir.
• Créer le script principal :
  • Cliquez sur l'icône "+" dans le coin supérieur gauche pour ouvrir un nouveau lanceur.
  • Sous la section "Notebook", cliquez sur "Text File". Un nouveau fichier texte sans titre s'ouvrira.
  • Renommez ce fichier en interactive_data_explorer.py en faisant un clic droit sur le nom du fichier dans l'explorateur de fichiers et en sélectionnant "Rename".
• Ajouter le fichier CSV :
  • Assurez-vous que le fichier complete_data_with_time_features.csv est déjà dans le dossier exercise. Si non, faites glisser et déposez le fichier dans le dossier exercise depuis votre système local ou utilisez l'option de téléchargement de fichier (clic droit dans l'explorateur de fichiers et choisissez "Upload Files...").

6. Ouvrir un terminal dans le dossier exercise :

• Cliquez sur l'icône "+" dans le coin supérieur gauche pour ouvrir un nouveau lanceur.
• Cliquez sur "Terminal". Cela ouvrira une fenêtre de terminal directement dans le dossier exercise.

7. Exécuter votre application Streamlit :

• Dans la fenêtre du terminal, tapez la commande suivante pour démarrer votre application Streamlit :

  bash

  streamlit run interactive_data_explorer.py
  
  

Si vous voyez une sortie dans le terminal similaire à l'image ci-dessus, vous avez démarré avec succès l'application Streamlit localement.

L'application devrait s'ouvrir automatiquement dans votre navigateur web par défaut. Si ce n'est pas le cas, copiez et collez simplement l'URL Locale (affichée dans le terminal) dans la barre d'adresse de votre navigateur. Vous serez accueilli par un canevas Streamlit vide, prêt pour votre code.

Maintenant que l'environnement est configuré, nous allons commencer à construire le tableau de bord interactif étape par étape. Ce processus implique d'ajouter du code au script Python interactive_data_explorer.py que vous avez créé précédemment dans le dossier exercise.

Nous commencerons par configurer la mise en page de base. Cela inclut de donner un titre à votre application, de sélectionner une icône de page et de choisir un style de mise en page approprié.

Ouvrez le script interactive_data_explorer.py dans JupyterLab. Ensuite, ajoutez le code suivant pour configurer la mise en page :

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

# Set up the basic page configuration
st.set_page_config(
    page_title="Sales Data Dashboard",
    page_icon="📊",  # You can use any emoji or path to an icon file
    layout="wide"     # Use the 'wide' layout to make full use of the screen space
)

# Add a title and description for the dashboard
st.title("Sales Data Dashboard")
st.markdown("An interactive dashboard to explore and visualize sales data dynamically.")

Ce que fait ce code :

• import streamlit as st : Importe la bibliothèque Streamlit et lui attribue l'alias "st"
• st.set_page_config() : Configure l'apparence de base de l'application Streamlit, y compris le titre de la page, l'icône et la mise en page
• st.title() et st.markdown() : Affichent un titre et une description en haut du tableau de bord, fournissant un contexte aux utilisateurs

Après avoir ajouté ce code au script Python, sauvegardez le fichier dans JupyterLab pour vous assurer que les changements sont enregistrés. Votre application Streamlit devrait automatiquement se recharger avec le nouveau titre et la description. Si elle ne se recharge pas, vous pouvez cliquer sur les trois points puis cliquer sur Rerun comme montré dans la figure ci-dessous.

Maintenant que nous avons configuré la mise en page de base pour l'application Streamlit, l'étape suivante consiste à charger les données de ventes et à les afficher pour une exploration initiale. Cela permettra aux utilisateurs de voir directement les données dans l'application. Nous ajoutons à interactive_data_explorer.py le code suivant :

# Load the sales data
data = pd.read_csv('complete_data_with_time_features.csv')

# Convert the 'date' column to a datetime format
data['date'] = pd.to_datetime(data['date'])

# Display the dataset
st.header("Sales Data Overview")
st.dataframe(data)

Ce que fait ce code :

• st.header() : Ajoute un en-tête intitulé "Sales Data Overview" à l'application Streamlit. Ceci est utilisé pour introduire la section où le jeu de données sera affiché, fournissant un titre clair qui aide les utilisateurs à comprendre ce qu'ils regardent.
• st.dataframe() : Affiche le jeu de données chargé dans un format de tableau interactif. Les utilisateurs peuvent trier les colonnes en cliquant dessus et faire défiler les données. Cela rend les données plus accessibles et faciles à explorer.

Sauvegardez le fichier dans JupyterLab pour vous assurer que vos modifications sont préservées, puis visualisez les mises à jour dans l'application Streamlit.

Ajout de case à cocher et d'expanseur

Lorsqu'on traite de grands jeux de données, il est important de considérer l'expérience utilisateur et d'éviter de surcharger l'interface. Nous pouvons améliorer notre application en utilisant les widgets interactifs de Streamlit pour contrôler l'affichage des données. Modifions notre code pour inclure une case à cocher et un expanseur :

# Load the sales data
data = pd.read_csv('complete_data_with_time_features.csv')

# Convert the 'date' column to a datetime format
data['date'] = pd.to_datetime(data['date'])

# Display the dataset
st.header("Sales Data Overview")

# Add a checkbox to toggle data visibility
if st.checkbox("Show raw data"): # if checked returns True
    # Use an expander to contain the dataframe
    with st.expander("Expand to see raw data"):
        st.dataframe(data)

Ce que fait ce code :

• st.checkbox() : Crée une case à cocher étiquetée "Show raw data". Cela permet aux utilisateurs de choisir s'ils veulent voir les données brutes ou non.
• st.expander() : Crée une section extensible intitulée "Expand to see raw data". Cela contient le dataframe et garde l'interface propre par défaut.

Pour rendre le tableau de bord plus dynamique, nous allons ajouter des filtres interactifs qui permettent aux utilisateurs de sélectionner une plage de dates ou de se concentrer sur des données de ventes spécifiques. Cela permet aux utilisateurs d'explorer les données selon leurs besoins. Nous ajoutons le code suivant pour créer des filtres interactifs :

# Sidebar filters for user input
st.sidebar.header("Filter Options")

# Date range filter
start_date = st.sidebar.date_input("Start Date", data['date'].min())
end_date = st.sidebar.date_input("End Date", data['date'].max())

# Convert date inputs to datetime format using pandas
start_date = pd.to_datetime(start_date)
end_date = pd.to_datetime(end_date)

# Apply filters to the data
filtered_data = data[(data['date'] >= start_date) & (data['date'] <= end_date)]

# Convert the filtered data to CSV format
csv = filtered_data.to_csv(index=False)

st.sidebar.subheader('Download Filter Data')
# Create a download button in the sidebar for the filtered data
st.sidebar.download_button("Download CSV ", csv , "file.csv", key='download-csv')

Ce que fait ce code :

• st.sidebar.header() : Ajoute un en-tête à la barre latérale pour les options de filtre, aidant à organiser les entrées utilisateur.
• st.sidebar.date_input() : Crée des sélecteurs de date dans la barre latérale pour que l'utilisateur sélectionne une date de début et de fin. Les valeurs par défaut sont définies sur les dates minimale et maximale du jeu de données.

Filtrage des données :

• Les données sont filtrées directement en comparant la colonne date dans le DataFrame avec les start_date et end_date sélectionnées dans les entrées de la barre latérale. Nous utilisons pd.to_datetime() pour convertir les dates sélectionnées par l'utilisateur en objets datetime de pandas.
• st.sidebar.download_button(): Ajoute un bouton de téléchargement à la barre latérale, permettant aux utilisateurs d'exporter les données filtrées au format CSV. Le bouton est étiqueté Download CSV et, lorsqu'il est cliqué, initie le téléchargement des données filtrées au format CSV.

Assurez-vous de sauvegarder le fichier dans JupyterLab pour que vos modifications soient appliquées et vérifiez l'application.

Sélection multiple avec st.multiselect

Un autre filtre utile que nous pouvons ajouter est le widget st.multiselect. Cela permet aux utilisateurs de sélectionner plusieurs options dans une liste. Voici un exemple de mise en œuvre :

...

# Add multiselect filter for product categories
categories = filtered_data['category'].unique().tolist()
selected_categories = st.sidebar.multiselect('Select Product Categories', categories, default=categories)

# Update the filtered data to include category selection
filtered_data = filtered_data[filtered_data['category'].isin(selected_categories)]

# Convert the filtered data to CSV format
csv = filtered_data.to_csv(index=False)

st.sidebar.subheader('Download Filter Data')
# Create a download button in the sidebar for the filtered data
st.sidebar.download_button("Download CSV ", csv , "file.csv", key='download-csv')

# Display the filtered data in the main table
st.header("Filtered Sales Data")

if filtered_data.empty:
    st.warning("No data available for the selected filters.")
else:
    st.dataframe(filtered_data)

Ce que fait ce code :

• categories = data['category'].unique().tolist() : Crée une liste de catégories uniques à partir de la colonne 'category' du jeu de données.
• st.sidebar.multiselect() : Ajoute un widget de sélection multiple à la barre latérale, permettant aux utilisateurs de choisir plusieurs catégories de produits. La sélection par défaut inclut toutes les catégories.
• Mise à Jour des Données Filtrées : Le filtered_data est affiné pour n'inclure que les catégories sélectionnées en utilisant la méthode isin().

Ajout d'un curseur avec st.slider

Un autre élément interactif utile que nous pouvons ajouter à notre tableau de bord est un curseur. Le widget st.slider permet aux utilisateurs de sélectionner une valeur dans une plage spécifiée. Voici comment nous pouvons le mettre en œuvre :

...
# Add a slider for selecting price range
min_price = int(filtered_data['price'].min())
max_price = int(filtered_data['price'].max())
price_range = st.sidebar.slider('Select Price Range', min_price, max_price, (min_price, max_price))

# Update the filtered data to include price range selection
filtered_data = filtered_data[(filtered_data['price'] >= price_range[0]) & (filtered_data['price'] <= price_range[1])]

# Convert the filtered data to CSV format
csv = filtered_data.to_csv(index=False)

st.sidebar.subheader('Download Filter Data')
# Create a download button in the sidebar for the filtered data
st.sidebar.download_button("Download CSV ", csv , "file.csv", key='download-csv')

Ce que fait ce code :

• min_price et max_price : Déterminent les prix minimum et maximum du jeu de données pour définir la plage du curseur.
• st.sidebar.slider(): Crée un curseur dans la barre latérale qui permet aux utilisateurs de sélectionner une plage de prix. La sélection par défaut inclut la plage de prix complète.
• Mise à jour des données filtrées : Le filtered_data est affiné pour n'inclure que les produits dans la plage de prix sélectionnée.
• st.sidebar.download_button() : Ajoute un bouton de téléchargement dans la barre latérale.

Pour fournir des insights rapides aux utilisateurs, nous pouvons afficher des métriques clés telles que la quantité totale des ventes, le nombre de transactions et la quantité moyenne vendue par transaction. Ces métriques se mettront à jour dynamiquement en fonction des données filtrées. Nous pouvons ajouter le code suivant pour calculer et afficher les métriques clés :

# Calculate key metrics for the filtered data
total_sales = filtered_data['quantity'].sum()
total_transactions = filtered_data['transaction_id'].nunique()
average_quantity_sold = filtered_data['quantity'].mean()

# Add a separator line
st.markdown('---')
# Display Key Metrics
st.header('Key Metrics Overview')
kpi1, kpi2, kpi3 = st.columns(3)
kpi1.metric(label="Total Sales Quantity", value=total_sales)
kpi2.metric(label="Total Transactions", value=total_transactions)
kpi3.metric(label="Average Quantity Sold per Transaction", value=f"{average_quantity_sold:.2f}")

Ce que fait ce code :

• st.markdown('---'): Ajoute une ligne horizontale pour la séparation visuelle.
• st.header('Key Metrics Overview'): Ajoute un en-tête intitulé "Key Metrics Overview" à l'application Streamlit.
• st.columns(3): Crée trois colonnes également espacées (nommées kpi1, kpi2, et kpi3) dans la zone principale de l'application Streamlit. Elles peuvent contenir différents contenus. Dans ce cas, les colonnes seront utilisées pour afficher les trois métriques clés.
  • kpi1.metric(), kpi2.metric(), kpi3.metric(): Ces fonctions affichent les métriques réelles dans leurs colonnes respectives.

Sauvegardez le fichier et visualisez les métriques clés mises à jour dynamiquement.

Les visualisations sont essentielles pour comprendre les tendances et les modèles dans les données. Dans cette partie, nous allons ajouter des graphiques en barres pour visualiser les ventes par jour de la semaine dans le tableau de bord Streamlit. Voici comment nous pouvons créer la visualisation :

# Add a "weekday" column to group by day of the week
filtered_data['weekday'] = filtered_data['date'].dt.day_name()

# Group sales by day of the week
sales_by_weekday = filtered_data.groupby('weekday', sort=False)['quantity'].sum().reset_index()

# To ensure correct weekday order, define a specific ordering:
weekday_order = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
sales_by_weekday['weekday'] = pd.Categorical(sales_by_weekday['weekday'], categories=weekday_order, ordered=True)
sales_by_weekday = sales_by_weekday.sort_values('weekday')

# Add a horizontal line for visual separation
st.markdown('---')

# Display header for the chart
st.header("Sales by Day of the Week")

# Create a new figure for the plot
fig = plt.figure(figsize=[5,3])

# Create the bar plot using Seaborn
# 'sales_by_weekday' should be a DataFrame with 'weekday' and 'quantity' columns
ax = sns.barplot(data=sales_by_weekday,
                 x='weekday', y='quantity',
                 errorbar=None, palette="Set3")

# Add value labels on top of each bar
for p in ax.patches:
    plt.annotate(f'{int(p.get_height())}',
                (p.get_x() + p.get_width() / 2., p.get_height()),
                ha='center', va='center',
                xytext=(0, 10),  # Offset the text by 10 units
                textcoords='offset points',
                fontsize=12, fontweight='bold')

# Remove y-axis for a cleaner look
plt.yticks([])  # Hide the y-axis ticks
plt.ylabel('')  # Remove the y-axis label

# Remove top, right and left spines for a minimalist design
sns.despine(left=True)

# Rotate x-axis labels for better readability
plt.xticks(rotation=45)
plt.xlabel('')  # Remove x-axis label

# Display the bar plot in Streamlit
# This renders the Matplotlib figure in the Streamlit app
st.pyplot(fig)

Ce que fait ce code :

• st.pyplot(fig1): Affiche une figure Matplotlib dans l'application Streamlit.

Bien que l'exemple ci-dessus utilise Matplotlib et Seaborn pour créer des visualisations statiques, il est à noter que Streamlit offre des options plus interactives pour la visualisation des données :

• Fonctions de traçage natives de Streamlit : Streamlit fournit des capacités de création de graphiques interactifs intégrées via des fonctions comme st.line_chart(), st.bar_chart(), et st.area_chart(). Celles-ci permettent aux utilisateurs d'interagir avec les graphiques, comme zoomer ou survoler pour plus d'informations.
• Intégration de Plotly : Streamlit supporte également Plotly, une bibliothèque puissante pour créer des graphiques interactifs. Les graphiques Plotly sont nativement interactifs, permettant aux utilisateurs de zoomer, se déplacer et survoler les points de données pour des informations supplémentaires. Vous pouvez facilement intégrer les graphiques Plotly dans votre application Streamlit en utilisant st.plotly_chart().

Excellent travail ! Vous avez acquis une solide compréhension de la façon de construire des tableaux de bord Streamlit interactifs et dynamiques, en vous concentrant sur les éléments essentiels qui rendent un tableau de bord fonctionnel et convivial.

Vous savez maintenant comment créer des filtres interactifs comme des curseurs et des menus déroulants pour permettre aux utilisateurs d'explorer dynamiquement les données. Par exemple, vous pouvez utiliser un filtre de plage de dates pour affiner un jeu de données, permettant aux utilisateurs d'analyser des périodes ou des catégories spécifiques.

Vous avez également appris comment afficher efficacement des métriques clés et des visualisations, notamment en utilisant st.metric() pour mettre en évidence des statistiques importantes et st.pyplot() pour intégrer des visualisations comme des graphiques en barres et des graphiques linéaires. Ces fonctionnalités aident les utilisateurs à saisir rapidement et clairement les insights.

Enfin, vous avez exploré comment améliorer l'expérience utilisateur en ajoutant des composants comme un bouton de téléchargement pour exporter les données filtrées et en personnalisant la mise en page avec st.columns() et st.expander() pour garder le tableau de bord propre et interactif.

Continuez votre excellent travail !