On connait la puissance d'un petit dessin vs un long discours et on a vu qu'en affichant les bons graphes on peut faire ressortir des informations de données. On va maintenant regarder comment assembler ces graphes et ajouter des curseurs qui permettent de les contrôler pour chercher une information ou surveiller un flux de données par exemple.
Pour cela on fabrique son tableau de bord qui est un mélange de
Comme indiqué ci-dessus cette partie utilise Dash qui n'est pas intégré dans Jupyter Notebook. Aussi cela demande que vous installiez tout ce qui est nécessaire sur votre machine comme indiqué ici.
Dash propose un tutorial bien fait que je suis. Le premier exemple en est extrait en 90 %, voir ici.
Pour ce premier exemple on met
html.Div
qui contient plusieurs enfants (ce qui permet de construire un arbre sachant que tous les composants ont un argument children
).html.H1
html.Div
pour y ranger du textedcc.Markdown
dcc.Graph
%%writefile /tmp/dash1.py
# -*- coding: utf-8 -*-
import dash
from dash import dcc
from dash import html
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for your data
on more than one line in the code.
'''),
dcc.Markdown("And a __line__ in Markdown which makes life so *easy*"),
dcc.Graph(
id='example-graph',
figure=fig
)
])
if __name__ == '__main__':
app.run_server(host="0.0.0.0", debug=True, port=8051) # 0.0.0.0 is needed for Docker
Writing /tmp/dash1.py
Maintenant que la cellule ci-dessus a été enregistrée dans /tmp/dash1.py
on peut lancer le serveur Dash
qui va l'executer.
Attention : Lorsqu'on lance Dash dans un conteneur Docker, il est nécessaire d'utiliser l'adresse host='0.0.0.0'
qui indique à Docker de choisir la bonne adresse. Dans ce cas Dash indique qu'il tourne sur 0.0.0.0:8051 mais il faut traduire par http://127.0.0.1:8051/ si on fait tourner le Docker localement ou http://python3.mooc.lrde.epita.fr:8051 si on est sur le site de l'ÉPITA.
Lorsqu'on utilise Dash sur sa machine sans Docker, alors on n'indique pas host
et l'application tourne sur l'adresse locale c.a.d. http://127.0.0.1:8051/.
Si vous lancez cette application sur le serveur web de l'EPITA alors vous allez entrer en collision avec l'application lancée par les autres. Aussi il est préférable de recopier le code sur sa machine et de le lancer localement (si on fait tourner cette feuille Jupyter sur sa machine, alors tout va bien, on peut lancer la cellule suivante sans risque).
Pour arrêter le serveur Dash il suffit d'arrêter la cellule.
!python3 /tmp/dash1.py
Dash is running on http://0.0.0.0:8051/ * Serving Flask app 'dash1' * Debug mode: on ^C
La documentation des composants est sur :
Le tutorial officiel de la mise en page montre en plus
className
le style désiré (html.Div(className="alert", children="..."
)Il est conseillé de lire cette présentation qui est bien plus complète que cette page.