Introductions

Introduce yourself

We wont go around the room, but take the next couple of minutes to introduce yourself to your neighbors.

Some suggested topics:

• What is your name

• Where you are coming from

• Why you are interested in learning Shiny

Materials

Schedule

Coffee and tea will be available on levels 3, 5, 6 & 7.

Lunch will be in the Regency Ballroom on level 7

WiFi

If you have any difficulty with your connection please let us (myself and or the TAs) know so we can escalate issues if needed.

Code of Conduct

The Code of Conduct can be found at posit.co/code-of-conduct.

Please review it carefully.

You can report Code of Conduct violations in person, by email, or by phone.

Please see the policy linked above for contact information.

Other useful info

• There are gender-neutral bathrooms located on floors 3, 4, 5, 6, and 7.

• The meditation and prayer room is Room 503, it is available Mon & Tues 7am - 7pm, and Wed 7am - 5pm.

• The lactation room is located in 509, with the same timings as above.

• Participants who do not wish to be photographed have red lanyards; please note everyone’s lanyard colors before taking a photo and respect their choices.

Asking for help (Stickies)

Other communication (Discord)

You should have received an email with an invitation and instructions for joining the conference’s discord server.

This workshop has a private channel under Workshops,

This is a great place to ask questions, post resources, memes, or most anything else before, during, and after the workshop.

RStudio Cloud

You can use the following link to join the workshops RStudio cloud space,

Once you have joined you can then select the get-started-shiny assignment,

which should then create a copy of all materials and launch a cloud session for you.

Cloud session

If everything is working you should see something very close to the following,

File organization

Shiny

Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.

App Anatomy

App Components

library(shiny)

ui = list()

server = function(input, output, session) {}

shinyApp(ui = ui, server = server)

Weather data

We need some data that we will be able to interact with for our Shiny apps today.

I’ve taken the liberty of collecting and preparing some historical weather data from Meteostat for some airports around the US.

readr::read_csv(here::here("data/weather.csv"))

# A tibble: 28,594 × 17
     id name  airport_code country state region longitude latitude date      
  <dbl> <chr> <chr>        <chr>   <chr> <chr>      <dbl>    <dbl> <date>    
1 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-01
2 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-02
3 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-03
4 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-04
5 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-05
6 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-06
7 72202 Miami KMIA         US      FL    South      -80.3     25.8 2020-01-07
# ℹ 28,587 more rows
# ℹ 8 more variables: temp_avg <dbl>, temp_min <dbl>, temp_max <dbl>,
#   precip <dbl>, snow <dbl>, wind_direction <dbl>, wind_speed <dbl>,
#   air_press <dbl>

Demo 01 - Our first app

library(tidyverse)
library(shiny)

d = readr::read_csv(here::here("data/weather.csv"))

ui = fluidPage(
  titlePanel("Temperatures at Major Airports"),
  sidebarLayout(
    sidebarPanel(
      radioButtons(
        "name", "Select an airport",
        choices = c(
          "Seattle-Tacoma",
          "Raleigh-Durham",
          "Houston Intercontinental",
          "Denver",
          "Los Angeles",
          "John F. Kennedy"
        )
      ) 
    ),
    mainPanel( 
      plotOutput("plot")
    )
  )
)

server = function(input, output, session) {
  output$plot = renderPlot({
    d |>
      filter(name %in% input$name) |>
      ggplot(aes(x=date, y=temp_avg)) +
      geom_line() +
      theme_minimal()
  })
}

shinyApp(ui = ui, server = server)

Your turn - Exercise 01

Open exercises/ex01.R in Posit cloud and execute it via the Run App button in RStudio.

Check that you are able successfully run the shiny app and are able to interact with it by picking a new airport.

• If everything is working try modifying the code, e.g. try adding or removing a city from radioButtons().

• What happens if you add a city that is not in the weather.csv data set to the radio button input?

Troubleshooting

A couple of quick tips:

• If the app can’t find the data, make sure you have opened the workshop’s RStudio project

• If you are not using Posit cloud make sure you have the latest versions of shiny and tidyverse installed

• If you are stuck, ask a neighbor for help and/or raise your hand and myself or a TA will come by

Sidebar layout

UI functions are HTML

One of the neat tricks of Shiny is that the interface is just a web page, and this can be seen by the fact that UI functions are just R functions that generate HTML.

We can run any of the following in our console and see the HTML output generated:

fluidPage()
sidebarLayout(sidebarPanel(),mainPanel())
radioButtons("test", "Test", choices = c("A","B","C"))

Multi-row layout

Other layouts

• Tabsets

  • See tabsetPanel()

• Navbars and navlists

  • See navlistPanel()

  • and navbarPage()

• Dashboards

  • flexdashboard

  • Shinydashboard

  • Quarto Dashboards

  • bslib

Shiny Widgets Gallery

A brief widget tour

Your turn - Exercise 02

We’ve just seen a number of alternative input widgets, starting from the code in exercises/ex02.R try changing the radioButton() input to something else.

What happens if you use an input capable of selecting multiple values, e.g.

• checkboxGroupInput()

• or selectInput() with multiple = TRUE