01 Dash - Introduction

Introduction

Découvrez Dash, la bibliothèque Python pour créer des applications web interactives. Ce cours vous guidera à travers les bases de Dash, l'installation, la création de tableaux de bord, la manipulation de données et la visualisation, avec un accent sur l'interactivité et la compatibilité mobile.

Objectifs

A la fin de cette expédition, vous saurez :

✅ Installer et configurer Dash ✅ Créer des tableaux de bord interactifs ✅ Visualiser des données avec Plotly ✅ Intégrer des fonctionnalités interactives ✅ Développer pour mobile et concevoir en responsive ✅ Déployer et partager des applications

Sommaire

Qu'est-ce que Dash ?

Dash est une bibliothèque Python open source qui permet de créer des applications web interactives. Elle est basée sur Flask et Plotly.js et offre un moyen simple et déclaratif de créer des tableaux de bord.

Pourquoi utiliser Dash ?

Il existe de nombreuses raisons d'utiliser Dash pour créer des visualisations de données et des tableaux de bord. Parmi les principaux avantages, citons :

• Facilité d'utilisation : Dash est très facile à utiliser, même pour les débutants. Il dispose d'une API simple et intuitive qui permet de créer des tableaux de bord complexes.
• Interactivité : Les tableaux de bord Dash sont interactifs, ce qui signifie que les utilisateurs peuvent interagir avec les données pour en tirer des informations.
• Compatible mobile : Les tableaux de bord Dash sont compatibles mobile, ils peuvent donc être consultés sur n'importe quel appareil.
• Évolutive : Les tableaux de bord Dash peuvent être évolutifs pour gérer de grandes quantités de données.

Structure du code Dash

Une application Dash est composée de deux parties principales : la mise en page (layout) et les rappels (callbacks).

• Mise en page (layout) : La mise en page spécifie la structure du tableau de bord, y compris l'emplacement des composants.
• Rappels (callbacks) : Les rappels gèrent l'interaction entre l'utilisateur et le tableau de bord.

Installation de Dash

Pour installer Dash, vous pouvez utiliser pip :

pip install dash

Création d'une application Dash

Pour créer une application Dash, vous devez créer un fichier Python et importer les bibliothèques nécessaires.

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

# Création de l'application
app = Dash(__name__)
server = app.server # Ajout utile pour certains déploiements

# Exemple de données
df = pd.DataFrame({
    'x': [1, 2, 3, 4, 5],
    'y': [10, 11, 12, 13, 14]
})

# Définition du layout avec un Slider
app.layout = html.Div([
    html.H1("Dashboard avec Dash"),
    dcc.Graph(id='line-graph'),
    dcc.Slider(
        id='slider',
        min=df['x'].min(),
        max=df['x'].max(),
        value=df['x'].max(),  # Mise à jour valeur initiale (souvent max ou une valeur pertinente)
        marks={str(num): str(num) for num in df['x']},
        step=None
    )
])

# Callback pour mettre à jour le graphique (syntaxe Input mise à jour)
@app.callback(
    Output('line-graph', 'figure'),
    Input('slider', 'value')  # Syntaxe sans les crochets pour un seul Input
)
def update_graph(slider_value):
    # Filtrer les données en fonction du curseur
    # S'assurer que slider_value n'est pas None au démarrage
    if slider_value is None:
        filtered_df = df # ou retourner une figure vide/par défaut
    else:
        filtered_df = df[df['x'] <= slider_value]

    # Création du graphique avec Plotly Express
    fig = px.line(
        filtered_df,
        x='x',
        y='y',
        title=f'Graphique Simple pour x <= {slider_value}' # Titre dynamique
    )
    # Optionnel : transition douce
    fig.update_layout(transition_duration=300)
    return fig

# Exécution de l'application
if __name__ == '__main__':
    app.run(debug=True) # Utilisation de app.run() qui est l'alias

Ce code créera un tableau de bord simple avec un curseur et un graphique. Le graphique sera mis à jour lorsque la valeur du curseur changera.

Voici comment lancer le fichier.py que vous venez de créer dans une ligne de commande :

python3 chemin/fichier.py

Vous verrez apparaitre dans le terminal un affichage du type : Dash is running on http://127.0.0.1:8050/.

Il suffit d'aller sur cette adresse dans votre navigateur afin d'accèder à Dash.

Ressources