Introduction to R Shiny part1

In this tutorial, we show how to build a Shiny web application to upload and visualize spatio-temporal data (Chang et al. 2021). The app allows to upload a shapefile with a map of a region, and a CSV file with the number of disease cases and population in each of the areas in which the region is divided. The app includes a variety of elements for interactive data visualization such as a map built with leaflet (Cheng, Karambelkar, and Xie 2021), a table built with DT (Xie, Cheng, and Tan 2021), and a time plot built with dygraphs (Vanderkam et al. 2018). The app also allows interactivity by giving the user the possibility to select specific information to be shown. To build the app, we use data of the number of lung cancer cases and population in the 88 counties of Ohio, USA, from 1968 to 1988 (Figure 1).

Figure1. Snapshot of the Shiny app to upload and visualize spatio-temporal data.

Shiny

Shiny is a web application framework for R that enables to build interactive web applications. A Shiny app can be built by creating a directory (called, for example, appdir) that contains an R file (called, for example, app.R) with three components:

• a user interface object (ui) which controls the layout and appearance of the app,

• a server() function with the instructions to build the objects displayed in the ui, and

• a call to shinyApp() that creates the app from the ui/server pair.

Shiny apps contain input and output objects. Inputs permit users interact with the app by modifying their values. Outputs are objects that are shown in the app. Outputs are reactive if they are built using input values. The following code shows the content of a generic app.R file.

# load the shiny package
library(shiny)

# define user interface object
ui <- fluidPage(
  *Input(inputId = myinput, label = mylabel, ...)
  *Output(outputId = myoutput, ...)
)

# define server() function
server <- function(input, output){
  output$myoutput <- render*({
    # code to build the output.
    # If it uses an input value (input$myinput),
    # the output will be rebuilt whenever
    # the input value changes
  })}

# call to shinyApp() which returns the Shiny app
shinyApp(ui = ui, server = server)

The app.R file is saved inside a directory called, for example, appdir. Then, the app can be launched by typing runApp("appdir_path") where appdir_path is the path of the directory that contains app.R, or by clicking the Run button of RStudio.

Setup

To build the Shiny app of this example, we need to download the folder appdir from the book webpage and save it in our computer. This folder contains the following subfolders:

• data which contains a file called data.csv with the data of lung cancer in Ohio, and a folder called fe_2007_39_county with the shapefile of Ohio, and

• www with an image of a Shiny logo called imageShiny.png.

Structure of app.R

We start creating the Shiny app by writing a file called app.R with the minimum code needed to create a Shiny app:

library(shiny)

# ui object
ui <- fluidPage( )

# server()
server <- function(input, output){ }

# shinyApp()
shinyApp(ui = ui, server = server)

We save this file with the name app.R inside a directory called appdir. Then, we can launch the app by clicking the Run App button at the top of the RStudio editor or by executing runApp("appdir_path") where appdir_path is the path of the directory that contains the app.R file. The Shiny app created has a blank user interface. In the following sections, we include the elements and functionality we wish to have in the Shiny app.

Layout

We build a user interface with a sidebar layout. This layout includes a title panel, a sidebar panel for inputs on the left, and a main panel for outputs on the right. The elements of the user interface are placed within the fluidPage() function and this permits the app to adjust automatically to the dimensions of the browser window. The title of the app is added with titlePanel(). Then we write sidebarLayout() to create a sidebar layout with input and output definitions. sidebarLayout() takes the arguments sidebarPanel() and mainPanel(). sidebarPanel() creates a a sidebar panel for inputs on the left. mainPanel() creates a main panel for displaying outputs on the right.
We can add content to the app by passing it as an argument to titlePanel(), sidebarPanel(), and mainPanel(). Here we have added texts with the description of the panels. Note that to include multiple elements in the same panel, we need to separate them with commas.

ui <- fluidPage(
  titlePanel("title"),
  sidebarLayout(
    sidebarPanel("sidebar panel for inputs"),
    mainPanel("main panel for outputs")
  )
)

We can add content to the app by passing it as an argument to titlePanel(), sidebarPanel(), and mainPanel(). Here we have added texts with the description of the panels. Note that to include multiple elements in the same panel, we need to separate them with commas.

HTML content

Here we add a title, an image and a website link to the app. First we add the title “Spatial app” to titlePanel(). We want to show this title in blue so we use p() to create a paragraph with text and set the style to the #3474A7 color.

titlePanel(p("Spatial app", style = "color:#3474A7")),

Then we add an image with the img() function. The images that we wish to include in the app must be in a folder named www in the same directory as the app.R file. We use the image called imageShiny.png and put it in the sidebarPanel() by using the following instruction.

sidebarPanel(img(src = "imageShiny.png",
                 width = "70px", height = "70px")),

Here src denotes the source of the image, and height and width are the image height and width in pixels, respectively. We also add text with a link referencing the Shiny website.

p("Made with", a("Shiny",
                 href = "http://shiny.rstudio.com"), "."),

Note that in sidebarPanel() we need to write the function to generate the website link and the function to include the image separated with a comma.

sidebarPanel(
p("Made with", a("Shiny",
                 href = "http://shiny.rstudio.com"), "."),
img(src = "imageShiny.png",
    width = "70px", height = "70px")),

Below is the content of app.R we have until now. A snapshot of the Shiny app is shown in Figure 2.

library(shiny)

# ui object
ui <- fluidPage(
  titlePanel(p("Spatial app", style = "color:#3474A7")),
  sidebarLayout(
    sidebarPanel(
      p("Made with", a("Shiny",
        href = "http://shiny.rstudio.com"
      ), "."),
      img(
        src = "imageShiny.png",
        width = "70px", height = "70px"
      )
    ),
    mainPanel("main panel for outputs")
  )
)

# server()
server <- function(input, output) { }

# shinyApp()
shinyApp(ui = ui, server = server)

Figure 2: Snapshot of the Shiny app after including a title, an image and a website link

Read Data

Now we import the data we want to show in the app. The data is in the folder called data in the appdir directory. To read the CSV file data.csv, we use the read.csv() function, and to read the shapefile of Ohio that is in the folder fe_2007_39_county, we use the readOGR() function of the rgdal package.

library(rgdal)
data <- read.csv("data/data.csv")
map <- readOGR("data/fe_2007_39_county/fe_2007_39_county.shp")

OGR data source with driver: ESRI Shapefile 
Source: "/Users/angelazhang/Documents/R Shiny tutorials/data/fe_2007_39_county/fe_2007_39_county.shp", layer: "fe_2007_39_county"
with 88 features
It has 11 fields

We only need to read the data once so we write this code at the beginning of app.R outside the server() function. By doing this, the code is not unnecessarily run more than once and the performance of the app is not decreased.

Adding Outputs

Now we show the data in the Shiny app by including several outputs for interactive visualization. Specifically, we include HTML widgets created with JavaScript libraries and embedded in Shiny by using the htmlwidgets package (Vaidyanathan et al. 2021). The outputs are created using the following packages:

• DT to display the data in an interactive table,

• dygraphs to display a time plot with the data, and

• leaflet to create an interactive map.

Outputs are added in the app by including in ui an *Output() function for the output, and adding in server() a render*() function to the output that specifies how to build the output. For example, to add a plot, we write in the ui plotOutput() and in server() renderPlot().

Table using DT

We show the data in data with an interactive table using the DT package. In ui we use DTOutput(), and in server() we use renderDT().

library(DT)

# in ui
DTOutput(outputId = "table")

# in server()
output$table <- renderDT(data)

Time plot using dygrapghs

We show a time plot with the data with the dygraphs package. In ui we use dygraphOutput(), and in server() we use renderDygraph(). dygraphs plots an extensible time series object xts. We can create this type of object using the xts() function of the xts package (Ryan and Ulrich 2020) specifying the values and the dates. The dates in data are the years of column year. For now we choose to plot the values of the variable cases of data.

We need to construct a xts object for each county and then put them together in an object called dataxts. For each of the counties, we filter the data of the county and assign it to datacounty. Then we construct a xts object with values datacounty$cases and dates as.Date(paste0(data$year, "-01-01")). Then we assign the name of the counties to each xts (colnames(dataxts) <- counties) so county names can be shown in the legend.

dataxts <- NULL
counties <- unique(data$county)
for (l in 1:length(counties)) {
  datacounty <- data[data$county == counties[l], ]
  dd <- xts(
    datacounty[, "cases"],
    as.Date(paste0(datacounty$year, "-01-01"))
  )
  dataxts <- cbind(dataxts, dd)
}
colnames(dataxts) <- counties

Finally, we plot dataxts with dygraph(), and use dyHighlight() to allow mouse-over highlighting.

dygraph(dataxts) %>%
  dyHighlight(highlightSeriesBackgroundAlpha = 0.2)

We customize the legend so that only the name of the highlighted series is shown. To do this, one option is to write a css file with the instructions and pass the css file to the dyCSS() function. Alternatively, we can set the css directly in the code as follows:

dygraph(dataxts) %>%
  dyHighlight(highlightSeriesBackgroundAlpha = 0.2) -> d1

d1$x$css <- "
.dygraph-legend > span {display:none;}
.dygraph-legend > span.highlight { display: inline; }
"

d1

The complete code to build the dygraphs object is the following:

library(xts)

# in ui
dygraphOutput(outputId = "timetrend")

# in server()
output$timetrend <- renderDygraph({
  dataxts <- NULL
  counties <- unique(data$county)
  for (l in 1:length(counties)) {
    datacounty <- data[data$county == counties[l], ]
    dd <- xts(
      datacounty[, "cases"],
      as.Date(paste0(datacounty$year, "-01-01"))
    )
    dataxts <- cbind(dataxts, dd)
  }
  colnames(dataxts) <- counties

  dygraph(dataxts) %>%
    dyHighlight(highlightSeriesBackgroundAlpha = 0.2) -> d1

  d1$x$css <- "
 .dygraph-legend > span {display:none;}
 .dygraph-legend > span.highlight { display: inline; }
 "
  d1
})

Map using leaflet

We use the leaflet package to build an interactive map. In ui we use leafletOutput(), and in server() we use renderLeaflet(). Inside renderLeaflet() we write the instructions to return a leaflet map. First, we need to add the data to the shapefile so the values can be plotted in a map. For now we choose to plot the values of the variable in 1980. We create a dataset called datafiltered with the data corresponding to that year. Then we add datafiltered to map@data in an order such that the counties in the data match the counties in the map.

datafiltered <- data[which(data$year == 1980), ]
# this returns positions of map@data$NAME in datafiltered$county
ordercounties <- match(map@data$NAME, datafiltered$county)
map@data <- datafiltered[ordercounties, ]

We create the leaflet map with the leaflet() function, create a color palette with colorBin(), and add a legend with addLegend(). For now we choose to plot the values of variable cases. We also add labels with the area names and values that are displayed when the mouse is over the map.

library(leaflet)

# in ui
leafletOutput(outputId = "map")

# in server()
output$map <- renderLeaflet({

  # add data to map
  datafiltered <- data[which(data$year == 1980), ]
  ordercounties <- match(map@data$NAME, datafiltered$county)
  map@data <- datafiltered[ordercounties, ]

  # create leaflet
  pal <- colorBin("YlOrRd", domain = map$cases, bins = 7)

  labels <- sprintf("%s: %g", map$county, map$cases) %>%
    lapply(htmltools::HTML)

  l <- leaflet(map) %>%
    addTiles() %>%
    addPolygons(
      fillColor = ~ pal(cases),
      color = "white",
      dashArray = "3",
      fillOpacity = 0.7,
      label = labels
    ) %>%
    leaflet::addLegend(
      pal = pal, values = ~cases,
      opacity = 0.7, title = NULL
    )
})

Below is the content of app.R we have until now. A snapshot of the Shiny app is shown in Figure 3.

library(shiny)
library(rgdal)
library(DT)
library(dygraphs)
library(xts)
library(leaflet)

data <- read.csv("data/data.csv")
map <- readOGR("data/fe_2007_39_county/fe_2007_39_county.shp")

# ui object
ui <- fluidPage(
  titlePanel(p("Spatial app", style = "color:#3474A7")),
  sidebarLayout(
    sidebarPanel(
      p("Made with", a("Shiny",
        href = "http://shiny.rstudio.com"
      ), "."),
      img(
        src = "imageShiny.png",
        width = "70px", height = "70px"
      )
    ),
    mainPanel(
      leafletOutput(outputId = "map"),
      dygraphOutput(outputId = "timetrend"),
      DTOutput(outputId = "table")
    )
  )
)

# server()
server <- function(input, output) {
  output$table <- renderDT(data)

  output$timetrend <- renderDygraph({
    dataxts <- NULL
    counties <- unique(data$county)
    for (l in 1:length(counties)) {
      datacounty <- data[data$county == counties[l], ]
      dd <- xts(
        datacounty[, "cases"],
        as.Date(paste0(datacounty$year, "-01-01"))
      )
      dataxts <- cbind(dataxts, dd)
    }
    colnames(dataxts) <- counties

    dygraph(dataxts) %>%
      dyHighlight(highlightSeriesBackgroundAlpha = 0.2) -> d1

    d1$x$css <- "
 .dygraph-legend > span {display:none;}
 .dygraph-legend > span.highlight { display: inline; }
 "
    d1
  })

  output$map <- renderLeaflet({

    # Add data to map
    datafiltered <- data[which(data$year == 1980), ]
    ordercounties <- match(map@data$NAME, datafiltered$county)
    map@data <- datafiltered[ordercounties, ]

    # Create leaflet
    pal <- colorBin("YlOrRd", domain = map$cases, bins = 7)

    labels <- sprintf("%s: %g", map$county, map$cases) %>%
      lapply(htmltools::HTML)

    l <- leaflet(map) %>%
      addTiles() %>%
      addPolygons(
        fillColor = ~ pal(cases),
        color = "white",
        dashArray = "3",
        fillOpacity = 0.7,
        label = labels
      ) %>%
      leaflet::addLegend(
        pal = pal, values = ~cases,
        opacity = 0.7, title = NULL
      )
  })
}

# shinyApp()
shinyApp(ui = ui, server = server)

Figure 3: Snapshot of the Shiny app after including the map, the time plot, and the table.