Implémentation de l'application web

Introduction à Dash

Dash est un framework Python permettant de créer des applications web interactives. Il fonctionne avec des layouts et des callbacks. Dans notre implémentation, nous utilisons également la bibliothèque Plotly pour la visualisation des données et des graphiques

Source : Plotly

Fonctionnement

Le framework fonctionne avec des layouts et des callbacks, ces composants définissent l’apparence et les fonctionnalités de l’application.

Layouts

Les layouts définissent l’apparence de l’application. Ils sont constitués d’éléments HTML classiques ou de composants interactifs issus de modules spécifiques. Un layout est structuré comme un arbre hiérarchique de composants, permettant l’imbrication d’éléments.

Dash est déclaratif, ce qui signifie que tous les composants possèdent des arguments qui les décrivent. Les arguments peuvent varier selon le type de composant. Les principaux types sont les composants HTML (dash.html) et les composants Dash (dash.dcc).

Les composants HTML disponibles incluent tous les éléments HTML standard, avec des attributs comme style, class, id, etc. Les composants Dash génèrent des éléments de haut niveau tels que des graphiques et des sélecteurs.

Callbacks

Les callbacks sont des fonctions automatiquement appelées lorsqu’un composant d’entrée (input) change. Ils affichent le résultat des fonctions vers un composant de sortie (output). Les callbacks utilisent le décorateur @callback pour spécifier les inputs et outputs, correspondant aux id des composants et aux propriétés à mettre à jour. Chaque attribut d’un composant peut être modifié en tant que output d’un callback, en réponse à une interaction avec un composant input. Certains composants, comme les sliders ou les dropdowns, sont déjà interactifs et peuvent être utilisés directement comme inputs.

Exemple de code

Voici un exemple de code illustrant l’utilisation de Dash et Plotly : Documentation

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

# Chargement des données
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

# Initialisation de l'application Dash
app = Dash()

# Définition du layout de l'application
app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

# Définition du callback pour mettre à jour le graphique
@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    # Filtrer les données en fonction de la sélection du pays
    dff = df[df.country == value]
    # Créer un graphique en ligne avec Plotly Express
    return px.line(dff, x='year', y='pop')

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