Cration dinterfaces dynamiques sur internet Google Vis Shiny

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

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

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

2 -Les sorties graphiques � Plus d’une vingtaine de fonctions disponibles � Cartes : ◦ Map, Geo Chart, Intensity. Map � Tableaux : ◦ Table, Annotated Time Line � Graphiques : ◦ Motion. Chart, Bar. Chart, Column. Chart, Tree. Map, Bubble. Chart, Line. Chart, Pie. Chart, Scatter. Chart, Candlestick Chart, Org Chart, Area. Chart https: //developers. google. com/chart/interactive/docs/gallery 4

3 -Exemples d’application � � Trois types de graphiques avec un même jeu de données ◦ Motion. Chart ◦ Geo. Map ◦ Bubble. Chart Afin d’illustrer nos propos, le jeu de données suivant a été créé : 5

google. Motion. Chart gvis. Motion. Chart(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) 6

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

Résultat 8

g. Vis. Merge � Permet de fusionner plusieurs objets gvis sur une seule page Web ◦ Exemple : gvis. Motion. Chart et gvis. Table table_motion<-gvis. Merge(Motion. Chart, table, horizontal=TRUE) plot(table_motion) 9

g. Vis. Merge 10

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. 11

Le code pour colorier une carte 12

Carte obtenue 13

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

Carte obtenue

Un autre outil pour faire des cartes : gvisgeo. Map

Avec gvisgeo. Map 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 31661 alpha-2 (Alors que gvisgeo. Chart les reconnaît)

La norme ISO 3166 -1 alpha-2 � Associe à chacun des pays du monde un code reconnu par gvisgeo. Map

Après utilisation de cette norme

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

Sortie graphique Bubble. Chart : >install. packages(‘’google. Vis ’’) >library(goolgle. Vis) gvis. Bubble. Chart(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 size. Axis option. Options : list of configuration options for Google Bubble Chartid : character. If missing (default) a random chart id will be generated based on chart type and tempfile

> Bubble = gvis. Bubble. Chart(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 !!

>Bubble 2=gvis. Bubble. Chart(googlevis, idvar="Pays", xvar="Taux. de. natalité", yvar ="Esperance. de. vie", colorvar="Annee", sizevar="population", option=list(width=1 200, height=900, title="Evolution temporelle du taux de natalite et de l esperance de vie par pays")) >plot(Bubble 2) 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

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 (gvis. Merge) � Générer du code HTML et Java. Script permettant d'intégrer dans un site Web (print) 24

Bilan du package: Inconvénients � � � Un navigateur Internet avec une connexion est nécessaire pour la visualisation de la sortie Manque d’options dans gvis. Motion. Chart Pas possible d’utiliser les sorties googlevis dans un pdf ou un ppt => Ca utilise google chart tools où les sorties sont prévues que sur un html (sorties web), alternative est de faire le ppt directement sur le net (ex : Live. Web 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 » . 25

Shiny Application Web interactives 26

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

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

Structure de l’application v 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…) 29

30

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

32

33

Les fonctions de Shiny � plot. PNG : crée un graphique affiche des objets de type « textes» dans l’interface shiny � text. Output: crée un objet de type « tableau » dans l’interface shiny � render. Table: � verbatim. Text. Output: calculs sous R affiche le résultat de 34

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

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) 36

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. 37