Using Actions And Modals With DataTables For Data Exploration In Shiny

Modal windows can be helpful for data exploration and to avoid cluttering in our shiny applications. They can contain any combination of shiny inputs, shiny outputs, and html. The shiny app below is one example. It helps to explore various World Bank indicators and to make comparisons accross nations. The code and the data are available on GitHub

Main libraries used:

• DT: provides an R interface to the JavaScript library DataTables.
• shinyBS: for modal windows and tooltips.
• plotly: to create animations in modal windows.

To use this app:

1. You can select rows by clicking on them. If a country does not show on the first page, you can search it in the search box.
2. After you select a couple of rows, you can open an animation modal window by clicking the compare button.
3. You can select X-axis and Y-axis fields on the modal window.
4. Play the animation to see how the indicators change over time for the selected countries.

5. You can also download the data for the selected nations by clicking at the button at the bottom of the modal window.

   Note: when you hover over the action buttons, tooltips display.

---

One example modal window screenshot:

The server and ui parts of the R code are below. The code and the data are available on GitHub.

# server.R

library(data.table)
library(DT)
library(tidyverse)
library(plotly)



countries = fread("data/countries_region_income_group.csv")
wb = fread("data/world_bank_data.csv")

wb = as_data_frame(wb)
cols = 2:13  
wb[,cols] = apply(wb[,cols], 2, function(x) as.numeric(as.character(x)))



library(shiny)
library(DT)

countries$Flag = paste0('<img src ="',tolower(countries$Code),'.png"', ' alt="Flag not available"  height="30" width="40" ></img>')
  



shinyServer(function(input, output){
  

  output$select_x_axis <- renderUI({
    selectInput("Select_field_x_axis", "X-axis:",
                choices = names(wb)[!(names(wb) %in% c("Country Name", "Year", "Surface area (sq. km)" ))],
                selected = "Death rate, crude (per 1,000 people)"
                )
  })
  
  
  output$select_y_axis <- renderUI({
    selectInput("Select_field_y_axis", "Y-axis:",
                choices = names(wb)[!(names(wb) %in% c("Country Name", "Year", "Surface area (sq. km)" ))],
                selected = "Fertility rate, total (births per woman)"
    )
  })
  

  
  vals = reactiveValues()
  vals$Data = countries
  
  output$mytable <- DT::renderDataTable({
    
    DT::datatable(vals$Data, escape = FALSE, rownames = FALSE, options = list(
      pageLength = 10
    )) 
  })
  
  
  observeEvent(input$delete_row,{
    x = isolate(vals$Data)
    x = x[-input$mytable_rows_selected,]
    vals$Data = x
  })
  
  
  observeEvent(input$show_all,{
    vals$Data= countries
  })
  

selected_nations = reactive({
      x = isolate(vals$Data)
      x = x[input$mytable_rows_selected,]
      x$Country
})

selected_data = reactive({
  wb %>% filter(`Country Name` %in% selected_nations())
})


output$downloadData <- downloadHandler(
  filename = paste("Data_for_selected_countries",Sys.Date(), ".csv", sep=""),
  content = function(file) {
    write.csv(selected_data(), file)
  }
)


local_df = reactive({
  
  req(input$Select_field_x_axis)
  req(input$Select_field_y_axis)
  
  mydata = selected_data()
  df = data_frame(xaxis = mydata[[input$Select_field_x_axis]],
                    yaxis = mydata[[input$Select_field_y_axis]],
                    Population = mydata[["Population, total"]],
                    Country = mydata[["Country Name"]],
                    Year = mydata[["Year"]])
    df
  
})


output$plotly_animation = renderPlotly({

  plot_ly(data = local_df(),
    x = ~xaxis, 
    y = ~yaxis, 
    size = ~Population, 
    color = ~Country, 
    frame = ~Year, 
    text = ~Country, 
    hoverinfo = "text",
    type = 'scatter',
    mode = 'markers'
  ) %>% layout( xaxis = list( title = input$Select_field_x_axis), 
                       yaxis = list( title=input$Select_field_y_axis) ) %>%
    animation_opts(
      500, easing = "elastic", redraw = FALSE
    ) %>%
    animation_slider(
      currentvalue = list(prefix = "YEAR ", font = list(color="red"))
    )

 
})
})

# ui.R


library(shiny)
library(shinydashboard)
library(shinyBS)
library(DT)
library(plotly)

dashboardPage(dashboardHeader(disable = T),
              dashboardSidebar(disable = T),
              dashboardBody(
                fluidPage(
                  box(width=12,
                      h3(strong("Using Actions And Modals With DataTables For Data Exploration In Shiny"), style="text-align:center;color:#0000ff;font-size:150%"),
                      hr(),
                      helpText("You can select rows by clicking on them. After you select a couple of rows, you can open an animation modal window by clicking the compare button",
                               style="text-align:center"),
                      br(),
                      column(6,offset = 6,
                             
                             column(2, 
                                    actionButton("delete_row", "Hide", style="text-align:center;color:#cc3300; font-size:120%")),
                                    bsTooltip("delete_row", "Hides the selected row(s). To select any row, click on it.",
                                       "right", options = list(container = "body")),
                             
                             
                             column(2, 
                                    actionButton("compare", "Compare", style="text-align:center;color: #0000ff; font-size:120%")),
                                     bsTooltip("compare", "Shows an animation modal window on the selected countries. If a country does not show on the first page, you can search it in the search box.",
                                       "right", options = list(container = "body")),
                             column(2, 
                                    actionButton("show_all", "Show All", style="text-align:center;color:#996600; font-size:120%")),
                             bsTooltip("show_all", "Shows countries that were hidden",
                                       "right", options = list(container = "body"))), 
                      
                      column(12,DT::dataTableOutput("mytable")))
                ),
                br(),
               
                br(),
                
                bsModal("modalExample", strong("Comparison Of Selected Nations", style="color:#0000ff; font-size:120%"), "compare", size = "large",
                      
                      fluidRow(
                        helpText("You can select X-axis and Y-axis fields below. You can also download the data for the selected nations by clicking at the button at the bottom.",
                                 style="text-align:center"),
                        div(style="display: inline-block;vertical-align:top; width: 350px;", uiOutput('select_x_axis')),
                        div(style="display: inline-block;vertical-align:top; width: 350px;", uiOutput('select_y_axis'))
                        ),
                     
                      hr(),
                      br(),
                      
                      plotlyOutput("plotly_animation"),
                      br(),
                      hr(),
                      div(style="display: inline-block;vertical-align:top; width: 200px;", 
                          downloadButton('downloadData', 'Download Data', style="color:#0000ff; font-size:120%"),
                          bsTooltip("downloadData", "You can click this if you want to download the data for the selected nation(s).",
                                    "right", options = list(container = "body"))
                          ))
                        
                )
              )