Interactive Data Visualization with R Shiny

Wenjie Wang
Department of Statistics, UConn

January 30, 2018

Getting Started

slides available at https://statds.github.io/topic-presentation-wenjie_wang/
source code of the slides: https://github.com/statds/topic-presentation-wenjie_wang/

R packages needed for following examples:

install.packages(c("DT", "dygraphs", "leaflet", "plotly", "shiny"))

What is R Shiny?

shiny is an R package that makes it easy to build interactive web applications straight from R.
- homepage: https://shiny.rstudio.com
- a collection of toy examples by RStudio: https://github.com/rstudio/shiny-examples
- official gallery, tutorial, and cheatsheet
- other galleries: Show me Shiny, Plotly, …

Selective examples

Hello Shiny!
Exploring Historical English Soccer Data
Weekly influenza surveillance data
Paris car accidents
Real estate analytics using Shiny dashboard

Structure of a Shiny app

By execution order:

global.R: an optional script for code needed in ui.R and server.R

library(shiny)              # e.g., attach the Shiny package

ui.R: define user interface (UI) design

shinyUI(fluidPage(
    ## e.g., create a fluid page
))

server.R: define server-side logic

shinyServer(function(input, output, session) {
    ## a function with two required argument, `input` and `output`,
    ## and an optional argument `session`
})

Alternative structure

a sinlge script called app.R

library(shiny)

## e.g., create a fluid page
ui <- fluidPage(
    ## some ui elements and widgets
)

## define server-side logic
server <- function(input, output, session) {
    ## the server function body
}

shinyApp(ui = ui, server = server)

Sidebar layout

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

my title panel

my main panel

Shiny uses Twitter Bootstrap 3, the probably most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

the essential HTML code defined in ui:

<div class="container-fluid">
  <h2>my title panel</h2>
  <div class="row">
    <div class="col-sm-4">
      <form class="well">my sidebar panel</form>
    </div>
    <div class="col-sm-8">my main panel</div>
  </div>
</div>

The more fundamental layout constructor functions are fluidRow() and column().

HTML builders

Shiny	HTML5	creates
`p()`	`<p>`	A paragraph of text
`h1(), …, h6()`	`<h1>, …, <h6>`	a first, …, sixth level header
`a()`	`<a>`	A hyper link
`br()`	`<br>`	A line break
`div()`	`<div>`	A division with a uniform style
`span()`	`<span>`	An in-line version of division
`strong()`	`<strong>`	Bold text
`em()`	`<em>`	Italicized text
`…`	`…`	…
`HTML()`		Directly passes character strings as HTML

shiny imports HTML builder functions from htmltools.
names(tags) returns a complete valid HTML5 tag list.

Basic widgets

What is a web widget? A web element that users can interact with.
Standard widgets gallery
The first two arguments for each widget function are
- id for widget name: users will not see the name, but you can use it to access the widget’s value. The name should be a character string.
- label for widget label: this label will appear with the widget in your app. It should be a character string, but it can be an empty string "".

The standard Shiny widgets include

function	widget
`actionButton`	Action Button
`checkboxGroupInput`	A group of check boxes
`checkboxInput`	A single check box
`dateInput`	A calendar to aid date selection
`dateRangeInput`	A pair of calendars for selecting a date range
`fileInput`	A file upload control wizard
`helpText`	Help text that can be added to an input form
`numericInput`	A field to enter numbers
`radioButtons`	A set of radio buttons
`selectInput`	A box with choices to select from
`sliderInput`	A slider bar
`submitButton`	A submit button
`textInput`	A field to enter text

Reactive output

*Output functions in ui or ui.R turn R objects into output of UI.

Output function	Creates
`htmlOutput`	raw HTML
`imageOutput`	image
`plotOutput`	plot
`tableOutput`	table
`textOutput`	text
`uiOutput`	raw HTML
`verbatimTextOutput`	text

These *Output functions take output name/ID as input.

render* functions in server or server.R

render function	creates
`renderImage`	images (saved as a link to a source file)
`renderPlot`	plots
`renderPrint`	any printed output
`renderTable`	data frame, matrix, other table like structures
`renderText`	character strings
`renderUI`	a Shiny tag object or HTML

These render* functions take a single argument: an R expression surrounded by {}.
Shiny runs the R expressions inside render* functions once each time a user changes the value of a widget.

ui <- fluidPage(
    titlePanel("a simple example of reactive output"),
    sidebarLayout(
        sidebarPanel(
            selectInput("cyl", "Cylinders",
                        choices = sort(unique(mtcars$cyl)),
                        selected = 4)
        ),
        mainPanel(plotOutput("mpg_boxplot"))
    )
)

server <- function(input, output) {
    ## the `renderPlot` runs every time a user changes input$cyl
    output$mpg_boxplot <- renderPlot({
        ## filtering the cars models in the mtcars dataset
        ## by the input cylinder number
        dat <- subset(mtcars, cyl == input$cyl)
        ## draw a boxplot of mpg for the filtered data
        with(dat, boxplot(mpg))
    })
}

shinyApp(ui, server)

Reactive expressions

Create a reactive expression by the reactive() function, which takes an R expression surrounded by {} similar to render* functions.

server <- function(input, output, session) {
    ## e.g., a simple reactive expression for filtering the cars models
    ## in the mtcars dataset by the input cylinder
    dataInput <- reactive({
        subset(mtcars, cyl == input$cyl)
    })
    ## draw a boxplot of mpg for the filtered data
    output$mpg_boxplot <- renderPlot({
        dat <- dataInput()
        with(dat, boxplot(mpg))
    })
}

Reactive expressions cache values and update them only when it is necessary, which make the app faster.

More advanced HTML widgets

htmlwidgets package provides a framework that helps to bring the best of JavaScript data visualization to R.
example R packages built with htmltwidgets:
- leaflet for geo-spatial mapping powered by JavaScript library leaflet
- dygraphs for time series charting powered by JavaScript library dygraphs
- plotly and Highcharter for general interactive graphics powered by JavaScript library plotly.js and Highcharts, respectively.
- DT for tabular data display powered by JavaScript library DataTables.

leaflet example

locations of earthquakes off Fiji

dygraphs example

plotly example

DT example

More options on UI and control widgets

shinythemes includes several Bootstrap themes from Bootswatch.
shinydashboard makes it easy to use Shiny to create dashboards.
miniUI provides UI widget and layout functions for writing Shiny apps that work well on small screens.
shinyWidgets provides more control widgets that are not available in shiny package.
shinyAce integrates the Ace text editor with Shiny.
shiny.semantic provides a wrapper for Semantic UI.
…

Thanks!

a cool plate found at (UConn) Y lot in last Summer