Let’s Shine with R Shiny (An Intro)

Posted on by erikaris

Last week, I gave a talk at RLadies Jakarta 6th meetup about an intro to R Shiny. Although I already published the presentation on R-Ladies Jakarta’s GitHub, I still feel the urge of sharing it in a blog format. That way, I can explain it in more detail. So, here we go. Enjoy 🙂

What is Shiny?

No, this is not the South Korean boy band.

Shiny is an R package that uses R to build interactive and reactive web apps straight from R, such as data explorers and dashboards. It can be hosted as a standalone app on a webpage or embed them in R Markdown documents. It also can be extended with CSS themes, HTML widgets, and JavaScript actions. What kind of interaction can we add to a Shiny app? Many kinds, from inputting numbers, text, or moving the slider to upload a file. Figure 1 gives the illustration of Shiny in a nutshell and figure 2 gives an example of a beautiful complex shiny App.

Figure 1. Shiny components (figure taken from datacamp)
Figure 2. An Example of a complex Shiny App (taken from https://ceefluz.shinyapps.io/radar/)

In general, building shiny app consists of 4 steps:

  1. Install and load the shiny package.
  2. Create the Shiny UI (webpage) with fluidPage().
    Everything related to customizing UI will happen inside the function fluidPage(). In fact, the entire UI is built by supplying the fluidPage() function with as many arguments as you want.
  3. Create a Shiny server.
    The server is where the logic of the app is implemented
  4. Combine UI and server and run the app.

The four steps above are wrapped into what is called The Shiny Template as follows:

Note that the argument session is optional in the Shiny server. The template above will result in an empty Shiny app. Now, we can start embellishing it.

I. Add Text to Shiny App

  1. Add text as argument to fluidPage().
  2. Add several numbers of text by separating them with commas.
  3. Format the text using h1() for primary header, h2() for secondary header, strong() for bold font, and em() for the italicized font. Explore other formatting functions available on R Documentation.
    For example:

II. Customizing Layouts using sidebarLayout()

The sidebar layout provides a layout that consists of 2 columns, 1 smaller column on the left for the sidebar, and 1 bigger column on the right for the main panel (see Figure 2).

Figure 3. The Sidebar Layout

Sidebar layout may consist of:

  1. sidebarPanel(UI_elements)  –> for the menu
  2. mainPanel(UI_elements, width = 8)  –> for the result of whatever is being clicked on the menu.
  3. conditionalPanel(condition, UI_elements)  –> the panel that is only visible on a certain condition such as the user chooses a certain option, etc.
    1. The condition is written using . instead of $. So, we write condition = "input.source == 'file'" instead of condition = "input$source == 'file'".
    2. it is put inside the sidebarPanel().
      For example:

III. Add Input Components

Format for accessing input: input$id.

  1. textInput(id, label, default_value) .
    Example: textInput("title", "Plot title", "Car speed vs distance to stop") .
  2. textAreaInput(inputId, label, value = "", width = NULL, height = NULL) .
    1. support longer text (multiple rows) than textInput() does.
    2. have a vertical scrollbar, as well as a rows parameter that can determine how many rows are visible.
  3. numericInput(numeric_input_id, label, default_value, min, step, max)  –> notes that default_value, min, step, and max are optional.
    We get a numeric input box with up and down arrow.
    Example 1: numericInput("num", "Number of flowers to show data for", 10, 1, nrow(iris)) .
    Output:

    Figure 4. Example of numericInput().
  4. sliderInput() .
    Format:

    Notes:
    – value = The initial value of the slider. A numeric vector of length one will create a regular slider; a numeric vector of length two will create a double-ended range slider

    Example 1:
    sliderInput("years", "Years", min(gapminder$year), max(gapminder$year), value = c(1977, 2002))

    Example 2:
     sliderInput("height", "Height", min = 66, max = 264, value = 264) .

    Output:

    Figure 5. Example of sliderInput().
  5. checkboxInput(inputId, label, value = FALSE, width = NULL) .
    Example 1:
    checkboxInput("fit", "Add line of best fit") .
    Output:

    Figure 6. Example of checboxInput()

    Example 2: do something when the box is checked. Note that this script is written inside server <- function(input, output) .

    Figure 7. Interaction between the checboxInput() and the plot.
  6. radioButtons(inputId, label, choices = NULL, selected = NULL, inline = FALSE, width = NULL, choiceNames = NULL, choiceValues = NULL) .
    Example:
    UI:
    radioButtons("color", "Point color", c("blue", "red", "green", "black"))
    Server:

    Figure 8. Interaction between radioButtons() with the plot.
  7. selectInput a.k.a dropdown
    Format: selectInput(inputId, label, choices, selected = NULL, multiple = FALSE, selectize = TRUE, width = NULL, size = NULL)  .
    Notes:
    – choices = List of values to select from
    – selected = the initial selected value
    – multiple = Is selection of multiple items allowed? –> value = TRUE or FALSE (default).
    Example:

    Figure 9. Example of selectInput()
  8. colourInput() .
    For providing a color input. Must install the library colourpicker before being able to use the function colourInput().
    Format:
    colourInput(inputId, label, value = "white", showColour = c("both", "text", "background"), palette = c("square", "limited") .Notes:
    – value = default colourExample:
    colourInput("color", "Point color", "blue") .

    Figure 10. Example of colorInput()
  9. fileInput(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected") .
    1. file upload control.
    2. Notes on the function’s parameters:
      1. multiple = if TRUE –> allow uploading multiple files at once.
      2. accept = A character vector of MIME types; gives the browser a hint of what kind of files the server is expecting.
        e.g: accept = c("text/csv", "text/comma-separated-values,text/plain", ".csv") .
      3. placeholder = text that will be shown when there is no file uploaded, yet.

        Figure 11. placeholder.
    3. After the user selects a file, that file gets uploaded to the computer that runs the Shiny app, and it becomes available on the server.
    4. Accessing the uploaded file –> input$id.
      1. It will return a data.frame that contains metadata about the selected file. One of the returned metadata is datapath.
      2. Use input$id$datapath  to directly access the intended file.
      3. We can then proceed to read the files using any file-reading function that accepts a file path as an argument. For example:
        1. read.csv() –> for reading a CSV file.
        2. readLines() –>  for simply reading all the lines in the file.
    5. UI example:
      fileInput("file", "Select a file") .
    6. Server example:

  10. dateInput()
    dateInput(inputId, label, value = NULL, min = NULL, max = NULL, format = "yyyy-mm-dd") .Example:
    dateInput("date1", "Date:", value = "2012-02-29") .

IV. Add Output Components

Format for accessing output: output$id.

Plot

  1. UI:
  2. server:

    notes that the word plot written after output$ represent the id of the input component defined in the UI.
  3. when displaying a plot in a Shiny app using plotOutput(), the height of the plot by default will be 400 pixels. The function plotOutput() has some parameters that can be used to modify the height or width of a plot.

Table

  1. Table with tableOutput()
    1. UI: tableOutput("table_output_id") .
    2. server:
  2. Table with package DT.
    The package DT comes with several benefits that are not available in the basic tableOutput() that are (1) pagination, (2) dropdown list to choose how many entries to show on each page, (3) column sorting, (4) search box, (5) row highlighting.

    Figure 12. The Perks of Using the DT Package.

    Start using DT package by installing and loading the library.

    Then, use DT::dataTableOutput('id') and DT::renderDataTable(), which is analogous to that of outputTable('id') and renderTable() pair. Example:

Text

  1. UI: textOutput("id") .
  2. Server: output$text_output_id <- renderText({expr}, env = parent.frame(), quoted = FALSE, outputArgs = list()) or we can also use renderPrint() . Example:

    Output:

    Figure 13. Example of Shiny App with more components.

    , l Figure 14. Code with some explanation.

downloadButton

Format UI: downloadButton(download_id, label = "Download", class = NULL, ...) .
Format Server: output$download_id <- downloadHandler(filename, content, contentType = NA, outputArgs = list()) .
Notes:
– filename = name of the downloaded file
– content = the content of the downloaded file, the argument is the path.
Example:
1. UI:

2. Server:

Figure 15. Download Button

Word Cloud

  1. use the library wordcloud2 –> install.packages('wordcloud2').
  2. UI –> wordcloud2Output(id) .
  3. Server –>

    The function create_wordcloud is a self-defined function and not part of the wordcloud package. It utilizes the function wordcloud2()from the library wordclud2.

Image

  1. UI: imageOutplut()
  2. Server: renderImage()

V. Write the Logic in server

The activities in server basically consists of 3 steps:

  1. renderComponent({...})  –> renderText({...}) , renderTable({...}) , renderPlot({...}) .
  2. write what to render inside the renderComponent function.
    1. Getting the value of an input: input$input_id.
      Example:
  3. assign the result to a variable named output$output_id.

VI. Split the Outputs into Tabs (optional)

  1. wrap UI elements in tabPanel().
  2. then wrap all tabs inside tabsetPanel() –> function to create a container for the tab panels.
  3. Usage example:
  4. Output example:

    Figure 16. Example of Tabs

VII. Modify the App’s Look

  1. utilizing CSS
  2. implement the CSS inside the UI (fluidPage()) using function tags$style('put the CSS here').
  3. Example:

    Figure 17. Using CSS to stylize Shiny

VIII. Run Your Shiny App

After designing the UI and setup the server code as above, the last step left to do is run the shinyApp using this simple syntax: shinyApp(ui = ui, server = server). See the complete example with the explanation below:

Output:

Figure 18. Example of Shiny with a plot, table, textInput, and numericInputCode with explanation:

Figure 19. Explanation for the code

IX. Shiny + Plotly

Why combine Shiny with Plotly? The answer is to make the shiny plot even more interactive because plotly already comes with its own interactive toolbar menu and tooltip labels as can be seen in the illustration below.

Figure 20. Example of Shiny + Plotly
  1. install and load the plotly library:

    Note that plotly will also require us to install the dependent library hexbin which also requires our machine to have a gfortran compiler installed. For those who use Manjaro, you can install gfortran compiler using command sudo pacman -S gcc-fortran.
  2. UI: plotlyOutput(id) .
  3. Server:
    output$plot_output_id <- renderPlotly({things_to_create_the_plot}) .
  4. shiny vs plotly
    1. plotOutput()  vs  plotlyOutput()
    2. renderPlot()  vs  renderPlotly()
    3. ggplot()  vs  ggplotly()

That’s all that I can give you for an intro to Shiny for now. If you’d like to learn by yourself, you might wanna check this Shiny gallery from RStudio. There are plenty of beautiful Shiny projects that could inspire us for sure. Stay tuned because I will be posting more about Shiny.

Cheers,

@erikaris

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Show Buttons
Hide Buttons