De Plotly à Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Une première application Dash

Une application Dash complète :

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Fonctionnalités Python possibles
- p. ex., interpolation de chaîne print("f{my_variable}")

Les imports principaux de Dash

from dash import Dash, dcc

Dash initialise l'appli
dcc fournit des composants d'interface (graphiques, champs, etc.)
- Un composant dans notre appli
- Davantage de composants tout au long du cours

La mise en page de l'appli

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Créez un objet appli avec Dash()
Définissez app.layout
- Avec dcc.Graph()
  - figure = la figure Plotly à afficher
  - id = important pour les callbacks plus tard

Exécuter l'appli

if __name__ == '__main__':
    app.run(debug=True)

Script lancé depuis la ligne de commande
- c.-à-d. python my_app.py en ligne de commande
debug pour un retour pendant les tests

Notre appli

Accéder via un navigateur web comme Google Chrome
Pendant l'exécution, modifiez et enregistrez le fichier .py pour voir les mises à jour en direct dans le navigateur

Capture d'écran du terminal après le lancement d'une appli Dash. Du texte blanc sur fond noir affiche les détails mentionnés dans le script.

Notre appli dans le navigateur

Un GIF d'un histogramme horizontal : ventes totales sur l'axe des x par pays sur l'axe des y. C'est le même graphique que dans la leçon précédente, mais dans Chrome, avec l'adresse du serveur visible dans la barre d'URL. La souris survole le graphique puis clique dans la barre d'URL pour montrer la présence du serveur.

Dash dans DataCamp

Quelques différences avec les autres exercices DataCamp :
- Lignes d'initialisation en haut des exercices
- Tout s'exécute d'un coup (pas ligne par ligne)
- Code (beaucoup) plus long
Tableaux de bord complets (agrandissez la fenêtre pour voir)

Capture d'écran du haut d'un exercice de code Dash exécuté, mettant en évidence le bouton pour agrandir la sortie HTML afin d'afficher l'appli en plein écran.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly