class: center, middle, inverse, title-slide # DSBA 5122: Visual Analytics ## Class 10: Intro to Shiny ### Ryan Wesslen ### November 4, 2019 --- ## Shiny A **Shiny** app is a web page (UI) connected to a computer running a live R session (Server) <img src="../images/slides/08-class/shiny-01.png" width="800px" /> Users can manipulate the UI, which will cause the server to update the UI's displays (by running R code). --- <img src="../images/slides/08-class/shiny-02.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-03.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-template.png" width="800px" /> --- ## Try This 1. Open a new .R file 2. Type this into the file. (Do you have the shiny package?) <img src="../images/slides/08-class/shiny-template2.png" width="600px" /> 3. Click "Run" --- class: center, middle, inverse # User Interface: ui() function --- ## `fluidPage()` <img src="../images/slides/08-class/shiny-04.png" width="800px" /> --- ## Example <img src="../images/slides/08-class/shiny-input-ex1.png" width="800px" /> --- ## Example <img src="../images/slides/08-class/shiny-input-ex2.png" width="800px" /> --- ## Input Syntax <img src="../images/slides/08-class/shiny-inputs-syntax.png" width="800px" /> --- ## Inputs <img src="../images/slides/08-class/shiny-inputs.png" width="800px" /> There are multiple common `Input()` functions. --- ## What's in an Input function? HTML <img src="../images/slides/08-class/shiny-input-ex3.png" width="800px" /> --- ## Output Syntax <img src="../images/slides/08-class/shiny-outputs-syntax.png" width="800px" /> --- ## Output Options <img src="../images/slides/08-class/shiny-outputs.png" width="800px" /> --- ## Example <img src="../images/slides/08-class/shiny-outputs-ex3.png" width="800px" /> --- ## Example <img src="../images/slides/08-class/shiny-outputs-ex1.png" width="800px" /> --- ## Example <img src="../images/slides/08-class/shiny-outputs-ex2.png" width="800px" /> --- ## Example <img src="../images/slides/08-class/shiny-outputs-ex4.png" width="800px" /> --- ## Layouts <img src="../images/slides/08-class/shiny-layouts.png" width="800px" /> --- ## `sidebarLayout()` <img src="../images/slides/08-class/shiny-layout1.png" width="800px" /> --- ## `sidebarLayout()` <img src="../images/slides/08-class/shiny-layout2.png" width="800px" /> --- ## `sidebarLayout()` <img src="../images/slides/08-class/shiny-layout3.png" width="800px" /> --- ## html tags if you know HTML <img src="../images/slides/08-class/shiny-tags.png" width="800px" /> --- # Server: `server()` function <img src="../images/slides/08-class/shiny-server1.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server2.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server2a.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server2b.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server2c.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server2d.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server3.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server4.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server5.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server6.png" width="800px" /> --- <img src="../images/slides/08-class/shiny-server-reactivity.png" width="800px" /> --- ## Shiny: Output <img src="../images/slides/08-class/shiny-server-output.png" width="800px" /> --- ## Server Recap <img src="../images/slides/08-class/shiny-server-recap.png" width="800px" /> --- ## 15 minute Quick Assignment Open the `app.R` file. Try these three tasks: 1. add a new slider that sets the number of breaks for the `rnorm()` function 2. add a `textInput()` that sets the name of the plot 3. add a `actionButton()` that updates the name of the plot (part 2) only when clicking (hint: see ?observeEvent) --- # Deploying Apps to Shinyapps.io <img src="../images/slides/08-class/shiny-shinyapps.png" width="800px" /> --- ## Setup connection to ShinyApps.io <img src="../images/slides/08-class/deploy1.gif" width="700px" /> --- ## Setup connection to ShinyApps.io <img src="../images/slides/08-class/deploy2.gif" width="700px" /> --- ## Deploy to ShinyApps.io <img src="../images/slides/08-class/deploy3.gif" width="700px" /> --- ## Deploy to ShinyApps.io <img src="../images/slides/08-class/deploy4.gif" width="700px" />