class: center, middle, title # UE Visualisation ### 2019-2020 ## Dr. Maxime Wack ### AHU Informatique médicale #### Hôpital Européen Georges Pompidou, </br> Université de Paris --- class: center, middle # Objectif ## Ajouter de l'**interactivité** à une visualisation --- # Interactivité ## Réactivité L'objet **réagit** à l'utilisateur, mais n'est pas modifié ## Interactivité L'utilisateur peut **influer** sur l'objet </br> Un objet peut en **modifier** un autre --- class: center # Outils ### ggplot2 + ggplotly ### plotly ### D3 ### VegaLite ### Shiny --- class: center, middle # ggplot2 + ggplotly --- ### Installer `plotly` ```r install.packages("plotly") ``` ```r library(tidyverse) library(plotly) ``` --- ```r iris %>% ggplot() + aes(x = Petal.Length, fill = Species) + geom_histogram() -> plot ggplotly(plot) ```
--- ```r (iris %>% ggplot() + aes(x = Petal.Length, y = Petal.Width, color = Species) + geom_point()) %>% ggplotly ```
--- ```r iris %>% ggplot() + geom_histogram(data = iris %>% select(-Species), aes(x = Petal.Length)) + geom_histogram(aes(x = Petal.Length, fill = Species)) + facet_grid(~Species) -> plot ggplotly(plot) ```
--- class:center, middle # Plotly --- # Plotly ### Utilise aussi une **grammaire de graphiques** ### Bibliothèque **JS** ### Interface par un **package R** ### Couche d'**abstraction** pour ggplot2 https://plot.ly/r --- # Plotly ### `ggplot` → `plot_ly()` ### `geom_*` → `add_*` ou `add_trace` Les *aes* sont données avec des formules dans les traces ### `facet_*` → **subplots** ### `scale_*_*` + `theme` → `layout` ### `+` → `%>%` --- ```r iris %>% plot_ly() %>% add_markers(x = ~Sepal.Length, y = ~Sepal.Width) ```
--- ```r iris %>% plot_ly(x = ~Sepal.Length, y = ~Sepal.Width) %>% add_trace(color = ~Species, size = 4, mode = "markers") ```
--- ```r iris %>% plot_ly(x = ~Sepal.Length, y = ~Sepal.Width, color = ~Species) %>% add_markers(size = 2, hoverinfo = "text", text = ~str_c("Espèce : ", Species, "\n", "Longueur de sépale :", Sepal.Length, "\n", "Largeur de sépale :", Sepal.Width)) ```
--- # Plotly ### Interaction poussée (JS) ### Animations (frame) *Aesthetic* d'animation, variable définissant l'état à chaque image clé --- class:center, middle
--- # D3 .pull-left[ ### **D**ata **D**riven **D**ocuments ### Créé par **Mike Bostock** *Data journalist* au NYT ] .pull-right[ ![:scale 50%](04_img/bostock.jpg) ] ### Moteur *bas niveau* pour manipuler des éléments du DOM et du SVG à partir de données. ### Notion de grammaire liant données et propriétés CSS, dont **animations** et **transitions** .center[https://d3js.org] --- class: center # Outils dérivés de D3.js ## Plot.ly ## Vega(lite) ## C3.js ## R2D3 https://rstudio.github.io/r2d3/ --- # Réactivité ## Tous les outils précédents sont **réactifs** ### → affichage d'un overlay ### → changement de position/échelle ### → afficher / masquer / réordonner (modulo interactions en *JS* à bricoler soi-même) --- # Interactivité ## Manipulation des données ## Interactions avec la visualisation ## Interactions entre éléments de visualisation --- # Shiny ### Architecture client/serveur ### Client = interface web ### Serveur = runtime R https://shiny.rstudio.com/ --- # Shiny ## Programmation **événementielle** → programmation **réactive** ## L'interface est mise à jour *quand nécessaire* --- # Interface web ### Créée dans R ### Génère HTML + CSS + JS ### Définit des **input** et **output** --- # UI ```r ui <- fluidPage(titlePanel = "Titre", sidebarLayout( sidebarPanel( sliderInput(inputId = "bins", label = "Bins", min = 1, max = 50, value = 30)), mainPanel(plotOutput(outputId = "figure")))) ``` --- # Serveur ### Créé et exécuté dans R ### Génère les éléments d'**output** en fonction des **input** ### Les **outputs** peuvent *générer* de l'input (htmlwidgets : DT, plotly, etc.) ### Le serveur peut créer des **input** dynamiques --- # Server ```r server <- function(input, output, session) { output$figure <- renderPlot( { mtcars %>% ggplot() + aes(x = mpg) + geom_histogram(bins = input$bins) }) } ```