Presentation and visualization

Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Shiny: Render and UI
Ott Toomet
February 27, 2023
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Announcements
• PS6: do a shiny app
• Next Wed: final project
• NO FINAL EXAM!
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
The big picture
• Basic skills
• W1: intro, file system
• W2: command line, git, markdown
• W2-4: R language, functions,
vectors
• W5: lists, data frames
• Data manipulations
• W6: dplyr
• Presentation and visualization
• W7: literal programming
• W7,8: plotting data
• Interactive apps
• W9: shiny, rendering, UI, reactive
functions
• W10: final project
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Goals
• You understand the basic shiny principles
• you can create a basic shiny app with help of rstudio
• can run it from withing rstudio
• you can build on that through googling etc
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
R-based interactive web framework
• Simple interactive web apps
• Backend-frontent framework
• Write backend in R
• use all R data manipulation/graphics tools
• Frontend defined in R
• (automatically converted to
HTML/javascript)
• Frontend-backend communication set up
automatically
Examples:
• https://shiny.rstudio.
com/gallery/
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Creating shiny apps
https://faculty.washington.edu/otoomet/info201-book/shiny.html#
creating-shiny-apps-rstudio
In RStudio:
• File > New File > Shiny Web App
• Single file: simpler
• Multiple files: more modular
• Should be in a separate folder
• RStudio does it automatically
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Structure of Shiny App
https://faculty.washington.edu/otoomet/info201-book/shiny.html#
shiny-writing-ui-server
server <- function(input, output) {
…
}
ui <- fluidPage(
…
)
shinyApp(ui = ui, server = server)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Start the App
• RStudio:
• run-app
• Command line:
• Rscript -e “shiny::runApp(’myApp’)”
• point browser to the url.
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Single vs Multiple Files
• single file:
• great and compact for small projects
• multiple files:
• clear organization
• easier collaboration
• more modular (usable across projects)
• must be named “server.R” and “ui.R”
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Demo
• create a single-file shiny app in rstudio
• explain what it does
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
UI and Server
• server provides data, renders it into plots/tables…
• Essentially creates web pages:
• renderPlot, renderText, …
• These create corresponding web pages
• UI defines the page structure
• Essentially web page layout
• UI outputs the rendered things
• UI gets inputs from user …
• … and feeds inputs to the server
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
UI syntax
https:
//faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-ui
UI defines how UI looks like
ui <- fluidPage(panel/layout, panel/layout, …)
• Each panel/layout is a structure element of web page
• fluidPage: Interactive, responsive page layout
• There is anothe layout, fixedPage, that does not respond to resize.
Example:
fluidPage(
titlePanel(…),
sidebarLayout(
sidebarPanel(…),
mainPanel(…)
)
)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
sidebarLayout
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Server
https://faculty.washington.edu/otoomet/info201-book/shiny.html#
shiny-server
Server is a function:
server <- function(input, output)
• input:
• input from ui (sliders, text input, clicks…)
• output:
• rendered components to show on the page
• plots, text, …
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Server and UI
Server renders
server <- function(input, output) {
output$histogram <- renderPlot({ # make webpage of the plot
x <- rnorm(input$n) # random numbers, get from the slider
hist(x) # make histogram
})
}
UI displays:
ui <- fluidPage(
…,
mainPanel(“histogram”), # put the rendered histogram here
…
)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
UI provides input:
ui <- fluidPage(…,
sidebarPanel(
sliderInput(“n”, # inputId
“How many points”, # label
1, 100, 50) # min, max, start value
), …
)
Server uses the input
server <- function(input, output) {
output$histogram <- renderPlot({
x <- rnorm(input$n) # get from slider “n”
hist(x)
})
}
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
A minimal app
library(shiny)
ui <- fluidPage(
mainPanel(
textOutput(“hello”)
)
)
server <- function(input, output) {
output$hello <- renderText(“hello world”)
}
shinyApp(ui = ui, server = server)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Other panels
• titlePanel
• sidebarLayout
• contains nested sidebarPanel and mainPanel
• fluidRow: a row of panels (width 12)
• column(width, …): one object in fluidRow (width 1..12)
See more at Shiny application layouts guide
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
grid layout
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
tabsets (tabsetPanel)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Nested Layout
fluidPage(
titlePanel(“MyApp”),
fluidRow(
column(4, …),
column(8, sidebarLayout(
sidebarPanel(…),
mainPanel(…))
)
)
)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
UI-Server Interaction
Look at e.g. slider in UI:
sliderInput(inputId, label, min, max, value, …)
• inputId: input list component name, how this input will be know for server
• all input widgets have inputId
Example:
sliderInput(“n”, “Give a number”, 1, 100, 50)
This slider is known as n
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Server’s side
In server we access n as
output$distPlot <- renderPlot({
n <- input$n
plot(rnorm(n))
})
• Server learns about user slider input through input$n
• Server renders the plot and calls it distPlot
• This is basically a small webpage (png image)
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Back to UI
UI gets the rendered plot and puts it on the page:
mainPanel(
# may use any other panel here too
plotOutput(“distPlot”)
# ‘distPlot’ is what server rendered
# as oitpit$distPlot
)
• UI code determines where to put the mini webpage “distPlot”
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
More UI Inputs
• checkboxGroupInput (choose several from a list)
• checkboxInput (on/off choice)
• dateInput (opens a calendar)
• dateRangeInput (two calendars)
• numericInput
• radioButtons (choose one and only one from a list)
• selectInput (choose from a menu)
• sliderInput (also for a range)
See more in Shiny input widget gallery
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
More outputs for UI
• plotOutput for plot, ggplot
• use renderPlot on server
• textOutput for text
• use renderText on server
• plotlyOutput for plotly plots
• use renderPlotly on server
• leafletOutput leaflet maps
• use renderLeaflet on server
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Publish at shinyapps.io
https://faculty.washington.edu/otoomet/info201-book/shiny.html#
shiny-publishing
• Sign up at shinyapps.io
• Use GH or google
• Use the “publish” button in RStudio
• Upload all the app folder
• Put data in app folder
• Use correct relative path
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
1 Shiny
2 Structure of Shiny App
3 Building blocks
4 UI
5 Server
6 More details
7 Publishing shiny apps
8 Next
Shiny 1
Shiny
Structure of
Shiny App
Building
blocks
UI
Server
More details
Publishing
shiny apps
Next
.
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
. .
. .
.
.
. .
.
.
. .
. .
.
Next
• Lab: make a shiny app with data, upload
• PS6: shiny