Demo Shiny Notebook

Introduction

What is Shiny?

Shiny is the coding package I used to make the Timmy’s Index cost calculator! It’s a ‘package’ (collection of codes) specifically for making web apps and specialises in interactive options.

What is R?

R is the programming language (like Python or Javascript) that I code in. It’s a common choice for people who work with statistics and data, but less common for websites or complex functionalities. For instance, I made this storymap using a combo of Javascript and HTML. I don’t think you could do anything like it in R.

What is RStudio?

RStudio is an ‘Integrated Development Environment’ that allows you to code in R. Think of R as the ‘back of the house’ doing all the heavy coding work and RStudio as the ‘front of the house’ that allows you to place your ‘orders’ (code requests) to R.

Disclaimer: I am by no means any kind of expert in Shiny or R in general! So I make no guarantees that I’m taking the most ‘efficient’ or optimal route (case in point: unless your wifi is fantastic, you probably won’t be able to load this Shiny app - but I’ll show it to you live and explain what’s wrong with it, even though it got a great mark as a class project :) ).

Pre-Meeting Set-Up

This is totally optional but would be helpful if you’d like to follow along with what I’m doing ‘live’!

1: Install R and RStudio

Not going to lie, I haven’t done this for years and don’t fully remember how it goes. But it shouldn’t be too different from any other kind of app installation! Feel free to shoot me a message/email if you run into problems. RStudio Desktop - Posit

2: Install the packages you need: packages are collections of code that extend the abilities of R.

This can be done by typing in the console of RStudio, one line at a time:

install.packages(“shiny”)
install.packages(“tidyverse”)
install.packages(“shinythemes”)
install.packages(“bslib”)
install.packages(“shinydashboard”)

3: These are the files that I’m using for the demo! Feel free to download them ahead of time. But you absolutely don’t have to.

Completed shiny app

Note: Shiny apps, for whatever reason, must be titled ‘app’. Or so I’ve been told. So you need to put each shiny app in a different folder since you can’t have two R files with the same name in the same folder.

Blank shiny app (this is for you to fill in as we go)

This R notebook.

What We’re Covering

You don’t need to read this ahead of time; it’s basically my notes.

1: Coding Review

If you haven’t coded for a while, no worries! Here’s some basic syntax/ground guidelines to remember:

1) Common terms:

• Variables: these are the building blocks of your code! It’s how you store information while coding. In R, variables can be defined using variableName <- "whatever you want the variable to be". There are different kinds of variables like integers vs. true/false, but we don’t really need to worry about that right now.
• Functions: functions are like collections of code that allow you to do something. For example, in R, the function ggplot() allows you to make a graph.
• Packages: R on its own isn’t that powerful, so other people have created packages of functions that can be installed to expand its capabilities.
  • Common R packages: https://support.posit.co/hc/en-us/articles/201057987-Quick-list-of-useful-R-packages

2) Code is case sensitive! It’s good to have a system for naming variables so you don’t get tripped up.

For instance: camelCaseVariable <- "This is camel case" or underscores_between_words <- "This is a bit more common"

3) Code is very step-by-step and procedural. You usually have to define everything, which can be frustrating, but also gives you a lot of flexibility to customize.

When your program does as it’s programmed to do

4) If you’re sharing code with others, it’s good practice to comment on your code.

It can also help you if you’re going back to your work later and need to review/remember what you’ve done.

You can add comments using # .

# This is a comment! Usually, comment text is in a different colour.

print("This is not a comment. This is me telling the computer to print something.")

5) R uses Markdown!

This means that for text formatting, instead of being able to just bold or make text a header by pressing a button, we have to tell the computer how we want text formatted using code (side note for all you social media people: you can use this to format text on Discord too :)) )

For example, on its own line, # “This would create a first-level (large) header”

In Shiny, we use h1(“This is a first level header) and strong(”This makes bold text.).

2: The ‘Parts’ of a Shiny App

At its most basic, Shiny apps have three parts:

1. UI: this is the ‘front end’. It’s what a user sees. In here, we include:
   • [Most of] the text that we include in the webpage.
   • Any interactive components like buttons or sliders.
   • Aesthetic theme settings.
2. Server: this is the ‘back end’. It’s the code that makes the interactive stuff interactive! Here, we include output statements that tell the computer how to interact with our UI and do ‘stuff’ (I know that’s vague! We’ll see what that means a bit later).
3. Call function: this is always shinyApp(ui, server). It tells the computer to run your app.

3: Building the Inputs (UI)

But first, libraries! Remember those packages we installed? We only need to install packages once but they need to be loaded every time we have a new file. We do that with the command library().

Copy the below to the top of your Shiny app:

# Loading necessary packages
library(shiny) 

# The following are for further customizing Shiny. We don't use them all here.
library(shinythemes)
library(bslib)
library(shinydashboard)

A: Block Structure Imagine that your UI is a blank rectangle that you need to divide up into boxes, with each box being a different part of the site.

The common way to do this is by using the fluidPage() function. Having just fluidPage() is like having everything all in one rectangle, with no dividers whatsoever.

But sometimes we want dividers! Maybe we want an extra box on the side. That’s a sidebarLayout(), so we add that within the fluidPage():

ui <- fluidPage(
  sidebarLayout()
)

When we use a sidebarLayout, we still need to define each of the panels within it. Here, I am adding both the mainPanel() and the sidebarPanel(). You’ll also notice I added instructions to specify that I want the sidebar to be on the left (by default, it’s on the right), and I added text to each of the panels using the ‘paragraph’ (p()) text option.

ui <- fluidPage(
    sidebarLayout(position = "left",
        mainPanel(p("Here lies the main panel.")),
        sidebarPanel(p("And this is the side panel")),
  )
)

In the Timmy’s index, I did something slightly more complex with dashboard layouts and boxes, but we won’t go there for now.

B: Adding inputs

Inputs in Shiny are things that people can interact with - sliders, buttons, radio buttons, checkboxes, etc. And later, we can ‘link them up’ to certain outputs to make that output reactive. - A list of common inputs: Shiny - UI Inputs - The basic formula for an input is inputFunction(inputName, label, optionalCustomizations).

For today, to our mainPanel(), we’re going to add two slider inputs that someone can use to specify how far away their home is from a Tim Hortons and how much should be charged per km of travel:

mainPanel(p("Here lies the main panel."),
          sliderInput("distance_tims", 
                      strong("Hours to the nearest Tim Hortons"), 
                      min = 0, max = 10, value = 2, step = 0.5),
          
          sliderInput("you try this one! call it cost_km_travel. 
                      Make it range from 0-5, with a default value of 0.72 and a step of 0.01")
          )

In this case, for the first input, sliderInput()is the function (creating a slider), “distance_tims” is the name I assigned to the slider, the text within strong() is the label, min is the smallest number allowed on the slider, max is the largest, value is the default value, and step is how much the value will change by when you move the slider.

**C: Adding the outputs (part 1*)**:

For every input, there must be an output! We’ll be coding the functionality of the output in the server section, but for now, we need to tell the output where it’s going to go in our webpage. Here, we’re going to add the output (the calculation) to our sidebar:

sidebarPanel(p("And this is the side panel"),
             textOutput("travel_cost"),)

Just like there are many kinds of inputs, you can have many kinds of outputs, including interactive graphs, maps, images, tables, UI etc. - Shiny - Display reactive output.

4: Building the Outputs (Server)

Right now, that textOutput() is doing nothing, because we haven’t told it what the output should be. So now, we’ll be doing that in the server section of the code.

The basic formula for an output is output$outputName <- renderType({ add_instructions_here}). This is telling the computer that the output variable outputName should render (create) a particular Type, whether that be a map, an image, or in our case, text that changes based on the input. We add the instructions for how to treat the output in add_instructions_here.

For our application, we want to render (create) Text that changes based on the input of the numbers. We do this with:

output$travel_cost <- renderText({
  paste("The travel cost is: $", input$distance_tims * 70 * 2 * input$cost_km_travel)
})

The paste statement tells the computer the output should be the text (“The travel cost…”) PLUS a calculation based on the input statement.

If you run this as is, you’ll notice a few weird formatting quirks - there is a space between the $ and the number, and the number isn’t formatted as we normally would money (i.e., $ 340.2 instead of $340.20). I fixed that with a slightly more complicated render below:

output$travel_cost <- renderText({
    mileage_total <- formatC(input$distance_tims * 70 * 2* input$cost_km_travel, format = "f", digits = 2, big.mark = ",")
    paste("The estimated round-trip travel costs based on this length of time and mileage cost is:", paste0("$", mileage_total, "."))
  })

In this render, I first create a new variable, mileage_total, which is a formatted version of the calculation. I then add the paste statement, and a second paste statement within it for the calculation with a $ included.

5: Some Aesthetic Changes (back to the UI!)

If you load up what we have now, it’s functional, but not pretty. We can change that back in the UI section!

The easiest way to change themes is to add a pre-made theme. There are a bunch available online. I like the themes offered by bslib and shinypackage. For example:

fluidPage(theme = shinyTheme("simplex"),
          sidebarLayout())

But sometimes, you want even more control over your theme! You can do that with customizing the options in bslib, and, for even more customizability, some knowledge of HTML and CSS:

 theme = bs_theme(bg = "white", # colour settings
                                 fg = "black", 
                                 primary = "#DC0F2D",  
                                 base_font = font_google("Noto Sans"), # font settings
                                 code_font = font_google("Noto Sans")),
                
                  tags$head( # some custom HTML to change the aesthetic of the site. 
                             # usually preferable to do this in a separate document 
                             # if you're doing anything complex
                  tags$style(HTML("body {padding: 25px;} 
                                   h2 {font_size: 20px;}
                                   h3 {font_size: 16px;}
                                   p {font_size: 14px;}
                                  "))
                )

6: Run and publish the app

The last step (well, actually one I do all the time), is to run the app!

You can also publish your apps online for free (with some space/access limitations): Shiny - Share your apps.

Other things to check out if you’re interested

Definitive textbook on using Shiny: Welcome | Mastering Shiny

Some featured Shiny apps: Shiny for R Gallery