Shiny Design

Day 25

Prof Amanda Luby

Carleton College
Stat 220 - Spring 2025

Warm up

Open the following shinyapps and explore a little bit.

• Data Wrangling
• Biodiversity in NPS
• Hex Memory Game
• Lake Profile Dashboard
• Classification Trees

With the folks around you, discuss:

1. Did any apps stand out as enjoyable or useful?
2. What features or design choices make an app stand out?
3. Are there any small tweaks you could make to make them more usable?

06:00

AskAManager app

https://minecr.shinyapps.io/manager-survey/

Your turn

I’ve posted a new version of the app at https://stat220-s25.github.io/files/25-starter-app.R

• Move the initial data preparation code to an R script called data-prep.R
• Write the cleaned dataset to a CSV or .Rds file
  • write_rds(manager_survey, "manager-survey/data/manager-survey.rds")
• In the app.R file, load the data with read_csv
  • manager_survey <- read_rds("data/manager-survey.rds")

03:00

Shiny inputs

xxxxInput("id", 
          "Label", 
          value,
          choices)

• "id" is how you refer to the input in the server function (input$id)
• "Label" is how the input is labeled in the app
• value refers to the default value (not all inputs have this option)
• choices refers to the possible options that are listed (not all inputs have this option)

Shiny inputs

ui <- fluidPage(
  numericInput("num", "Number one", value = 0, min = 0, max = 100),
  sliderInput("num2", "Number two", value = 50, min = 0, max = 100),
  selectInput("state", "What's your favourite state?", state.name)
)

Your turn

• Add a sliderInput to the appropriate tab panel

sliderInput(
  inputId = "ylim",
  label = _______ ,
  min = 0,
  value = c(0, 1000000),
  max = __________,
  width = "100%"
)

• Edit your ggplot code for the individual salary plot to display only the data points that are within these slider values

04:00

Layouts

Page with sidebar

fluidPage(
  titlePanel(
    # app title/description
  ),
  sidebarLayout(
    sidebarPanel(
      # inputs
    ),
    mainPanel(
      # outputs
    )
  )
)

Multi-row

fluidPage(
  fluidRow(
    column(4, 
      ...
    ),
    column(8, 
      ...
    )
  ),
  fluidRow(
    column(6, 
      ...
    ),
    column(6, 
      ...
    )
  )
)

Multi-page: Tabsets

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      textOutput("panel")
    ),
    mainPanel(
      tabsetPanel(
        id = "tabset",
        tabPanel("panel 1", "one"),
        tabPanel("panel 2", "two"),
        tabPanel("panel 3", "three")
      )
    )
  )
)
server <- function(input, output, session) {
  output$panel <- renderText({
    paste("Current panel: ", input$tabset)
  })
}

Multi-page: nav list

ui <- fluidPage(
  navlistPanel(
    id = "tabset",
    "Heading 1",
    tabPanel("panel 1", "Panel one contents"),
    "Heading 2",
    tabPanel("panel 2", "Panel two contents"),
    tabPanel("panel 3", "Panel three contents")
  )
)

Multi-page: nav bar

ui <- navbarPage(
  "Page title",   
  tabPanel("panel 1", "one"),
  tabPanel("panel 2", "two"),
  tabPanel("panel 3", "three"),
  navbarMenu("subpanels", 
    tabPanel("panel 4a", "four-a"),
    tabPanel("panel 4b", "four-b"),
    tabPanel("panel 4c", "four-c")
  )
)

Theming

Theming: built-in themes

fluidPage(
  theme = bslib::bs_theme(...)
)

Theming: customize

fluidPage(
  theme = bslib::bs_theme(
    bg = "#003069", 
    fg = "#ffd24f", 
    base_font = "Montserrat",
    heading_font = "Playfair Display SemiBold"
)

Plot theming

server <- function(input, output, session) {
  thematic::thematic_shiny()
  
  output$distPlot <- renderPlot({
    ggplot(...)
  })
}

Add theme = bslib::bs_theme() to your ui() function, and bslib::bs_themer() to your server function to try out different options interactively

Your turn

• Add a custom theme to the AskAManager app
• Update the ggplot themes to match

04:00

Deploying an app

• Shiny apps need to be “connected” to RStudio or a remote RStudio server

• You can deploy shiny apps online

  • using Posit’s cloud server (free/fee) - https://www.shinyapps.io/
    • “Getting started” guide will walk you through connecting RStudio to your shinyapps.io account
    • note: there is also now an option to deploy via Connect Cloud from your github. Feel free to try it!
  • creating a shiny server

• Your app and files should be in their own folder and the entire folder is what you “deploy”. You do not want multiple app.R or .Rmd files in that folder!