ETC5523: Communicating with Data

Communicating data with interactive web apps

Lecturer: Michael Lydeamore

Department of Econometrics and Business Statistics



Aim

  • Use interactivity to enable data exploration, understanding and communication
  • Design web apps with displays that fit for the purpose
  • Make web applications using shiny

Why

Interactive web apps can

  • connect people and data,
  • make systems playful,
  • prompt self-reflection,
  • personalise the view, and
  • reduce cognitive load.

Human Computer Interaction

Open-ended dialogue between the user and the computer

  • Enable audience to some degree co-author narrative, i.e. narratives moves away from being author-guided to audience-driven.
  • Leverage user interaction techniques to improve user experience, e.g. 
    • Show details on demand
    • Reduce overall cognitive load
    • Personalised view

User Interactions

Image from Spencer (2022, Feb. 17). Data in Wonderland. Retrieved from https://ssp3nc3r.github.io/data_in_wonderland

User Inputs

Image from Spencer (2022, Feb. 17). Data in Wonderland. Retrieved from https://ssp3nc3r.github.io/data_in_wonderland

Criteria for the Design of Interactive Data Visualisation

Tominski, Christian, and Heidrun Schumann (2020) Interactive Visual Data Analysis. CRC Press.

Quality criteria

Expressiveness (Mandatory Condition)

An interactive visual representation is expressive if it allows the user to carry out the actions needed to acquire the desired information in the data.

Effectiveness (Goal-Oriented Condition)

A measure of how well the user can convey an interaction intent to the computer.

Efficiency (Desired Condition)

The balance of benefits and costs for using an interactive visualisation approach. E.g. does the human effort of building the interactive visualisation outweigh its benefits? Are the efforts of users to interact with it offset the information gained for users?

Goals

  • Exploration promotes undirected search
  • Description characterises observations by associated data elements
  • Explanation identifies contributing causes behind an observation
  • Confirmation find concrete evidences for or against a hypothesis
  • Presentation communicates results of a confirmed analysis

Example: Global Temperature

https://climate.nasa.gov/vital-signs/global-temperature/

Example: Handwriting with Neural Network

Example: How you will die

https://flowingdata.com/2016/01/19/how-you-will-die/

What is shiny?

Demo App

How to get started with shiny?

  • RStudio > File > New File > Shiny Web App…
  • Using snippet: Type shinyapp and Shift + Tab

User Interface

Writing HTML from R

library(shiny)
tags$html(
  tags$body(
    h1('My first heading'),
    p('My first paragraph, with some ', strong('bold'), ' text.'),
    div(id = 'myDiv', class = 'simpleDiv',
        'Here is a div with some attributes.')
  )
)

My first heading

My first paragraph, with some bold text.

Here is a div with some attributes.

Writing HTML from R

<html>
  <body>
    <h1>My first heading</h1>
    <p>
      My first paragraph, with some 
      <strong>bold</strong>
       text.
    </p>
    <div id="myDiv" class="simpleDiv">Here is a div with some attributes.</div>
  </body>
</html>
  • Use includeCSS() and includeScript() to include CSS and JS files

HTML Inputs Part 1

actionButton("id1", "Push")
actionLink("id2", "Link")
Link 


checkboxGroupInput("id3", "Select", 
                   choices = c("Mon", "Tue", "Wed"),
                   selected = "Mon")


checkboxInput("id4", "I accept")


fileInput("id5", "Upload file")

HTML Inputs Part 2

numericInput("id6", "Enter number", 
             value = 1, min = 1, max = 10, step = 1)


radioButtons("id7", "Select one", 
             choices = c("Pizza", "Dumplings", "Sushi"))


passwordInput("id8", "Enter password")


textInput("id9", "Enter text", value = "Enter coments here")

HTML Input Part 3

Note: calendar date picker pop up doesn’t show up here.

dateInput("id10", "Select day")
dateRangeInput("id11", "Select days")
to 


selectInput("id12", "Select a drink", choices = c("Tea", "Coffee"))


sliderInput("id13", "How many?", min = 0, max = 10, value = 0)

Understanding inputs and outputs

Every input and output has an id (e.g. "id1").

  • input$id1 gives the current value of the input
  • output$id1 is used to assign a value to the output

For example,

output$myplot <- renderPlot({
  plot(cars)
})

Here, myplot is the id of the output, and renderPlot() is used to create a plot output.

Understanding inputs and outputs

This is connected to an input in the UI, e.g.

plotOutput("myplot")

Reactive expressions

There are also reactive expressions, which are used to create values that depend on inputs and other reactive expressions.

input_plus_10 <- reactive({
  input$id1 + 10
})

textOutput("id1_plus_10", input_plus_10())

Note the function-style calling of the reactive expression. This is easy to forget!

The req function

When you have inputs that are required for an output to be generated, you can use the req function to stop execution of the code until the required inputs are available.

This is useful when you have inputs that are optional, e.g. a date range input that may be empty.

output$myplot <- renderPlot({
  req(input$date_range)  # Stop here if date_range is NULL
  plot(cars)
})

Putting it together

Layouts

fluidRow + columns

This is using bootstrap

fluidPage(
  fluidRow(column(width = 4,
                  h3("Some informative table"),
                  tableOutput("mytable")),
           column(width = 4, offset = 3,
                  h3("Fancy plot"),
                  plotOutput("myplot"))),
  fluidRow(column(width = 12, 
                  "Minimum width is 1 and maximum width is 12"))
)
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <h3>Some informative table</h3>
      <div id="mytable" class="shiny-html-output"></div>
    </div>
    <div class="col-sm-4 offset-md-3 col-sm-offset-3">
      <h3>Fancy plot</h3>
      <div id="myplot" class="shiny-plot-output" style="width:100%;height:400px;"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">Minimum width is 1 and maximum width is 12</div>
  </div>
</div>

sidebarLayout

fluidPage(sidebarLayout(
  sidebarPanel(h3("User control"),
               actionButton("id1", "Push")),
  mainPanel(h3("Main Panel"),
            plotOutput("myplot"))
))
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <form class="well" role="complementary">
        <h3>User control</h3>
        <button id="id1" type="button" class="btn btn-default action-button">Push</button>
      </form>
    </div>
    <div class="col-sm-8" role="main">
      <h3>Main Panel</h3>
      <div id="myplot" class="shiny-plot-output" style="width:100%;height:400px;"></div>
    </div>
  </div>
</div>

Including a shiny app in a package

  • Inside your packages inst folder:
    • Create a folder called shiny
    • Put your app files inside this folder
    • Put stylesheets and scripts in inst/shiny/www

The www folder is special, and Shiny knows to look for static files there.

Including your shiny app in a package

To include a function that launches your app, you can use the following code:

#' Launch my shiny app
#' 
#' @export
#' @importFrom shiny runApp
run_my_app <- function() {
  appDir <- system.file("shiny", package = "yourpackagename")

  shiny::runApp(appDir)
}

Server & Client Communication

Demo App

Server and User Interface Outputs

server ui
renderDataTable dataTableOutput
renderImage imageOutput
renderPlot plotOutput
renderPrint verbatimTextOutput
renderTable tableOutput
renderText textOutput
renderUI uiOutput or htmlOutput

Reactivity

  • reactiveValues creates your own reactive values
  • isolate prevents reactions
  • reactive caches its value to reduce computation and notifies its dependencies when it has been invalidated
  • observeEvent runs code when the first argument changes
  • observe runs code when any reactive elements within it changes

Debugging

  • browser() + breaking points

How to deploy your Shiny app?

shinyapps.io

Week 9 Lesson

Summary

  • We went through the benefits of interactivity for communicating data
  • We considered how to design displays for web apps
  • You learnt how to use make web apps using shiny

Resources

Demo app

library(shiny)
library(ggplot2)
library(dplyr)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(version = 5, bootswatch = "flatly"),
  includeCSS("www/style.css"),

  titlePanel("Women's Premier League Match Explorer"),

  # Make the sidebar narrower (3/12) and the main panel wider (9/12)
  sidebarLayout(
    sidebarPanel(
      width = 3,
      sliderInput(
        "top_batters",
        "Number of top batters",
        min = 1, max = 50, value = 20
      ),
      selectizeInput(
        "season",
        "Season",
        choices = sort(unique(ipldata$season)),
        selected = sort(unique(ipldata$season)),
        multiple = TRUE,
        options = list(placeholder = "Choose season(s)")
      )
    ),
    mainPanel(
      width = 9,
      # Let the plot breathe vertically
      plotOutput("distPlot", height = "75vh")
    )
  )
)

server <- function(input, output, session) {

  output$distPlot <- renderPlot({
    req(input$season, input$top_batters)

    ipldata |>
      summarise_best_batters() |>
      ungroup() |>
      filter(boundary_percent > 0, season %in% input$season) |>
      arrange(desc(runs)) |>
      slice(1:input$top_batters) |>
      ggplot(aes(y = boundary_percent, x = dot_percent, size = 2*balls_faced)) +
      geom_point(colour = "red", alpha = 0.3) +
      geom_text(
        aes(label = striker),
        vjust = -0.5, hjust = 0.5, color = "#013369",
        position = position_dodge(0.9), size = 5
      ) +
      labs(x = "Dot Percent", y = "Boundary Percent") +
      theme_minimal(base_size = 13) +
      theme(
        plot.title.position = "plot",
        panel.grid.minor = element_blank(),
        legend.position = "none",
        axis.title = element_text(face = "bold")
      )
  })
}

shinyApp(ui = ui, server = server)

Improving the demo app

library(shiny)
library(ggplot2)
library(dplyr)
library(bslib)
library(plotly)

ui <- fluidPage(
  theme = bs_theme(version = 5, bootswatch = "flatly"),
  includeCSS("www/style.css"),

  titlePanel("Women's Premier League Match Explorer"),

  # Make the sidebar narrower (3/12) and the main panel wider (9/12)
  sidebarLayout(
    sidebarPanel(
      width = 3,
      sliderInput(
        "top_batters",
        "Number of top batters",
        min = 1, max = 50, value = 20
      ),
      selectizeInput(
        "season",
        "Season",
        choices = sort(unique(ipldata$season)),
        selected = sort(unique(ipldata$season)),
        multiple = TRUE,
        options = list(placeholder = "Choose season(s)")
      )
    ),
    mainPanel(
      width = 9,
      # Let the plot breathe vertically
      plotlyOutput("distPlot", height = "75vh"),
      markdown("Data courtesy of [cricsheet.org](cricsheet.org) via the `cricketdata` package"),
      downloadButton("download_plot")

    )
  )
)

server <- function(input, output, session) {

  label_percent <- scales::label_percent(accuracy = 0.1)


  plot <- reactive({
    req(input$season, input$top_batters)

    ipldata |>
      summarise_best_batters() |>
      ungroup() |>
      filter(boundary_percent > 0, season %in% input$season) |>
      arrange(desc(runs)) |>
      slice(1:input$top_batters) |>
      mutate(
        text = paste0("Dot Balls: ", label_percent(dot_percent/100),
                      "<br>Strike Rate: ", round(strikerate, digits = 1),
                      "<br>Boundaries: ", label_percent(boundary_percent/100),
                      "<br>Runs: ", runs,
                      "<br>Balls Faced: ", balls_faced,
                      ifelse(length(input$season) > 1, paste0("<br>Year: ", season), ""))
      ) |>
      ggplot(
        aes(text = text)
      ) +
      geom_point(
        aes(y = boundary_percent, x = dot_percent, size = 2*balls_faced),
        colour = "red", alpha = 0.3) +
      geom_text(
        aes(y = boundary_percent, x = dot_percent, label = striker),
        vjust = -0.5, hjust = 0.5, color = "#013369",
        position = position_dodge(0.9), size = 5
      ) +
      labs(x = "Dot Percent", y = "Boundary Percent") +
      theme_minimal(base_size = 13) +
      theme(
        plot.title.position = "plot",
        panel.grid.minor = element_blank(),
        legend.position = "none",
        axis.title = element_text(face = "bold")
      )
  }
  )
  output$distPlot <- renderPlotly({

    ggplotly(plot(), tooltip = "text")
  })

  output$download_plot <- downloadHandler(
    filename = function() {
      paste0("wpl-top",input$top_batters,"-",input$season, ".png")
    },

    content = function(file) {
      ggsave(plot = plot(), filename = file, bg = "white")
    }
  )
}

shinyApp(ui = ui, server = server)