Création d’interfaces dynamiques sur internet : GoogleVis & Shiny

1. Création d’interfaces dynamiques sur internet :GoogleVis & Shiny ValerieDyèvre Cyril Esnault Thibault Gauduchon Christophe Le diouris Lisa Nédélec Projet R

2. I. GoogleVis I.1. Principes I.2. Les sorties graphiques possibles I.3. Exemples appliqués à un jeu de données I.4. Avantages/Inconvénients II. Shiny 1.1. Qu’est-ce qu’une application Shiny 1.2. Structure et fonctionnement

3. 1-Quel but ? • Bibliothèque qui permet de faire l’interface entre R et les outils Google Chart à partir de données dans R GoogleVis Pages Web

4. 2-Les sorties graphiques • Plus d’une vingtaine de fonctions disponibles • Cartes : • Map, Geo Map, GeoChart, IntensityMap • Tableaux : • Table, Annotated Time Line • Graphiques : • MotionChart, BarChart, ColumnChart, TreeMap, BubbleChart,LineChart,PieChart, ScatterChart, CandlestickChart, OrgChart, AreaChart https://developers.google.com/chart/interactive/docs/gallery

5. 3-Exemples d’application • Trois types de graphiques avec un même jeu de données • MotionChart • GeoMap • BubbleChart • Afin d’illustrer nos propos, le jeu de données suivant a été créé :

6. googleMotionChart gvisMotionChart(data, idvar = "", timevar = "", xvar=" ", yvar="", colorvar="", sizevar="", options = list()) • data : jeu de données utilisé • Idvar : Variable d’intérêt • Timevar: Variable numérique représentant la chronologie (année, mois, jour …) • Xvar: Variable numérique à mettre en abscisse • Yvar: Variable en abscisse à mettre en ordonnée • Colorvar: Variable numérique (chaque individu sont représentés par une couleur selon la valeur) • Sizevar : Variable numérique (chaque individu sont représentés par une taille de bulle selon la valeur) • Options : liste contenant les différentes options utilisées • (cf: Hans Rosling : Projet Gapminder)

7. googleMotionChart MotionChart<- gvisMotionChart(don2, idvar="Pays", timevar ="Annee",xvar="Esperance.de.vie", yvar="Taux.de.natalité", sizevar= " Population " options=list(width=900,height=700)) plot(MotionChart)  Lance la page Web contenant le fichier print(MotionChart)  Affiche le code HTML et JAVA correspondant

8. Résultat

9. gVisMerge • Permet de fusionner plusieurs objets gvis sur une seule page Web • Exemple : gvisMotionChart et gvisTable table_motion<-gvisMerge(MotionChart,table,horizontal=TRUE) plot(table_motion)

10. gVisMerge

11. Google Geo Chart with R • Jeux de données  cartes intéractives (Pays, continents, régions, etc…) • Les indications concernant ces aires géographiques peuvent être de deux types : soit cette aire est colorée en fonction d’un paramètre (une couleur=une modalité de la variable étudiée), soit l’indication est caractérisée par un cercle dont le diamètre dépend de la valeur de la variable.

12. Le code pour colorier une carte

13. Carte obtenue

14. Code pour représenter les modalités sous forme de bulles

15. Carte obtenue

16. Un autre outil pour faire des cartes : gvisgeoMap

17. Avec gvisgeoMap Ici il ne reconnaît pas les noms en Français, il faut donc utiliser les noms des pays définis d’après la norme ISO 3166-1 alpha-2 (Alors que gvisgeoChart les reconnaît)

18. La norme ISO 3166-1 alpha-2 • Associe à chacun des pays du monde un code reconnu par gvisgeoMap

19. Après utilisation de cette norme

20. Code pour représenter les modalités sous forme de bulles

21. Sortie graphique BubbleChart : >install.packages(‘’googleVis ’’) >library(goolgleVis) gvisBubbleChart(data, idvar = "", xvar = "", yvar = "", colorvar = "", sizevar = "", options = list(), chartid) Data : a data.frame to be displayed as a bubble chart. The data has to have at least three columns for idvar, xvar, and yvar. Idvar : column name of data with the bubble xvar : column name of a numerical vector in data to be plotted on the x-axis. Yvar : column name of a numerical vector in data to be plotted on the y-axis. Colorvar : column name of data that identifies bubbles in the same series. Use the same value to identify all bubbles that belong to the same series; bubbles in the same series will be assigned the same color. Series can be configured using the series option. Sizevar : values in this column are mapped to actual pixel values using the sizeAxis option. Options : list of configuration options for Google Bubble Chart. Chartid : character. If missing (default) a random chart id will be generated based on chart type and tempfile

22. > Bubble = gvisBubbleChart(googlevis, idvar="Pays", xvar="Taux.de.natalité", yvar="Esperance.de.vie", colorvar="Annee", option=list(width=1200, height=900)) • >plot(Bubble) • La Namibie actuelle # le Népal des années 50 !! • Le Népal actuel # La France des années 50 !!

23. >Bubble2=gvisBubbleChart(googlevis,idvar="Pays",xvar="Taux.de.natalité",yvar="Esperance.de.vie",colorvar="Annee",sizevar="population",option=list(width=1200,height=900,title="Evolution temporelle du taux de natalite et de l esperance de vie par pays")) • >plot(Bubble2) • 1990 : Les USA # La France pour natalité + espérance de vie, alors que populations différentes • 2010 : Ecart entre France et USA un peu plus important

24. 4- Bilan du package : Avantages • Facilité d'utilisation  • Publier sur des navigateurs Web • Possibilité de fusionner plusieurs objets gvis dans une même page Web (gvisMerge) • Générer du code HTML et JavaScript permettant d'intégrer dans un site Web (print)

25. Bilan du package: Inconvénients • Un navigateur Internet avec une connexion est nécessaire pour la visualisation de la sortie • Manque d’options dans gvisMotionChart • Pas possible d’utiliser les sorties googlevis dans un pdf ou un ppt => Ca utilise googlecharttools où les sorties sont prévues que sur un html (sorties web), alternative est de faire le ppt directement sur le net (ex : LiveWeb for PPT) • On ne peut pas voir les sorties motion chart sur un Ipad/Iphone (car sorties Flash pas compatibles) • La taille des bulles est déterminée selon une variable, donc si forte variabilité, des bulles peu visibles car « écrasées ».

26. Shiny Application Web interactives

27. Qu’est–ce qu’une app. Shiny ? • Tout de suite, notre exemple !

28. 1. Schéma de fonctionnement Page Web Instructions Mise à jour des sorties Relecture du script

29. Structure de l’application • User Interface ui.r, définit le cadre de l’application : • Partition de la page Web • Fenêtres d’instruction (listes, curseurs…) • Panneaux d’affichages pour accueillir les sorties (graphiques, tables, cartes…)

31. Structure de l’application • Server server.r, génère des sorties actualisées en temps réel • input$nom -> output$nom Instructions Mise à jour des sorties

34. Les fonctions de Shiny • plotPNG : crée un graphique • textOutput: affiche des objets de type « textes» dans l’interface shiny • renderTable: crée un objet de type « tableau » dans l’interface shiny • verbatimTextOutput: affiche le résultat de calculs sous R

35. Bien d’autres exemples sur… • http://www.rstudio.com/shiny/showcase/

36. Atouts de Shiny • Très simple à mettre en place lorsqu’on a compris la logique (pas de langage Java, HTML…) • Une lecture synthétique et interactive • Possibilité de partager ses applications sur le Web (avec Shiny-server software)

37. CONCLUSION • Googlevis assure le lien entre R et les interfaces graphiques de Google • Shiny permet de créer des applications sur le web à partir de R Lien entre ces deux outils? • Les fonctions du package Googlevis peuvent être intégrées au sein des applications de Shiny.