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înes print("f{my_variable}")

Les principaux imports Dash

from dash import Dash, dcc

Dash initialise l'application
dcc contient des composants d'interface comme des graphiques et des champs d'entrée
- Un composant dans notre app
- Plus de composants dans le cours

La disposition de l'app

app = Dash()

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

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

Exécuter l'app

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

Le script est lancé depuis la ligne de commande
- p. ex., python my_app.py dans la ligne de commande
debug donne une rétroaction pendant les tests

Notre app

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

Une capture d'écran de ce qu'on voit dans un terminal après le lancement d'une app Dash. Du texte blanc sur fond noir montre les détails indiqués dans le script.

Notre app dans le navigateur

Un GIF d'un diagramme à barres horizontales des 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 le navigateur Chrome, avec l'adresse du serveur 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 par rapport aux autres exercices DataCamp :
- Lignes de configuration 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'app en plein écran.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly