An introduction to interactive visualisation - Laurent Thibault

Nov 20, 2013 - In summary, the most important thing about computer visualisation is interaction ..... URL: http://books.google.fr/books?id=MIn0PAAACAAJ. Cairo, A. .... Tufte, E. : 2003, The cognitive style of PowerPoint, Graphics Press. URL: ...
2MB taille 4 téléchargements 331 vues
An introduction to interactive visualisation Christophe 20 novembre 2013 “ In summary, the most important thing about computer visualisation is interaction and you can add interaction to anything” Alan Dix and Geoffrey Ellis (1998)

1

Interactivit´ e vs graphiques dynamiques ?

Les graphiques dynamiques ont le vent en poupe parce qu’ils permettent d’ajouter un degr´e de libert´e dans la visualization. L’oeil humain est en effet fait pour visualiser rapidement des mouvement, d´etecter des changements, des disparitions. Toutefois, la plupart des graphiques ”dynamiques” proposent des s´equences fig´ees et orientent donc le lecteur vers un type de lecture (mˆemes si il reste pas mal de choix...). Nous proposons ici un panorama r´ecent des diff´erents type de visualisation ainsi que des outils permettant de les cr´eer.

Figure 1: googleTrends on ”data visualization”, ”dynamic visualization” and ”Shiny” (http://www.google.fr/trends/explore#q=data%20visualization%2C%20Dynamic% 20visualization%2C%20R%20Shiny&cmpt=q)

1

Les graphiques interactifs, permettent `a l’utilisateur de voir des s´equences que le concepteur n’a pas forc´ement pr´evues ou d’identifier des ´el´ements sur diff´erents jeux de donn´ees. L’utilisateur peut alors ”jouer” avec des donn´ees plus librement que dans une s´equence pr´evue par un graphique dynamique. Tout ceci reste relatif, et les outils pour les diff´erents types de repr´esentation sont proches. Un exemple de calcul individuel sur le site de l’office nationale de la statistique Britannique :

Figure 2: Personal Inflation Calculator in UK (http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc14/)

2

Un autre exemple venu d’Allemagne o` u l’on repr´esente un kal´eidoscope des prix qui donne un aper¸cu de l’importance des groupes de biens et de leurs ´evolutions de prix. On peut obtenir une image tr`es d´etaill´ee de l’´evolution des prix dans certains domaines :

Figure 3: Kaleidoscope des prix (Office de la statitique publique Allemande)) (https://www.destatis.de/Voronoi/PreisKaleidoskop.svg) Et un autre venu d’Australie :

Figure 4: Population by sex and age (Australian Bureau of Statistics) (http://www.abs.gov.au/websitedbs/d3310114.nsf/home/Population%20Pyramid% 20-%20Australia)

3

1.1

Alan Dix pedagogical example

Jane Greystoke is marketing director at Floppy Banana International the world’s leading fresh fruit supplier. She is reviewing sales trends over recent years. She can see that overall sales have changed only marginally, but there are obviously some trends. Apple sales had been increasing until 1995, but are now on the decline. But what is on the increase ? Clementines look good, but are their sales any higher in 1997 than they were in 1995 ? And what about bananas, it isn’t clear whether their sales have been increasing, decreasing or simply keeping steady ? see http://www.meandeviation.com/dancing-histograms/hist.html and look at dates when clementines are selected ; Was here a deacrease in the sales of dates in 1996 ? No, now click on dates and you’ll see ! Figure 5: A. Dix example of Interactive bar chart (a) Apples

(b) Bananas

(c) Clementines

(d) Dates

4

1.2

d3.js javascript examples

Apart from R, one nice way of doing interactive is to use either html5 and/or javascript. Mots of examples here : https://github.com/mbostock/d3/wiki/ Gallery

Figure 6: Interactive graph using D3.js javascript language

5

1.3

la dynamique ne fait pas tout...

If one wish to visualise the complex relationships of all of Victor Hugo’s characters of ”les Miserables”on may do a graph http://bl.ocks.org/mbostock/ 4062045 But it is much more interesting to do an adjacent matrix plot. A network can be represented by an adjacency matrix, where each cell ij represents an edge from vertex i to vertex j. Here, vertices represent characters in a book, while edges represent co-occurrence in a chapter. http://bost.ocks. org/mike/miserables/. One option is to order them by cluster Figure 7: Victor hugo’s characters of ”les Miserables” (b) Adjacent matrix

(a) Graph

(c) Adjacent matrix (sorted by cluster)

6

1.4

En r´ esum´ e “Il faut percevoir le monde pour interagir Il faut interagir avec le monde pour le percevoir”

J. D. Feteke (Aviz) : Interactive Information Visualization 2012-2013 (http: //www.aviz.fr/Teaching2012/InteractiveInfoVis2012)

2

Outils

2.1

Dynamic exploration with GoogleVis

Google is keen on writing tools for data visualisation, it has launched a lab on that topic http://code.google.com/p/google-motion-charts-with-r/ After creating a data.frame (MyBigData), we can simply use the package on our data. We first create an object (M.big) using the gvisMotionChart command. That object is then plotted (plot(M.big)). That’s it. Only 2 lines of code ! > + + > > > > >

M.big # On cree une planisphere > Map.big plot(Map.big)

Figure 11: Interactive map

11

Finally, one can merge the two graphs. note that there are no interaction between the 2 graphs (yet ?)

> MGT