Chapitre 4 Applications web avec Shiny

Shiny est un package R qui permet la création simple d’applications web intéractives depuis R. Cette partie provient essentiellement du tutoriel de Benoît Thieurmel disponible ici : https://github.com/datastorm-open/tuto_shiny_rennes.

4.1 Une première application

Créer un répertoire pour l’application avec RStudio

File -> New Project -> New Directory -> Shiny Web Application

Choisir une application Multiple File.

Si cette option n’est pas disponible (ça peut dépendre des versions de Rstudio), on pourra utiliser

File -> New File -> Shiny Web App -> Multiple File

Deux fichier sont automatiquement générés : ui.R et server.R. Lancer l’application en cliquant sur le bouton Run App.

  • Changer le titre de l’application. On pourra l’appeler My first application.
  • Mettre à jour et vérifier que le titre a bien été changé.

4.2 Input - output

On garde la même application. On ne s’intéressera pas à la structure dans cette partie, on veut simplement ajouter

  • des nouveaux inputs dans le sidebarPanel, après le sliderInput. On n’oubliera pas de séparer les inputs par des virgules;
  • des nouveaux outputs dans le mainPanel, après le plotOutput. Là encore, on n’oubliera pas de séparer les outputs par des virgules.

Pour résumer on souhaite une colonne avec tous les inputs et une autre avec tous les outputs.

  1. Ajouter dans ui.R une entrée qui permette de changer la couleur de l’histogramme. On pourra utiliser

    selectInput(inputId = "color", label = "Couleur :",
            choices = c("Rouge" = "red", "Vert" = "green", "Bleu" = "blue"))

  2. Ajouter une sortie qui permette de visualiser le summary du jeu de données faithful. On pourra utiliser

    # ui.R
verbatimTextOutput("...")

# server.R
output$... <- renderPrint({
  summary(...)
})

Exercice 4.1 (Ajouter des inputs/outputs) Ajouter des entrées/sorties à votre application pour

  1. proposer à l’utilisateur de choisir un titre pour l’histogramme (utiliser textInput dans l’ui et l’option main dans hist);

  2. choisir la variable de faithful à représenter dans l’histogramme avec un radioButtons ayant pour choix colnames(faithful);

  3. visualiser le jeu de données entier (renderDataTable & dataTableOutput);

  4. ajouter un text sous l’histogramme qui indique le nombre de classes (renderText et paste dans server, textOutput dans ui);

  5. remplacer le selectInput du choix de la couleur par un colourInput (utiliser la package colourpicker);

  6. exporter le graphe (downloadButton & jpeg).

L’application demandée pourra ressembler à

Elle est également disponible ici https://input-output-rouviere-shiny.apps.math.cnrs.fr/.

4.3 Structurer l’application

On considère l’application app_structure disponible ici. C’est quasiment la même que précédemment avec un navbarPage qui définit

  • un onglet Data pour visualiser les données (table + summary)
  • un onglet Visualisation : inputs + histogramme.

Exercice 4.2 (Structurer son application) On conserve l’application précédente.

  1. Dans l’onglet Data utiliser navlistPanel pour séparer le summary et la table table en deux onglets :

    # rappel de la structure (ui.R)
navlistPanel(
"Title of the structure",
tabPanel("Title of the tab", ... "(content of the tab)"),
tabPanel("Title of the tab", ... "(content of the tab)")
)

  2. Dans l’onglet Visualization changer sidebarLayout - sidebarPanel - mainPanel par un fluidRow à 2 colonnes :

    • 1/4 : pour le sidebarPanel
    • 3/4 : pour le mainPanel.
    fluidRow(
  column(width = 3, ...), # column 1/4 (3/12)
  column(width = 9, ...)  # column 3/4 (9/12)
)

    Indication : utiliser wellPanel pour la colonne de gauche.

  3. Ajouter un bloxplot dans l’onglet visualisation (même variable et même couleur). On pourra également utiliser tabsetPanel pour avoir deux onglets pour l’histogramme et le boxplot.

    # rappel de la structure (ui.R)
tabsetPanel(
tabPanel("Title of the tab", ... "(content of the tab)"),
tabPanel("Title of the tab", ... "(content of the tab)")
)

L’application demandée pourra ressembler à

Elle est également disponible ici https://structure-rouviere-shiny.apps.math.cnrs.fr/.

Pour aller plus loin : faire la même application avec shinydashboard (https://rstudio.github.io/shinydashboard/).

4.4 Ajout de graphes interactifs

Dans l’application précédente, remplacer l’histogramme et la boxplot par des graphes javascript réalisés avec rAmCharts. On pourra utiliser

# server.R
output$distPlot <- renderAmCharts({...})

# ui.R
amChartsOutput("...")

L’application demandée pourra ressembler à

Elle est également disponible ici https://interactifs-rouviere-shiny-2.apps.math.cnrs.fr/.

4.5 Reactive, isolation, observe, html, …

Garder la même application et

  • ajouter un actionButton combiné à un isolate pour mettre à jour l’application uniquement lorsque l’utilisateur clique sur le bouton.

  • Utiliser observeEvent pour forcer l’apparition de l’histogramme lorsqu’on met à jour l’application. On pourra utiliser

    # think to add  "session" 
shinyServer(function(input, output, session)

# an id 
tabsetPanel(id = "viz", 
  tabPanel("Histogram", ...

# and finaly
observeEvent(input$go, {
updateTabsetPanel(session, inputId = "viz", selected = "Histogram")
})

  • Utiliser reactivepour stocker la variable sélectionnée

    # Example of reactive
data <- reactive({
  ...
})

output$plot <- renderPlot({
  x <- data()
  ...
})

  • Ajouter un titre en bleu sur le jeu de données. On pourra utiliser h1

    h1("Dataset", style = "color : #0099ff;text-align:center")

  • Ajouter un troisième onglet pour présenter un résumé de votre Uinersité, avec un logo de l’institution et un lien vers son site web.

  • Pour aller plus loin : changer le thème de l’application avec un fichier de style .css. On pourra par exemple utiliser bootswatch http://bootswatch.com/3.

L’application finale pourra ressembler à

Elle est également disponible ici https://plus-loin-rouviere-shiny-2.apps.math.cnrs.fr/.

4.6 Exercices complémentaires

Exercice 4.3 (Une application simple descriptive) On considère le jeu de données SAheart du package bestglm.

  1. A l’aide du package rAmCharts, représenter les histogrammes des variables quantitatives du jeu de données ainsi que les boxplots de ces variables en fonction de la variable chd.

  2. Créer une application shiny avec shinydashboard qui permette de

    • choisir une variable parmi les variables quantitatives du jeu de données. On pourra utiliser radioButtons avec l’argument
    choices=names(SAheart)[sapply(SAheart,class)=="numeric"]
    • visualiser l’histogramme, puis le boxplot en fonction de chd de la variable sélectionnée. Ces graphiques devront être faits avec rAmCharts. On pourra utiliser amChartsOutput. L’application demandée pourra ressembler à

Elle est disponible ici https://lrouviere.shinyapps.io/DESC_APP.

Exercice 4.4 (Stations velib à Rennes) Réaliser une application qui permette de visualiser les stations velib à Rennes. Elle pourra être du même genre que celle-ci :

On peut avoir une meilleure vision ici : https://lrouviere.shinyapps.io/velib/. On récupérera les données sur le site de Rennes métropole : https://data.rennesmetropole.fr/explore/dataset/etat-des-stations-le-velo-star-en-temps-reel/export/