An introduction to interactive visualisation Christophe 20 novembre - PDF document

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 statis- tique 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 net- work can be represented by an adjacency matrix, where each cell ij repre- sents 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” (a) Graph (b) Adjacent matrix (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 <- gvisMotionChart(MyBigdata, idvar="carrier", timevar="year", xvar="K", yvar="Y", + colorvar="Region", sizevar="L", + options=list(width=400, height=420)) > # la visualisation se fait dans le navigateur !! > # Personalisation de la page > M.big$html$caption = " Big Airline Database (MyBigData)" > # Creation de la page > plot(M.big) 7

Figure 8: 2-D Dynamic and interactive scatter plot 8

Figure 9: 2-D Dynamic and interactive barchart 9

Figure 10: 2-D interactive line plot 10

One can also use the geographic information and draw an interactive map of firms. > # On cree une planisphere > Map.big<-gvisGeoChart(MyBigdata, "country", "Y", + options=list(displayMode="Markers", + colorAxis="{colors:[ ✬ purple ✬ , ✬ red ✬ , ✬ orange ✬ , ✬ grey ✬ ]}", + backgroundColor="lightblue")) > 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 <- gvisMerge(Map.big, M.big,horizontal=TRUE, tableOptions="bgcolor=\"#CCCCCC\" cellsp > # Final graph > > plot(MGT) Figure 12: Interactive map and Dynamic and interactive scatter plot 2.2 The manipulate package The following example is drawn from a nonparametric pedagogical tool writ- ten by Jeffrey Racine. First one need to write a function that do plotting ans specify the arguments of the plot > rm(list=ls()) > require(manipulate) > require(np) > ## Write a function to do plotting and accept arguments... doing so > ## allows multiple plot calls (e.g. overlay histogram etc.) which > ## cannot otherwise be done with the manipulate function. > > density.plot <- function(n,df,sf,nn,bwtype,ckertype,ckerorder,hist,rug) { + + if(nn >= n) { + warning(paste("Knn bandwidth must be less than",n)) + nn <- n-1 + } + + set.seed(42) + x <- rchisq(n,df=df) + x.eval <- seq(min(x)-0.5*sd(x),max(x)+0.5*sd(x),length=100) + f.dgp <- dchisq(ifelse(x.eval<0,0,x.eval),df=df) 12

+ + hist.max <- 0 + if(hist) hist.max <- max(hist(x,breaks=25,plot=FALSE)$density) + + f.kernel <- npksum(txdat=x,exdat=x.eval, + bws=ifelse(bwtype=="fixed",sf,nn), + bwscaling=TRUE, + bandwidth.divide=TRUE, + bwtype=bwtype, + ckertype=ckertype, + ckerorder=ckerorder)$ksum/n + + ylim <- c(0,max(hist.max,f.kernel,f.dgp)) + + plot(x.eval,f.kernel, # <---PLOT FUNCTION HERE + ylim=ylim, + type="l", + ylab="Density", + xlab="Data", + main="My first plot with manipulate (Inge-Stat, 11-2013)", + sub=paste("Bandwidth = ",ifelse(bwtype=="fixed",formatC(sf*sd(x)*n^{-1/(2*ckerorde + lty=1, + col=1) + + lines(x.eval,f.dgp,lty=2,col=2) + + legend("topright", + c("Kernel Estimate",paste("Chi-square (df = ",df,")",sep="")), + lty=c(1,2), + col=c(1,2), + bty="n", + cex=0.75) + + if(hist) hist(x,breaks=25,freq=FALSE,add=TRUE,lty=3) + + if(rug) rug(x) + } > Then the Manipulate package allow you easily to create an interactive plot. > manipulate(density.plot(n,df,sf,nn,bwtype,ckertype,ckerorder,hist,rug), # <-- + n=slider(100,1000,500,step=100,label="Number of observations"), # <-- + df=slider(10,120,10,step=10,label="Chi-square degrees of freedom"), + ckertype=picker("gaussian","epanechnikov","uniform",label="Kernel function"), + ckerorder=picker(2,4,6,8,label="Kernel order"), + bwtype=picker("fixed","adaptive_nn","generalized_nn",label="Bandwidth type"), + sf=slider(0.1,5,1,label="Scale factor (bwtype=\"fixed\")",step=0.1,ticks=TRUE) + nn=slider(2,1000,50,label="Kth nn (bwtype=*_nn)",step=1,ticks=TRUE), + hist=checkbox(FALSE, "Show histogram"), + rug=checkbox(FALSE, "Show rug")) 13