Join the community!
Visit our GitHub or LinkedIn page to join the Tilburg Science Hub community, or check out our contributors' Hall of Fame!
Want to change something or add new content? Click the Contribute button!
What is a Shiny App?
The Shiny library helps you turn your analyses into interactive web applications without requiring HTML, CSS, or Javascript knowledge, and provides a powerful web framework for building web applications using R.
Being able to create Shiny apps is a great skill to have because it enables you to communicate your insights to non-technical stakeholders and give them the tools to conduct their own analysis!
Code
Skeleton
The skeleton of any Shiny app consists of a user interface (ui
) and a server
. The UI is where the visual elements are placed such as a scatter plot or dropdown menu. The server is where the logic of the app is implemented, for example, what happens once you click on the download button. And this exactly where Shiny shines: combining inputs with outputs.
library(shiny)
ui <- fluidPage()
server <- function(input, output){}
shinyApp(ui = ui, server = server)
Lay-out
Sidebar
Create a 2-column structure with a small panel on the left and a main panel on the right.
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
"This is the sidebar"
),
mainPanel(
"Main panel goes here"
)
)
)
Tabs
Distribute your data across multiple tabs (alternative to a sidebar layout).
tabsetPanel(
tabPanel(title = "tab 1",
h1("Overview"),
"Content goes here"),
tabPanel(title = "tab 2", "The content of the second tab"),
tabPanel(title = "tab 3", "The content of the third tab")
)
Placeholders
Define a placeholder for plots, tables, and text in the user interface (ui
) and server side (server
).
- Text can be formatted as headers (e.g.,
h1()
,h2()
) or printed in bold (strong()
) or italics (em()
) format. - The
ggplotly()
function can convert aggplot2
plot into an interactive one (e.g., move, zoom, export image features that are not available in the standardrenderPlot()
function). - Similarly, the
DT::dataTableOutput("table")
(in theui
) and theDT::renderDataTable()
(in theserver
) from theDT
package enrich therenderTable
function. See a live example here.
# ui
plotOutput(outputId = "plot"),
tableOutput(outputId = "table"),
textOutput(outputId = "text")
# ----------------------------
# server
output$plot <- renderPlot({
plot(x, y, ...)
})
output$table <- renderTable({
data
})
output$text <- renderText({
"Some text"
})
Control Widgets
Text box
# textbox that accepts both numeric and alphanumeric input
textInput(inputId = "title", label="Text box title", value = "Text box content")
Numeric input
# text box that only accepts numeric data between 1 and 30
numericInput(inputId = "num", label = "Number of cars to show", value = 10, min = 1, max = 30)
Slider
# slider that goes from 35 to 42 degrees with increments of 0.1
sliderInput(inputId = "temperature", label = "Body temperature", min = 35, max = 42, value = 37.5, step = 0.1)
Range selector
# slider that allows the user to set a range (rather than a single value)
sliderInput(inputId = "price", label = "Price (€)", value = c(39, 69), min = 0, max = 99)
Radio buttons
# input field that allows for a single selection
radioButtons(inputId = "radio", label = "Choose your preferred time slot", choices = c("09:00 - 09:30", "09:30 - 10:00", "10:00 - 10:30", "10:30 - 11:00", "11:00 - 11:30"), selected = "10:00 - 10:30")
Dropdown menu
# a dropdown menu is useful when you have plenty of options and you don't want to list them all below one another
selectInput(inputId = "major", label = "Major", choices = c("Business Administration", "Data Science", "Econometrics & Operations Research", "Economics", "Liberal Arts", "Industrial Engineering", "Marketing Management", "Marketing Analytics", "Psychology"),
selected = "Marketing Analytics")
Dropdown menu (multiple selections)
# dropdown menu that allows for multiple selections (e.g., both R and JavaScript)
selectInput(inputId = "programming_language", label = "Programming Languages",
choices = c("HTML", "CSS", "JavaScript", "Python", "R", "Stata"),
selected = "R", multiple = TRUE)
Checkbox
# often used to let the user confirm their agreement
checkboxInput(inputId = "agree", label = "I agree to the terms and conditions", value=TRUE)
Colorpicker
# either insert a hexadecmial color code or use the interactive picker
library(colourpicker) # you may first need to install the package
colourInput(input = "colour", label = "Select a colour", value = "blue")
Download Button
Add a download button to your Shiny app so that users can directly download their current data selection in csv-format and open the data in a spreadsheet program (e.g., Excel).
ui <- fluidPage(
downloadButton(outputId = "download_data", label = "Download")
)
server <- function(input, output) {
output$download_data <- downloadHandler(
filename = "download_data.csv",
content = function(file) {
data <- filtered_data()
write.csv(data, file, row.names = FALSE)
}
)
}
An Example
The Shiny app below visualizes Google’s COVID-19 Community Mobility Reports of the Netherlands. A step-by-step tutorial (incl. source code) can be found here.