.. _td1acenoncesession12jsrst: ========================================================= 1A.data - Visualisation des données - graphes interactifs ========================================================= .. only:: html **Links:** :download:`notebook `, :downloadlink:`html `, :download:`python `, :downloadlink:`slides `, :githublink:`GitHub|_doc/notebooks/td1a_dfnp/td1a_cenonce_session_12_js.ipynb|*` Les graphiques interactif permettent d’afficher plus d’information sur le même graphe mais comme le lecteur ne peut déchiffrer des graphes trop chargés, il interagit pour restreindre sa lecture à une zone précise. Le zoom est indispensable pour visualiser des données très localisées sur de grandes zones géographiques mais ce n’est pas la seule. Seules une ou deux librairies sont démontrées dans ce notebooks mais il en existe un palanquée : `10 plotting libraries `__. .. code:: ipython3 %matplotlib inline .. code:: ipython3 from jyquickhelper import add_notebook_menu add_notebook_menu() .. contents:: :local: .. raw:: html

Graphiques interactifs .. raw:: html

Ce sujet sort du cadre de cette séance. Un graphique interactif réagit à des événéments comme le passage du curseur de la souris, un clic, un zoom. Il est difficile de lire un graphique trop chargé, c’est pourquoi en rendant le graphique interactifs, on cherche à donner plus d’information sans nuire à sa lisibilité. Voici quelques scénarios : - On veut représenter une des dimensions du problème en animant le graphique. C’est fréquent en 3D où un des axes est celui du temps. On préfèrera un graphique en 2D évoluant dans le temps. - Lorsqu’il y a trop de courbes à dessiner, le lecteur peut activer ou désactiver certaines courbes pour pouvoir les comparer. - On peut permettre de changer d’échelle (logarithmique ou changer la base 100 à différents endroits). - On veut donner une vue d’ensemble et en même temps un niveau de détails plus fin si le lecteur le demande. Ces animations pris leur essor avec internet et le langage `javascript `__. Concevoir un graphique animé nécessite plus de temps car il faut prévoir ce qu’il doit se passer en cas d’action du lecteur (souris, touche, …). Les modules python permettant de les créer construisent en fait un code javascript qu’il faut ensuite exécuter dans un navigateur (ou directement dans un notebook comme celui-ci). La librairie javascript qui a changé la façon de les concevoir est `d3.js `__. Beaucoup d’autres librairies sont des surcouches de celle-ci `nvd3 `__. Une des plus connues est `bokeh `__. .. code:: ipython3 import bokeh, bokeh.io as bio bio.output_notebook() .. raw:: html
Loading BokehJS ...
Une fois que le module est initialisé, on peut afficher son graphique. .. code:: ipython3 import bokeh.plotting as bplt p = bplt.figure(title = "Exemple") p.xaxis.axis_label = 'X' p.yaxis.axis_label = 'Y' p.circle([1,2,3,4],[4,5,6,5.5], fill_color="red", color="red", size=12) bplt.show(p) .. raw:: html
.. code:: ipython3 from pyquickhelper.helpgen import NbImage # seconde image NbImage("pngbokeh.png") # pour la conversion des notebooks au format HTML .. image:: td1a_cenonce_session_12_js_8_0.png Pour sauver le graph sous forme de fichier HTML : .. code:: ipython3 import os bplt.output_file("example_bokeh.html") bplt.save(p) print([ _ for _ in os.listdir(".") if "html" in _ ] ) .. parsed-literal:: ['example_bokeh.html'] `plotly `__ est également une librairie très connue car plutôt réussie visuellement. Prévu initialement comme un service - les utisateurs mettaient en ligne leur graphique -, elle est maintenant disponible dans un mode *offline*, sans connexion extérieure. Elle fonctionne comme *bokeh* avec une étape d’initialisation. .. code:: ipython3 from plotly.offline import init_notebook_mode init_notebook_mode() .. raw:: html Puis un graphique issu du tutoriel, ou le `guide d’utilisateur `__. Le code de l’API offline est sur GitHub avec notemment la fonction `iplot `__. .. code:: ipython3 import plotly.graph_objs as go from plotly.offline import iplot import numpy as np x = np.random.randn(500) y = np.random.randn(500) iplot([go.Histogram2dContour(x=x, y=y, contours=dict(coloring='heatmap')), go.Scatter(x=x, y=y, mode='markers', marker=dict(color='white', size=3, opacity=0.3))], show_link=False, image_width=500) .. raw:: html
Exercice 1 : choisir une librairie interactive et faire un graphe ----------------------------------------------------------------- De préférence une que vous ne connaissez pas.