Dossier Data

• Fonction : Le dossier ‘data’ est essentiel pour stocker les jeux de données utilisés par votre application.
• Contenu : Il peut contenir divers formats de fichiers, tels que CSV, RData, ou tout autre format que R peut lire et importer.
• Rôle : Ces données sont cruciales pour le fonctionnement de l’application, car elles constituent la base des analyses et des visualisations.

Dossier WWW

• Fonction : Le dossier ‘www’ est destiné aux fichiers statiques nécessaires pour l’interface de l’application.
• Contenu : Il peut inclure des feuilles de style CSS, des scripts JavaScript, et des images.
• Accès : Les éléments de ce dossier sont accessibles par le serveur Shiny et peuvent être intégrés dans l’application pour améliorer l’expérience utilisateur et l’interface visuelle.

app.R

• Description : Ce script représente généralement le cœur de l’application Shiny, contenant les scripts UI et Server.

global.R

• Fonction : Le script ‘global’ joue un rôle crucial dans le chargement des configurations.
• Utilisation : Il charge des fichiers contenant des paramètres qui influencent le comportement de l’application et sa connexion à d’autres services ou bases de données.

packages.R

• Fonction : Ce script est dédié à la gestion des packages.
• Rôle : Les packages sont des ensembles de fonctions supplémentaires qui peuvent être intégrés dans l’application pour étendre ses fonctionnalités ou pour faciliter certaines tâches de programmation.

Créer une app dans R Studio

Pour créer une application de base dans RStudio avec Shiny, suivez ces étapes :

1. Ouvrir RStudio : Assurez-vous d’avoir RStudio installé sur votre ordinateur.

2. Installer et charger le package Shiny : Si vous n’avez pas déjà installé le package Shiny, vous pouvez le faire en exécutant :

   install.packages("shiny")

   Après l’installation, chargez le package en exécutant :

   library(shiny)

3. Créer une nouvelle application Shiny :

   • Allez dans le menu File > New File > Shiny Web App...
   • Donnez un nom à votre application.
   • Choisissez l’emplacement où vous souhaitez enregistrer l’application.
   • Sélectionnez le type d’application (par exemple, “Single File (app.R)”).

4. Rédiger le code de l’application :

   • RStudio va générer un fichier app.R avec un exemple de code.
   • Modifiez ce code pour créer votre propre UI et logique serveur. Par exemple :

   ui <- fluidPage(
       titlePanel("Mon Application Shiny"),
       sidebarLayout(
           sidebarPanel(
               sliderInput("slider", "Choisissez un nombre", 1, 100, 50)
           ),
           mainPanel(
               textOutput("result")
           )
       )
   )
   
   server <- function(input, output) {
       output$result <- renderText({ paste("Vous avez choisi", input$slider) })
   }
   
   shinyApp(ui = ui, server = server)

5. Exécuter l’application :

   • Cliquez sur le bouton Run App dans le coin supérieur droit de l’éditeur de script.

6. Tester et ajuster :

   • Votre navigateur web devrait s’ouvrir avec votre application Shiny en cours d’exécution.
   • Testez l’application et apportez les modifications nécessaires dans RStudio.

7. Développer davantage :

   • Ajoutez plus de fonctionnalités, des visualisations, ou connectez-vous à des bases de données selon les besoins de votre projet.

En suivant ces étapes, vous pouvez créer et tester votre propre application web interactive en utilisant R Shiny directement dans RStudio.

Minimum pour afficher une page

Pour afficher une page de base dans une application web avec R Shiny, le code minimum requis se compose de trois parties principales : la définition de l’interface utilisateur (ui), la logique du serveur (server), et l’exécution de l’application (shinyApp).

Voici un exemple de code minimal :

# Charger le package Shiny
library(shiny)

# Définir l'interface utilisateur
ui <- fluidPage(
    # Éléments de l'interface utilisateur peuvent être ajoutés ici
)

# Définir la logique du serveur
server <- function(input, output) {
    # Logique de traitement des données et de réactivité
}

# Exécuter l'application
shinyApp(ui = ui, server = server)

Dans cet exemple :

• fluidPage() : Crée une page web responsive qui s’adapte à la taille de l’écran de l’utilisateur. Vous pouvez y ajouter divers composants, comme des textes, des graphiques, des tableaux, etc.

• server <- function(input, output) {} : C’est ici que vous définirez la logique de votre serveur. Cette fonction traite les entrées de l’utilisateur (input) et produit des sorties (output).

• shinyApp(ui, server) : Cette fonction lance l’application en combinant l’interface utilisateur et la logique serveur que vous avez définies.

Ce code est le squelette de base pour une application Shiny. Pour créer une application fonctionnelle, vous ajouterez des éléments à l’interface utilisateur (ui) et définirez la logique de traitement des données dans la fonction server.

Pour rendre le cours plus logique et structuré, je vais réorganiser le contenu en mettant en avant les éléments UI de base en R Shiny, suivis par une explication détaillée de chaque élément. Voici la version révisée :

Control Panels

Les “Control Panels” sont des éléments fondamentaux pour interagir avec l’utilisateur.

Ils se composent généralement de sidebarPanel(), qui permet d’ajouter une barre latérale à l’interface. Cette barre latérale est idéale pour inclure divers widgets de contrôle, tels que des curseurs, des sélecteurs d’options, des boutons et bien d’autres éléments interactifs. Ces widgets facilitent la saisie de données et la manipulation des visualisations ou des analyses affichées dans l’application.

En outre, l’utilisation conjointe de fluidRow() et column() permet de structurer de manière flexible l’agencement de l’interface en lignes et colonnes, offrant ainsi une mise en page réactive et organisée.

1. sidebarPanel() :
   • Utilisation : Ajout d’une barre latérale avec des widgets de contrôle (curseurs, sélecteurs, etc.).
   • Exemple : sidebarPanel("sidebar panel").
2. fluidRow() et column() :
   • Utilisation : Structuration du layout en lignes et colonnes pour un design responsive.
   • Exemple : Inclus implicitement dans fluidPage.

Création d’une Interface Utilisateur de Base :

# Définition de l'interface utilisateur
ui <- fluidPage(
  titlePanel("title panel"),  # Titre
  sidebarLayout(              # Layout avec barre latérale
    sidebarPanel("sidebar panel"),
    mainPanel("main panel")
  )
)

# Logique du serveur (vide dans cet exemple)
server <- function(input, output) {}

# Lancement de l'application
shinyApp(ui = ui, server = server)

Éléments UI Divers pour le Texte

Les éléments UI pour le texte offrent une variété d’options pour présenter et structurer le contenu.

Les en-têtes, de h1() à h6(), permettent de créer des titres de différents niveaux, organisant le contenu de manière hiérarchique. Le tag p() est utilisé pour ajouter des paragraphes standards, tandis que a() crée des liens hypertextes pour connecter à des URL externes.

Pour une séparation visuelle, br() insère des sauts de ligne. Les tags div() et span() sont essentiels pour regrouper et styler du texte, respectivement pour des blocs et des éléments en ligne. pre() et code() sont spécialement utiles pour afficher du texte préformaté et des lignes de code.

Enfin, pour mettre l’accent, strong() et em() sont utilisés pour le texte en gras et en italique, respectivement. Ces éléments contribuent à enrichir l’expérience utilisateur en offrant une variété de méthodes pour afficher et structurer le texte dans les applications Shiny.

1. En-têtes (Headers) :
   • h1() à h6() : Créent des en-têtes de différents niveaux pour organiser le contenu hiérarchiquement.
2. Paragraphe (Paragraph) :
   • p() : Ajoute un paragraphe de texte standard.
3. Lien hypertexte (Hyperlink) :
   • a(href = "https://www.example.com", "Texte") : Crée un lien vers une URL externe.
4. Saut de ligne (Line Break) :
   • br() : Insère un saut de ligne.
5. Division (Division) :
   • div() : Regroupe et style du contenu.
6. En ligne (Span) :
   • span() : Pour le styling d’éléments inline.
7. Texte préformaté (Preformatted Text) :
   • pre() : Affiche du texte dans une police à largeur fixe.
8. Code :
   • code() : Pour afficher des lignes de code.
9. Image :
   • img(src = "path_to_image.jpg", alt = "Description") : Affiche une image.
10. Texte en gras (Bold Text) :
    • strong() : Met en évidence un texte en gras.
11. Texte en italique (Italic Text) :
    • em() : Met en évidence un texte en italique.

# Interface utilisateur avec divers éléments de texte
ui <- fluidPage(
  h1("En-tête de niveau 1"),
  h2("En-tête de niveau 2"),
  p("Ceci est un paragraphe de texte dans Shiny."),
  a(href = "https://www.example.com", "Ceci est un lien hypertexte"),
  br(),
  div("Ceci est une division de texte avec un style uniforme."),
  span("Ceci est une division en ligne de texte avec un style uniforme."),
  pre("Ceci est du texte ‘tel quel’ dans une police à largeur fixe."),
  code("x <- 1:10"),
  img(src = "path_to_image.jpg", alt = "Description de l'image"),
  strong("Ceci est du texte en gras."),
  em("Ceci est du texte en italique.")
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Exercice 1

Reproduire une interface utilisateur identique à l’image de “My shiny App”.

Interface Utilisation à Reproduire

Correction exercice 1

Exercice 2

Définir un canva pour l’application sur les données CRIMES LA

Layout

• fluidPage() : Crée une page responsive
• fluidRow() : Organise le contenu en lignes horizontales.
• column(6, ...) : Chaque appel à column() crée une colonne occupant la moitié de l’espace de la grille (6 sur 12 colonnes). Vous y placez les éléments UI tels que des en-têtes (h3) et des paragraphes (p).

library(shiny)

ui <- fluidPage(
  titlePanel("Exemple de Fluid Page avec 2 Colonnes"),
  
  # Utilisation de fluidRow pour organiser les colonnes
  fluidRow(
    # Première colonne
    column(6, 
           h3("Colonne 1"),
           p("Contenu de la première colonne")
    ),
    # Deuxième colonne
    column(6,
           h3("Colonne 2"),
           p("Contenu de la deuxième colonne")
    )
  )
)

server <- function(input, output) {}

# shinyApp(ui = ui, server = server)

Widgets d’entrée (Inputs)

Chaque widget d’entrée dans Shiny a une fonction correspondante dans le serveur Shiny pour traiter les entrées de l’utilisateur.

• textInput() : Permet à l’utilisateur de saisir du texte.
• numericInput() : Pour la saisie de valeurs numériques.
• sliderInput() : Un curseur pour sélectionner une gamme de valeurs.
• selectInput() : Un menu déroulant pour choisir une option.
• checkboxInput() et checkboxGroupInput() : Pour effectuer des sélections à l’aide de cases à cocher.
• radioButtons() : Pour permettre à l’utilisateur de choisir une option parmi plusieurs.

library(shiny)

# UI definition
ui <- fluidPage(
  # Layout
  titlePanel("Exemple d'Application Shiny"),
  sidebarLayout(
    sidebarPanel(
      # Input widgets
      textInput("text_input", "Entrez du texte :"),
      br(),
      numericInput("num_input", "Entrez un nombre :", 1),
      br(),
      sliderInput("slider_input", "Choisissez une valeur :", 
                  min = 1, max = 100, value = 50),
      br(),
      selectInput("select_input", "Choisissez une option :", 
                  choices = c("Option 1", "Option 2", "Option 3")),
      br(),
      checkboxGroupInput("checkbox_input", "Sélectionnez :", 
                         choices = c("Choix 1", "Choix 2", "Choix 3")),
      br(),
      radioButtons("radio_input", "Sélectionnez une option :", 
                   choices = c("Option A", "Option B", "Option C"))
    ),
    mainPanel(
    )
  )
)

# Server logic
server <- function(input, output) {
  
}

# Run the application
# shinyApp(ui = ui, server = server)

En résumé

La mise en page, quant à elle, est cruciale pour organiser visuellement les éléments UI et les rendre intuitifs et accessibles pour l’utilisateur.

Widgets de Sortie (outputs)

Grâce aux fonctions d’affichage, les données sont affichées sous différentes formes dans l’UI. Le tableau suivant couvre les types de sorties les plus couramment utilisés dans Shiny.

Chaque type de sortie est conçu pour afficher un type spécifique de contenu, allant des tables de données et des graphiques aux éléments HTML et aux liens de téléchargement.

library(shiny)

# UI definition
ui <- fluidPage(
  
  titlePanel("Exemple d'Application Shiny"),
  
  sidebarLayout(
    sidebarPanel(
      br(),
      textInput("text_input", "Entrez du texte :"),
      br()
    ),
    mainPanel(
      h3("Résultats :"),
      br(),
      # la sortie affichée à l'utilisateur sera sous la forme d'un verbatim 
      verbatimTextOutput("text_renvoye_output")
    )
  )
)

# Server logic
server <- function(input, output) {
  
  # Dans le server est définie une variable d'output "text_renvoye_output"
  # Dans le corps de cette variable, l'input "text_input" est utilisé 
  # pour générer un texte concaténé
  
  output$text_renvoye_output <- renderText({
    paste("Texte entré :", input$text_input)
  })
  
}

# Run the application
# shinyApp(ui = ui, server = server)

library(shiny)

ui <- fluidPage(
  titlePanel("Dynamic UI based on selectInput"),
  
  sidebarLayout(
    sidebarPanel(
      # A gauche sont définies les options qui sont vues par l'utilisateur. 
      # Ces options sont utilisés côté server à partir des variables définies à droite
      selectInput("select_input", 
                  "Choisissez une option :", 
                  choices = list("Option 1" = "value1", 
                                 "Option 2" = "value2", 
                                 "Option 3" = "value3"))
    ),
    mainPanel(
      uiOutput("dynamicOutput")
    )
  )
)

server <- function(input, output) {
  
  # En fonction de l'option choisie (input$select_input),
  # un message spécifique est renvoyé à l'aide d'un switch
  
  output$dynamicOutput <- renderUI({
    switch(input$select_input,
           "value1" = p("Vous avez sélectionné l'Option 1."),
           "value2" = p("Vous avez sélectionné l'Option 2."),
           "value3" = p("Vous avez sélectionné l'Option 3."),
           p("Sélectionnez une option."))
  })
}

# Run the application 
# shinyApp(ui = ui, server = server)

Les fonctions “render”

Dans les applications Shiny, les fonctions render sont essentielles pour créer des éléments de sortie réactifs.

Le tableau suivant offre une vue d’ensemble claire des différentes fonctions de rendu disponibles dans Shiny, vous permettant de choisir facilement la fonction appropriée en fonction de vos besoins en matière de visualisation et d’interface utilisateur.

En résumé

Chaque fonction renderprend une expression R entourée d’accolades {} comme argument. Cette expression peut aller d’une simple ligne de code à un bloc de code plus complexe.

Lien entre UI et server

Dans une application Shiny, le lien entre l’interface utilisateur (UI) et le serveur est crucial pour créer des applications interactives.

library(shiny)

ui <- fluidPage(
  titlePanel("Checkbox Input Example"),
  
  sidebarLayout(
    sidebarPanel(
      # Single checkbox
      checkboxInput("check", "Check to see text", value = FALSE)
    ),
    mainPanel(
      uiOutput("dynamicText")
    )
  )
)
server <- function(input, output) {
  
  output$dynamicText <- renderUI({
    if(input$check) {
      # Output quand checkbox est sélectionnée
      p("The checkbox is checked!")
    } else {
      # Output quand checkbox n'est pas sélectionnée
      p("The checkbox is not checked.")
    }
  })
}

# Run the application 
# shinyApp(ui = ui, server = server)

library(shiny)
library(DT)

ui <- fluidPage(
  titlePanel("Exemple d'Application avec Divers Widgets de Sortie"),
  
  sidebarLayout(
    sidebarPanel(
      # Widget d'entrée nécessaire pour 'input$selection'
      textInput("selection", "Entrez votre sélection :")
    ),
    mainPanel(
      # Affichage des résultats des fonctions render*
      dataTableOutput("dataTable"),
      imageOutput("image"),  # Correction ici
      plotOutput("plot"),
      verbatimTextOutput("print"),
      tableOutput("table"),
      textOutput("text"),
      uiOutput("dynamicUI")
    )
  )
)

  
server <- function(input, output) {
  # Pour renderDataTable
  output$dataTable <- renderDataTable({
    DT::datatable(mtcars)
  })
  
  # Pour renderImage
  output$image <- renderImage({
    list(src = 'C:/Users/Menyssa/Documents/Cours/R-Shiny/Images/data.png',
         contentType = 'image/png', width = 400, height = 300)
  }, deleteFile = FALSE)
  
  # Pour renderPlot
  output$plot <- renderPlot({
    plot(cars)
  })
  
  # Pour renderPrint
  output$print <- renderPrint({
    summary(cars)
  })
  
  # Pour renderTable
  output$table <- renderTable({
    head(cars)
  })
  
  # Pour renderText
  output$text <- renderText({
    paste("Sélection actuelle :", input$selection)
  })
  
  # Pour renderUI
  output$dynamicUI <- renderUI({
    actionButton("button", "Cliquez-moi")
  })
}

# shinyApp(ui = ui, server = server)

Définition

Une expression réactive dans Shiny est une expression R qui est automatiquement re-calculée lorsque les entrées dont elle dépend changent.

Cela signifie que si vous avez un calcul lourd qui dépend de l’entrée de l’utilisateur, il ne sera recalculé que si cette entrée change, réduisant ainsi le temps de chargement et améliorant l’expérience utilisateur.

Avantages

• Performance améliorée : Seuls les calculs nécessaires sont effectués.
• Code plus propre et plus facile à maintenir : Sépare la logique de calcul de la logique d’affichage.
• Prévention des calculs redondants : Évite de recalculer les mêmes données.

Utilisation

Pour utiliser une expression réactive, vous l’encapsulez dans la fonction reactive().

Cette fonction retourne un objet réactif qui peut ensuite être utilisé dans d’autres parties de votre application Shiny.

Voici un exemple simple illustrant l’utilisation d’une expression réactive dans une application Shiny :

!! ATTENTION !! : Le resultat de données réactive s’utilise toujours avec des ().

library(shiny)
library(DT)

ui <- fluidPage(
  
  titlePanel("Utilisation des Expressions Réactives dans Shiny avec un Jeu de Données"),
  
  sidebarLayout(
    sidebarPanel(
      sliderInput("number", 
                  "Choisissez un nombre:", 
                  min = 1, 
                  max = 100, 
                  value = 50),
      
      selectInput("cylinders", 
                  "Nombre de cylindres :", 
                  choices = unique(mtcars$cyl), 
                  selected = unique(mtcars$cyl)[1])
    ),
    mainPanel(
      textOutput("result"),
      br(), 
      br(),
      DTOutput("tableFiltered")
    )
  )
)

server <- function(input, output) {
  # Expression réactive pour le calcul
  reactiveNumber <- reactive({
    input$number * 2
  })
  
  # Expression réactive pour filtrer les données
  filteredData <- reactive({
    mtcars[mtcars$cyl == input$cylinders, ]
  })
  
  output$result <- renderText({
    paste("Le double du nombre est :", reactiveNumber())
  })
  
  output$tableFiltered <- renderDT({
    filteredData()
  })
}

# shinyApp(ui = ui, server = server)

library(shiny)
library(DT)
library(tidyverse)

# Définition de l'interface utilisateur
ui <- fluidPage(
  titlePanel("Exploration des données mtcars"),
  
  sidebarLayout(
    sidebarPanel(
      helpText("Utilisez les contrôles ci-dessous pour filtrer les données."),
      
      sliderInput("mpgInput", "Miles per gallon (mpg)", 
                  min = min(mtcars$mpg, na.rm = TRUE), 
                  max = max(mtcars$mpg, na.rm = TRUE), 
                  value = c(min(mtcars$mpg, na.rm = TRUE), 
                            max(mtcars$mpg, na.rm = TRUE))),
      
      selectInput("cylInput", "Nombre de cylindres", 
                  choices = unique(mtcars$cyl), 
                  selected = unique(mtcars$cyl)[1],
                  multiple = TRUE),
      
      selectInput("gearInput", "Nombre de vitesses", 
                  choices = unique(mtcars$gear), 
                  selected = unique(mtcars$gear)[1],
                  multiple = TRUE)
    ),
    
    mainPanel(
      DTOutput("table"),
      plotOutput("mpgPlot")
    )
  )
)

# Définition de la logique serveur
server <- function(input, output) {
  
  # Filtrer les données en fonction des entrées
  filteredData <- reactive({
    mtcars %>%
      filter(mpg >= input$mpgInput[1], mpg <= input$mpgInput[2],
             cyl %in% input$cylInput,
             gear %in% input$gearInput)
  })
  
  # Affichage de la table
  output$table <- renderDT({
    filteredData()
  })
  
  # Graphique de mpg
  output$mpgPlot <- renderPlot({
    
    data <- filteredData()
    
    ggplot(data, aes(x = mpg, fill = factor(cyl))) +
      geom_histogram(binwidth = 1) +
      theme_minimal() +
      labs(title = "Distribution de MPG par Cylindre", x = "MPG",
           fill = "Cylindres")
  })
}

# Lancer l'application
# shinyApp(ui = ui, server = server)

Exercice 3

Reproduire l’UI suivante

Interface Utilisateur à reproduire

Correction exercice 3

Exercice 4

Objectif : Développer une application simple pour les données hdv2003 du package (questionr). Voici un squelette d’application pour commencer.

Étape 1 : Installation et Chargement des Packages

# Installation des packages nécessaires
install.packages("shiny")
install.packages("questionr")
install.packages("DT")
install.packages("ggplot2")

# Chargement des packages
library(shiny)
library(questionr)
library(DT)
library(ggplot2)

# Chargement des données
data(hdv2003, package = "questionr")

Étape 2 : Création de l’Interface Utilisateur (UI)

ui <- fluidPage(
    titlePanel("Analyse des Données hdv2003"),

    sidebarLayout(
        sidebarPanel(
            # Widgets pour le filtrage des données
            # (ajouter selectInput, sliderInput, etc. selon les besoins)
            
            helpText("Utilisez les contrôles pour filtrer les données et visualiser les statistiques.")
        ),
        mainPanel(
            # Affichage des données filtrées
            dataTableOutput("tableData"),

            # Affichage des graphiques
            plotOutput("plot"),

            # Affichage des statistiques
            verbatimTextOutput("stats")
        )
    )
)

Étape 3 : Logique du Serveur

server <- function(input, output) {
    # Logique pour l'affichage des données
    output$tableData <- renderDataTable({
        # Appliquer le filtrage ici si nécessaire
        DT::datatable(hdv2003)
    })

    # Logique pour la visualisation graphique
    output$plot <- renderPlot({
        # Générer le graphique en fonction des entrées utilisateur
        # Par exemple, un histogramme de l'âge
    })

    # Logique pour le résumé statistique
    output$stats <- renderPrint({
        # Calculer et afficher les statistiques en fonction des entrées utilisateur
    })
}

Étape 4 : Lancement de l’Application

shinyApp(ui = ui, server = server)

Conseils

• Filtrage des Données : Utilisez les widgets d’entrée pour permettre aux utilisateurs de sélectionner des critères de filtrage. Appliquez ces critères dans renderDataTable() et renderPlot() pour mettre à jour les visualisations et les tables.

• Visualisation Graphique : Utilisez ggplot2 pour créer des graphiques basés sur les données filtrées. Par exemple, créez un histogramme de l’âge ou un diagramme en barres des catégories socio-professionnelles.

• Résumé Statistique : Calculez des statistiques descriptives comme la moyenne, la médiane et l’écart-type pour les données filtrées et affichez-les avec renderPrint().

• Interactivité Réactive : Assurez-vous que les modifications des widgets d’entrée déclenchent une mise à jour des tables, des graphiques et des statistiques.

• Documentation et Aide : Ajoutez helpText ou des commentaires dans l’UI pour guider les utilisateurs sur la manière d’interagir avec l’application.

Correction exercice 4

TabsetPanel

Le tabsetPanel est un élément clé pour organiser le contenu dans des onglets horizontaux. Cette méthode de présentation est utile pour afficher différentes sections de contenu sans surcharger l’interface utilisateur.

Voici un exemple de la structure de base d’un tabsetPanel :

ui <- fluidPage(
    tabsetPanel(
        tabPanel("Onglet 1", 
                 # Contenu de l'onglet 1
        ),
        tabPanel("Onglet 2", 
                 # Contenu de l'onglet 2
        )
        # Ajouter plus d'onglets si nécessaire
    )
)

Chaque tabPanel dans le tabsetPanel représente un onglet distinct, permettant aux utilisateurs de basculer entre différents contenus.

Personnalisation

Comme pour les autres éléments de Shiny, il est possible d’ajouter des icônes à vos tabPanel au sein des tabsetPanel en utilisant la fonction icon(). Les icônes rendent l’interface plus intuitive et visuellement attrayante.

Exemple Simple avec Onglets Horizontaux Un exemple simple de tabsetPanel peut être le suivant :

ui <- fluidPage(
    tabsetPanel(
        tabPanel("Accueil", icon = icon("home"),
                 # Contenu de l'accueil
        ),
        tabPanel("Profil", icon = icon("user"),
                 # Contenu du profil
        ),
        tabPanel("Paramètres", icon = icon("cog"),
                 # Contenu des paramètres
        )
    )
)

server <- function(input, output, session) {
    # Logique du serveur
}

# shinyApp(ui, server)

Dans cet exemple, chaque onglet est clairement identifié par une icône, facilitant la navigation pour l’utilisateur.

ui <- fluidPage(
    tabsetPanel(
        tabPanel("Graphique", 
                 plotOutput("monGraphique")
        ),
        tabPanel("Tableau", 
                 DT::dataTableOutput("monTableau")
        ),
        tabPanel("Résumé", 
                 verbatimTextOutput("monResume")
        )
    )
)

server <- function(input, output, session) {
    output$monGraphique <- renderPlot({ plot(runif(50)) })
    output$monTableau <- DT::renderDataTable({ DT::datatable(mtcars) })
    output$monResume <- renderPrint({ summary(mtcars) })
}

# shinyApp(ui, server)

ui <- fluidPage(
    navbarPage("Titre de l'application",
        tabPanel("Onglet 1", 
                 # Contenu de l'onglet 1
        ),
        tabPanel("Onglet 2", 
                 # Contenu de l'onglet 2
        )
    )
)
server <- function(input, output){
  
  output$variable <- renderTable({
    tmp <- data %>% 
      select(input$select_input) 
    head(tmp)
  })
}

# shinyApp(ui = ui, server = server)

NavLists

Le navlistPanel permet de créer une liste de navigation latérale, offrant une autre manière de structurer et de naviguer à travers différents contenus.

La structure de base d’un navlistPanel est la suivante :

ui <- fluidPage(
  
    navlistPanel(
        "Titre de la Navigation",
        tabPanel("Onglet 1", 
                 # Contenu de l'onglet 1
        ),
        br(),
        br(),
        br(),
        br(),
        tabPanel("Onglet 2", 
                 # Contenu de l'onglet 2
        )
    )
)
server <- function(input, output){
  
}

# shinyApp(ui = ui, server = server)

Dans ce cadre, chaque tabPanel représente un élément différent dans la liste de navigation.

Personnalisation

Les icônes peuvent être ajoutées à chaque élément de la liste pour améliorer l’esthétique et la compréhension de l’interface utilisateur. Utilisez la fonction icon() pour ajouter des icônes aux titres de vos onglets.

ui <- fluidPage(
    navlistPanel(
        "Navigation",
        tabPanel("Accueil", icon = icon("home"),
                 # Contenu de l'accueil
        ),
        tabPanel("Informations", icon = icon("info-circle"),
                 # Contenu des informations
        )
    )
)

server <- function(input, output, session) {
    # Logique du serveur
}

# shinyApp(ui, server)

ui <- fluidPage(
    navlistPanel(
        "Navigation Complète",
        tabPanel("Section 1", 
                 # Contenu de la section 1
                 tabsetPanel(
                     tabPanel("Sous-section 1", 
                              # Contenu de la sous-section 1
                     ),
                     tabPanel("Sous-section 2",
                              # Contenu de la sous-section 2
                     )
                 )
        ),
        tabPanel("Section 2", 
                 # Contenu de la section 2
        )
    )
)

server <- function(input, output, session) {
    # Logique du serveur
}

# shinyApp(ui, server)

Exemple 1 : Affichage d’une valeur

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(title = "Exemple de Value Box"),
    dashboardSidebar(),
    dashboardBody(
        # Création de l'espace pour la Value Box
        valueBoxOutput("myValueBox")
    )
)


server <- function(input, output) {
    output$myValueBox <- renderValueBox({
        valueBox(
            value = 123,  # La valeur à afficher
            subtitle = "Nombre total de quelque chose",
            icon = icon("check"),  # Icône (facultatif)
            color = "green"  # Couleur de la boîte (facultatif)
        )
    })
}

# shinyApp(ui, server)

Exemple 2 : Affichage d’une valeur calculée

library(shiny)
library(shinydashboard)
library(tidyverse)

ui <- dashboardPage(
    dashboardHeader(title = "Exemple de Value Box"),
    dashboardSidebar(),
    dashboardBody(
        # Création de l'espace pour la Value Box
        valueBoxOutput("hommes")
    )
)

server <- function(input, output) {
    output$hommes <- renderValueBox({
        hommes <- hdv2003 %>% 
          filter(sexe == 'Homme') %>% 
          nrow() 
        valueBox(format(hommes, big.mark = ","),
                 "Nombre d'hommes",
                 icon = icon("mars"))
    })
}
# shinyApp(ui, server)

Exemple 3 : Style Personnalisé

library(shiny)
library(shinydashboard)
library(tidyverse)

ui <- dashboardPage(
    dashboardHeader(title = "Exemple de Value Box"),
    dashboardSidebar(),
    dashboardBody(
        # Création de l'espace pour la Value Box
       valueBoxOutput("progressBox")
    )
)

server <- function(input, output) {
    # Fonction pour simuler la progression
    simulateProgress <- function() {
        Sys.sleep(1)  # Simuler un certain délai
        runif(1, min = 0, max = 100)  # Retourne une valeur aléatoire entre 0 et 100
    }

    output$progressBox <- renderValueBox({
        progress <- simulateProgress()
        valueBox(
            paste(format(round(progress, 0)), "%"),
            "Progression",
            icon = icon("line-chart"),
            color = ifelse(progress < 50, "red", "green")  # Rouge si < 50%, vert sinon
        )
    })
}

# shinyApp(ui, server)

Installer et charger le package leaflet

{r} # if (!require(leaflet)) { # install.packages("leaflet") # } # library(leaflet)}

Cette partie vérifie d’abord si le package leaflet est installé (require(leaflet)). Si ce n’est pas le cas (!require(leaflet)), il l’installe (install.packages("leaflet")). Ensuite, le package leaflet est chargé en mémoire avec library(leaflet), ce qui permet d’utiliser ses fonctions.

Voici un exemple de script pour génèrer une carte interactive sur laquelle vous pouvez zoomer et vous déplacer

Créer une carte de base

library(leaflet)

map <- leaflet() %>% 
  addTiles()  # Ajoute les tuiles de base d'OpenStreetMap

Ici, une carte de base est créée avec leaflet() et des tuiles par défaut (généralement d’OpenStreetMap) sont ajoutées avec addTiles(). Le résultat est stocké dans la variable map.

Ajouter un marqueur

library(leaflet)

map_point <- leaflet() %>%
  addTiles() %>% 
  addMarkers(lng = -0.09, lat = 51.50, popup = "The marker is placed at London")

Cette ligne ajoute un marqueur sur la carte. Le marqueur est placé à Londres (longitude -0.09, latitude 51.50), et un texte popup s’affiche lorsque vous cliquez sur le marqueur (“The marker is placed at London”).

Changer le fond de carte

Dans la bibliothèque Leaflet pour R, les “providers” font référence aux différents fournisseurs de tuiles qui offrent divers styles de cartes.

Voici une liste de certains des fournisseurs de tuiles les plus couramment utilisés disponibles via leaflet:

1. OpenStreetMap:
   • OpenStreetMap.Mapnik
   • OpenStreetMap.BlackAndWhite
   • OpenStreetMap.DE
   • OpenStreetMap.France
   • OpenStreetMap.HOT
2. Stamen:
   • Stamen.Toner
   • Stamen.TonerLite
   • Stamen.Watercolor
   • Stamen.Terrain
   • Stamen.TerrainBackground
   • Stamen.TopOSMRelief
3. Esri:
   • Esri.WorldStreetMap
   • Esri.DeLorme
   • Esri.WorldTopoMap
   • Esri.WorldImagery
   • Esri.WorldTerrain
   • Esri.WorldShadedRelief
   • Esri.WorldPhysical
   • Esri.OceanBasemap
   • Esri.NatGeoWorldMap
   • Esri.WorldGrayCanvas
4. CartoDB:
   • CartoDB.Positron
   • CartoDB.PositronNoLabels
   • CartoDB.PositronOnlyLabels
   • CartoDB.DarkMatter
   • CartoDB.DarkMatterNoLabels
   • CartoDB.DarkMatterOnlyLabels
   • CartoDB.Voyager
   • CartoDB.VoyagerNoLabels
   • CartoDB.VoyagerOnlyLabels
   • CartoDB.VoyagerLabelsUnder
5. Thunderforest:
   • Thunderforest.OpenCycleMap
   • Thunderforest.Transport
   • Thunderforest.TransportDark
   • Thunderforest.SpinalMap
   • Thunderforest.Landscape
   • Thunderforest.Outdoors
   • Thunderforest.Pioneer

Pour utiliser ces providers dans votre carte Leaflet, vous utilisez généralement la syntaxe addProviderTiles(providers$ProviderName), où ProviderName est remplacé par l’un des noms de fournisseurs listés ci-dessus.

Il est important de noter que certains fournisseurs peuvent avoir des restrictions d’utilisation ou nécessiter des clés API, comme ceux de Mapbox. Assurez-vous de consulter la documentation ou le site Web du fournisseur pour des informations plus détaillées sur l’utilisation et les restrictions.

map_point_cf <- map_point %>% 
  addProviderTiles(providers$CartoDB.Positron)

Ici, le style de la carte est changé en utilisant une tuile différente fournie par CartoDB.Positron, donnant à la carte un aspect visuel différent.

Ajouter des marqueurs supplémentaires

data <- data.frame(
  lng = c(-0.09, -0.11, -0.12), 
  lat = c(51.50, 51.52, 51.48),
  label = c("Point 1", "Point 2", "Point 3")
) 

map <- map %>% 
  addMarkers(data = data, ~lng, ~lat, popup = ~label)

Ces lignes ajoutent des marqueurs supplémentaires à la carte en utilisant les données du data.frame créé précédemment. Chaque marqueur affiche le texte correspondant dans label lorsqu’on clique dessus.

Autres exemples

Paris <- c(2.351462,48.8567)
map_paris <- leaflet() %>%
  setView(lng = Paris[1], lat = Paris[2], zoom = 12) %>% 
  addTiles() %>% 
  addProviderTiles(providers$Stamen.TonerLite)

content <- paste(sep = "<br/>", ...)

leaflet() %>% 
  addTiles() %>%
  addPopups(...)

content <- paste(sep = "<br/>",
                 "<b><a href='https://www.intelligence-artificielle-school.com/ecole/nos-campus/toulouse/'>IA School - Toulouse</a></b>",
                 "2 Bd de Strasbourg",
                 "31000 Toulouse"
)

map_ia <- leaflet() %>% 
  addTiles() %>%
  addPopups(1.4485130539619018, 43.60676750775245, 
            content, options = popupOptions(closeButton = FALSE)
  ) %>% 
  addProviderTiles(providers$Stamen.TonerLite)

Exercice 5

Créer une application R Shiny complète pour cette analyse :

“Beer or Coffee in London - Tough Choice? No more!”

https://www.kaggle.com/code/gpreda/beer-or-coffee-in-london-tough-choice-no-more

Interface Utilisateur :

• Conception : Utilisez shinydashboard pour une interface claire et professionnelle.
• Visualisation : Intégrez ggplot2 pour les graphiques et leaflet pour les cartes.
• Filtrage des Données : Ajoutez des widgets comme selectInput, dateRangeInput pour filtrer par type de crime, date, etc.
• Statistiques Résumées : Utilisez DT::datatable() pour afficher les données et summary() pour les statistiques.

Exemple de Structure de Dépôt

/mon-application-shiny
  /www
  app.R
  global.R
  README.md
  .gitignore

Installation et chargement

Tout d’abord, vous devez installer et charger le package shinythemes.

install.packages("shinythemes")
library("shinythemes")

Utilisation de thèmes prédéfinis

shinythemes offre une variété de thèmes Bootstrap prédéfinis. Vous pouvez appliquer ces thèmes à votre application Shiny en utilisant la fonction theme dans l’appel à fluidPage ou navbarPage. Par exemple, fluidPage(theme = shinytheme("flatly"), ...). Quelques thèmes populaires incluent “flatly”, “darkly”, “cerulean”, entre autres.

Themes prédéfinis

library(shiny)
library(shinythemes)

# Define UI for application that draws a histogram
ui <- fluidPage(
    theme = shinytheme("united"),
    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white',
             xlab = 'Waiting time to next eruption (in mins)',
             main = 'Histogram of waiting times')
    })
}

# Run the application 
# shinyApp(ui = ui, server = server)

ui <- fluidPage(
    theme = shinytheme("yeti"),  # Application du thème Yeti
    navbarPage("Shiny avec Yeti",
        tabPanel("Tab 1",
            h2("Contenu du Tab 1")
        ),
        tabPanel("Tab 2",
            h2("Contenu du Tab 2")
        )
    )
)

server <- function(input, output, session) {}

# shinyApp(ui, server)

On peut laisser le choix à l’utilisateur de sélectionner le thème qu’il souhaite.

ui = fluidPage(
  shinythemes::themeSelector(),  # <--- Add this somewhere in the UI
  sidebarPanel(
    textInput("txt", "Text input:", "text here"),
    sliderInput("slider", "Slider input:", 1, 100, 30),
    actionButton("action", "Button"),
    actionButton("action2", "Button2", class = "btn-primary")
  ),
  mainPanel(
    tabsetPanel(
      tabPanel("Tab 1"),
      tabPanel("Tab 2")
    )
  )
)
server = function(input, output) {}

# shinyApp(ui, server)

Structure de Base

La structure de base pour utiliser tags est la suivante :

tags$nom_de_tag(attributs, "Contenu")

• nom_de_tag : C’est le nom de l’élément HTML que vous souhaitez ajouter (par exemple, div, h1, p, a, etc.).
• attributs : Cela inclut des attributs HTML comme class, style, href pour les liens, etc.

"Contenu" : C’est le contenu à afficher dans l’élément HTML.

ui <- fluidPage(
    tags$h1("Bienvenue sur Mon Application Shiny!"),
    tags$p("Ceci est un exemple d'utilisation des tags pour ajouter des éléments HTML."),
    tags$a(href = "https://www.exemple.com", "Visitez Exemple.com")
)

Dans l’UI

• Utiliser theme, tags et CSS :

library(shiny)
library(shinythemes)

ui <- fluidPage(
    theme = shinytheme("sandstone"),  # Application du thème Sandstone
    tags$head(
        tags$style(HTML("
            .btn { 
                background-color: navy; 
                color: white; 
            }
            .btn:hover {
                background-color: skyblue;
            }
        "))
    ),
    actionButton("myButton", "Cliquez Moi")
)

server <- function(input, output, session) {}

shinyApp(ui, server)

• Utiliser div pour organiser l’UI avec des classes CSS :

  ui <- fluidPage(     
    tags$div(class = "ma-classe-css",         sliderInput("slider", "Sélectionnez une Valeur", 1, 100, 50)     ),     
    tags$div(class = "une-autre-classe",         plotOutput("monPlot")) 
    )

• Ajouter du style CSS ou des scripts JavaScript :

  ui <- fluidPage(
      tags$head(
          tags$style(HTML("
              h1 { color: blue; }
              .ma-classe-css { font-weight: bold; }
          ")),
          tags$script("alert('Bienvenue sur mon application Shiny!');")
      ),
      tags$h1("En-tête avec Style"),
      tags$div(class = "ma-classe-css", "Texte avec style personnalisé")
  )

Importer un fichier CSS

Supposons que vous ayez créé un fichier CSS nommé custom.css pour définir votre propre style. Vous pouvez l’inclure dans votre application Shiny.

library(shiny)
library(shinythemes)

ui <- fluidPage(
    theme = shinytheme("lumen"),  # Application du thème Lumen
    tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")  # Lien vers le fichier CSS personnalisé
    ),
    headerPanel("Application avec CSS Personnalisé"),
    sidebarLayout(
        sidebarPanel(
            sliderInput("slider", "Choisissez une valeur", 1, 100, 50)
        ),
        mainPanel(
            plotOutput("plot")
        )
    )
)

server <- function(input, output, session) {
    output$plot <- renderPlot({
        hist(rnorm(input$slider))
    })
}

# shinyApp(ui, server)

Dans cet exemple, custom.css devrait être placé dans le même répertoire que votre script Shiny ou dans un sous-dossier nommé www.

Livrables

• Code source de l’application Shiny sur GitHub
• Présentation de 15 min

Évaluation

Les projets seront évalués sur les critères suivants : - Fonctionnalité : Respect des exigences et fonctionnalité globale. - Qualité du code : Propreté, organisation et documentation. - Créativité et innovation dans l’approche de visualisation et d’analyse des données.