Cours Statistiques et Sciences de Données

ML Engineer - AI DevOps

@mail :armel.soubeiga@yahoo.fr

Visualisation des données : TDs et TPs

01 Dec 2021


TP#1 : Notion de viz

Tutoriel visualisation utilisant l’outil Tableau
  1. L’objectif est de créer des graphiques standard à l’aide d’un jeu de données simple et d’avoir une première expérience avec un outil de visualisation comme le Tableau.
  2. Téléchargez et installez Tableau Public (Gratuit) sur votre machine
  3. Alternative (simple) à Tableau: Polestar
Visualisation des fleurs d’iris
  1. Téléchargez le iris.csv et chargez-le dans Tableau; convertir les types de données (si nécessaire)
  2. Tracez un scatterplot avec X:sepal_length, Y:sepal_width, color:species et une ligne de tendance
  3. Enregistrez sous un onglet et enregistrez le classeur
Carte des élections
  1. Téléchargez le us-elections-history.csv et chargez-le dans Tableau; convertir les types de données (si nécessaire)
  2. Tracez une grille avec «Année» comme colonnes, «État» comme lignes et «État Gagnant» comme couleur/repères.
  3. Enregistrer sous un onglet
  4. Tracez une géo-carte avec les couleurs gagnantes en 2012 Latitude (générée) et Longitude (générée), avec État comme formes et couleur ATTR([État Gagnant])
  5. Enregistrez sous un onglet et enregistrez le classeur

Supplément

Visualisations des marchés boursiers
  1. Téléchargez le stocks.csv et chargez-le dans Tableau; convertir les types de données (si nécessaire)
  2. Tracez un graphique à lignes multiples au fil du temps, pour toutes les actions dans une couleur différente, regroupées par société
  3. Tracez un histogramme groupé (sociétés en catégories, regroupées par année ou par sociétés)
  4. Votre propre carte!
  5. Enregistrez sous un onglet et enregistrez le classeur
Ensemble de données mondial Superstore
  1. Téléchargez le Global-Superstore-Orders-2016.xlsx et chargez-le dans Tableau; joindre des ensembles de données (si nécessaire)
  2. Trouvez une histoire / sélection intéressante avec cet ensemble de données
  3. Créez un tableau de bord et expliquez votre histoire/constatation
  4. BONUS: ajouter une narration (fonction Tableau)
  5. BONUS:rejoindre d’autres ensembles de données (par exemple, les personnes, ..)
Lectures


TP#2 et correction : Utilisation de d3 avec R

Dans ce TP#2, nous écrirons notre code dans un fichier .js séparé, mais nous l’exécuterons dans un bloc R Script pour le prévisualiser (cependant, il est également possible de prévisualiser votre code directement à partir du script comme nous l’avons vu dans le cours, mais cela manière, espérons-le, vous montrera à quel point vous pouvez facilement inclure des visualisations D3 dans tous vos développement avec R).

Donc, nous allons commencer par créer deux fichiers :

  • Un document R Script : scoobydoo.R
  • Un scénario D3 : scoobydoo.js

Pour garantir que les fichiers peuvent interagir les uns avec les autres, je recommande de travailler dans un projet RStudio (Fichier > Nouveau projet) avec les deux fichiers au même niveau .Rproj.

Installation des packages

Vous devrez installer certains packages pour les étapes de nettoyage des données sur R, que vous pouvez installer avec cette ligne de code :

# => installation des packages

install.packages(c("dplyr", "lubridate", "r2d3", 
                   "stringr", "tidyr", "tidytuesdayR"))
                   
 # => Chargement des packages installés

library("dplyr")
library("tidyr")
library("stringr")
library("lubridate")
Nettoyage des données dans R

Dans votre fichier .R, vous pouvez copier les étapes suivantes pour lire les données et les nettoyer en vue de notre visualisation D3. Vous pouvez télécharger les données que nous utiliserons manuellement à partir d’ ici scoobydoo.csv si vous préférez les lire à partir d’un fichier CSV.

# => Charger les données depuis tidytuesday

tuesdata = tidytuesdayR::tt_load(2021, week = 29)
scoobydoo = tuesdata$scoobydoo
                   
 # => Nettoyage et mise en forme des données

monsters_caught = scoobydoo %>%
  select(date_aired, starts_with("caught")) %>%
  mutate(across(starts_with("caught"), ~ as.logical(.))) %>%
  pivot_longer(cols = caught_fred:caught_not,
               names_to = "character",
               values_to = "monsters_caught") %>%
  drop_na()  %>%
  filter(!(character %in% c("caught_not", "caught_other"))) %>%
  mutate(year = year(date_aired), .keep = "unused") %>%
  group_by(character, year) %>%
  summarise(caught = sum(monsters_caught),
            .groups = "drop_last") %>%
  mutate(
    cumulative_caught = cumsum(caught),
    character = str_remove(character, "caught_"),
    character = str_to_title(character),
    character = recode(character, "Daphnie" = "Daphne"))

Je recommande de visualier les données monsters_caught, car cela vous aidera à mieux comprendre le code D3 plus tard. Vous verrez qu’il y a 5 colonnes, character qui contiennent les noms de nos membres de Mystery Inc. (Daphne, Fred, Scooby, Shaggy et Velma) ; year qui contient des années entre 1969 et 2021 obtenues à partir du moment où l’épisode a été diffusé ; caught qui contient combien de monstres ont été capturés pour chaque membre mystère chaque année et cumulative_caught qui est la somme cumulée de monstres capturés pour chaque membre.

Nous allons ajouter une dernière colonne qui contiendra une couleur unique pour chaque caractère, afin que notre graphique en courbes soit un peu plus joli. Les couleurs sont représentées par des codes hexadécimaux obtenus à partir des illustrations officielles des personnages.

# => Configuration des couleurs pour chaque personnage

character_hex = tribble(
  ~ character, ~ color,
  "Fred", "#76a2ca",
  "Velma", "#cd7e05",
  "Scooby", "#966a00",
  "Shaggy", "#b2bb1b",
  "Daphne", "#7c68ae"
)

monsters_caught = monsters_caught %>% 
  inner_join(character_hex, by = "character")
Utilisation de l’API r2d3

Nous allons en fin ajouter la ligne de code suivante. La fonction r2d3() vous permet de communiquer avec notre script scoobydoo.js en utilisant les données monsters_caught que nous avons créé dans R. Comme notre script est actuellement vide, rien ne s’affiche lorsque vous exécutez cette ligne.

library("r2d3")
r2d3(data = monsters_caught,
     script = "scoobydoo.js",
     d3_version = "5")
Vos premières lignes de D3

Bon, ajoutons mainteant du code à notre script D3. Nous commençons par définir certaines variables en tant que constantes. Notamment, la largeur et la hauteur du tracé, ainsi que la taille de police. Définir ces constantes tout au début, les rend faciles à trouver et à modifier.

// in scoobydoo.js

// configuration des constantes utilisées tout au long du script

const margin = {top: 80, right: 100, bottom: 40, left: 60}
const plotWidth = 800 - margin.left - margin.right
const plotHeight = 400 - margin.top - margin.bottom

const lineWidth = 3
const mediumText = 18
const bigText = 28

Les attributs sont un autre concept important. Par exemple, un élément SVG a un certain nombre de propriétés et celles-ci peuvent être définies en tant qu’attributs. Par exemple, ici, nous définissons l’attribut width du SVG comme la largeur de notre tracé.

// définition la largeur et la hauteur de l'élément svg (tracé + marge)

svg.attr("width", plotWidth + margin.left + margin.right)
   .attr("height", plotHeight + margin.top + margin.bottom)

Enfin, nous créons un groupe qui représentera le tracé à l’intérieur de notre élément SVG.

//création d'un groupe de tracés

let plotGroup = svg.append("g")
                   .attr("transform",
                         "translate(" + margin.left + "," + margin.top + ")")
Graphique en courbe

Maintenant, nous devons reformater légèrement nos données pour pouvoir créer un graphique en courbes avec plusieurs lignes. Chaque ligne représentera un membre de Mystery Inc., nous souhaitons donc créer une structure arborescente hiérarchique avec les données de chaque caractère.

Obtenez les fichiers finaux .R et .js

Lectures


TP#3 : Développement d’un tableau de bord avec des graphiques interactifs

Au regard des technologies dont nous disposons, les explorations de données et les rendus d’analyses statistiques se veulent désormais dynamiques. Sous R, vous allez pouvoir construire des applications Web (dites WebApps) grâce à l’utilisation de Shiny. Le développement de WebApps Shiny est très bien détaillé sur internet. Il existe de nombreux tutoriaux et exemples sur le site web, la communauté est très dynamique et l’évolution du code est continue.

Pre-requis : le TP est conçu pour être réalisé à l’aide de RStudio et du package Shiny. Avant de commencer, vérifier que ce dernier est bien installé dans sur votre machine.

Exercice 1 : Vanilla Shiny WebApp

Dans ce premier exercice nous souhaitons créer une première application web (voir ci-après) à partir de l’IDE RStudio.

1 - Ouvrez RStudio. À l’intérieur d’un nouveau projet, créez une nouvelle application Shiny. Nommez-la par exemple Vanilla. Vous pouvez choisir un unique fichier contenant la partie UI et la partie SERVER, soit choisir plusieurs fichiers. Pour plus de clareté dans votre code, il est conseillé d’utiliser les fichiers multiples. Note : Par la suite nous supposons que l’étudiant a fait ce choix.

2 - Ouvrez le dossier créé par RStudio. Explorez les deux fichiers ui.R et server.R. Sans surprise, la logique et la description de l’interface utilisateur est contenue dans le fichier ui.R, alors que le backend est contenu dans le fichier server.R. Dans ui.R, nous retrouvons

  • des éléments de structuration de la page web, inspirés du framework CSS/js Bootstrap comme par exemple fluidPage(), sidebarLayout() et mainPanel();
  • des éléments graphiques statiques, comme par exemple le texte ou titlePanel();
  • des éléments de saisie, comme sliderInput();
  • des éléments de rendu dynamique, comme plotOutput(). Dans server.R, nous retrouvons la lecture/génération des données, et surtout les méthodes de construction d’éléments dynamiques qui sont ensuite rendus par l’interface.

Les liasons entre ui.R et server.R se font à partir des clés d’identification, respectivement passées depuis et vers les objets input et output.

Par exemple, pour récupérer le nombre de bins dans la partie server.R il faut utiliser input$bins puisque l’input est déclaré par

# ui.R

sliderInput(inputId = "bins",
            ...)

Aussi, plotOutput("distPlot") affiche le contenu rendu par la fonction renderPlot et dont le résultat est stocké dans l’objet output avec

# server.R

output$distPlot <- renderPlot(...)

3 - Lancez directement l’application en cliquant sur le bouton Run App lorsque vous avez un de ces fichiers ouvert.

4 - Observez qu’en faisant varier le nombre de bins, l’histogramme est alors bien rendu dynamiquement.

Exercice 2 : Créez un tableau de bord interactif avec Shiny, Flexdashboard et Plotly

1 - Étape 1. Créer une mise en page Flexdashboard Initialisez un Flexdashboard à partir de R Studio en utilisant Fichier> Nouveau fichier> R markdown> À partir d'un modèle> Tableau de bord Flex, enregistrez et tricotez le document.

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill

    ---

    ```{r setup, include=FALSE}
    library(flexdashboard)
    ```

    Column {data-width=650}
    -----------------------------------------------------------------------

    ### Chart A

    ```{r}
    ```

    Column {data-width=350}
    -----------------------------------------------------------------------

    ### Chart B

    ```{r}
    ```

    ### Chart C

    ```{r}
    ```

Cela crée un tableau de bord statique à deux colonnes avec un graphique à gauche et deux à droite:

2 - Étape 2. Personnalisez le Flexdashboard

3 - Étape 3. Récupérez et préparez les données

Pour cet exemple, nous utiliserons un sous-ensemble de l’ ensemble de données des clients de carte de crédit de Kaggle pour explorer les profils des clients avec une analyse exploratoire des données. Chargeons et préparons les données sous le bloc de code du tableau de bord. N’oubliez pas de stocker à la fois le tableau de bord et les données dans le même répertoire de travail!

  ```{r data}
  data <- read.csv("BankChurners.csv")
  Categorical.Variables <- c("Gender", "Education_Level", "Marital_Status")
  Numeric.Variables <- c("Customer_Age", "Total_Trans_Ct", "Credit_Limit")
  ```

4 - Étape 4. Créer des entrées utilisateur

Les entrées utilisateur sont les composants clés d’un tableau de bord dynamique, des fonctionnalités de pilotage, de l’expérience utilisateur et des résultats finaux.

Le widget SelectInput crée un menu déroulant simple. Dans lewidget SelectInput, nous spécifions trois arguments: (1) nom : invisible pour l’utilisateur, que nous utilisons pour accéder à la valeur du widget, (2) étiquette: affichée au-dessus du menu déroulant, et (3) choix : liste de valeurs que l’utilisateur doit sélectionner .

Nous allons créer deux widgets SelectInput dans la barre latérale du tableau de bord, permettant à l’utilisateur de sélectionner une variable catégorielle et une variable numérique.

  ```{r}
  selectInput("categorical_variable", label = "Select Categorical Variable:", choices = Categorical.Variables)
  selectInput("numeric_variable", label = "Select Numeric Variable:", choices = Numeric.Variables)
  ```

Le tableau de bord doit ressembler à ceci une fois rendu:

5 - Étape 5. Créer des sorties réactives - Contenu dynamique

La réactivité est ce qui rend les applications Shiny réactives, se mettant à jour automatiquement chaque fois que l’utilisateur effectue un changement. Pour rendre une sortie réactive, nous utilisons les fonctions de rendu de Shiny. Les modifications apportées aux entrées rendent automatiquement le code et mettent à jour les sorties. Shiny propose une grande variété de fonctions de rendu :

  renderPlot <- renders standard R plots 
  renderLeaflet <- renders leaflet output
  renderDT <- renders DT DataTables
  renderPlotly <- renders plotly

Visuel final :

Exercice 3 ou Examen noté

Imaginez vous-même une web application à partir de données que vous avez déjà analysées.

Exercice 4 ou Examen noté

Prenez le temps de visiter le site de Shiny-dashboard qui vous permettra de pousser vos développements de WebApps encore plus loin, et de créer en quelques lignes des tableaux de bords interactifs présentables en entreprise.

Lectures