Demonstrating the Shiny package in R by Mapping The Amazing Race

By Jonathan Fivelsdal

Background on Shiny

RStudio is a company that created the RStudio IDE, which is a popular IDE among R users

which provides a graphical user interface (GUI) and a variety of tools for R programmers to use.

The shiny package was also created by RStudio. Shiny is a package that allows R programmers

to create interactive web applications without using HTML, JavaScript, CSS, or any common

web development framework or language [4].

Background on The Amazing Race

The Amazing Race is a show on CBS where a number of teams travel the world in a race to win 1

million dollars. The race is broken up into a number of segments called a leg of the race.

Typically, each episode represents one leg of the race. While on the race, each team has to

compete a number of tasks before proceeding to the final destination of a leg of the race which is

known as the pit stop. The last team to finish the required leg tasks and reach the pit stop behind

all of the other teams is usually eliminated from the race (except for when a particular leg is

designated as a non-elimination leg). As of April 2015, twenty five complete seasons of the U.S.

version of The Amazing Race have been aired. Season 26 began airing in early 2015, however as

of April 2015, the whole 26th season has not been shown in full on television.

Background on The Amazing Race App

I created an app to map the locations that have been featured on The Amazing Race over the past

twenty five seasons of the show using the R programming language [3]. Two packages were

primarily used to create the app. The leaflet package was used to create the map and markers

used to identify where the teams on the show have travelled [2]. The shiny package was used to

create the app itself and the menus used to interact with the map [4]. To run the app in R, you

will need to install the leaflet package which can be installed by typing the command

devtools::install_github("rstudio/leaflet") into the R console. Properties of the shiny package will

be explained by demonstrating how the shiny code used in the app works. Within this report, the

names of functions will be indicated by using italicized text to denote an R function.

There are a couple of ways to access the app. One way is to download server.R, ui.R,

AmazingRace Locations.csv and AmazingRaceContestants.csv files and save them within a

folder (make sure that all of these files are in the same folder), set the working directory to the

folder that contains the server.R and ui.R files (use the setwd() command), load the shiny

package within the console window, and then type in runApp() in the console window in order to

load the application. The other way to access the app is by going to the following link

https://jonfivelsdal.shinyapps.io/AmazingRaceApp1/. Code from both the server.R and ui.R

included in the html document named AmazingRaceAppCode.html.

Getting Ready to Create a Shiny Application

After installing R and getting R setup for use, you need to install the shiny package before you

can create a shiny application. Shiny is on CRAN which is a large repository of R packages and

so you can use the command install.packages(shiny) in order to install shiny. Shiny

applications are composed of at least two R scripts, one which is called server.R and the other

script called ui.R. The ui in ui.R stands for user interface. The scripts server.R and ui.R are

required for any shiny application and should be placed within the same folder. The ui.R script

that you create for the application contains the code that describes the overall layout of the

application and how objects are to be displayed in the application that you create. The script

server.R controls how user input and data is processed by the application. In both the ui.R script

and the server.R script, you should include the command library(shiny) in order to access the

functionality of the Shiny package in both scripts. In the next two sections, the server.R function

and ui.R functions will be examined more closely.

Examining the Code in ui.R for the The Amazing Race App

The first function used in the ui.R script for The Amazing Race application is called shinyUI. All

the code in the script except for the main packages loaded at the top of the script are enclosed

within the parentheses of the shinyUI function. As of Shiny 0.10, the shinyUI function is no

longer required. In earlier versions of Shiny, the function shinyUI was used to register a user

interface. The shinyUI function is used for backward compatibility for older applications. It is

not necessary to include this function in newer Shiny applications.

The next function that is used in ui.R is called fluidPage. As the name suggests, fluidPage

creates a fluid page layout for the application that is being created. A fluid page layout is

composed of rows and columns. The rows of the layout are there to ensure the elements of a row

appear on the same line (provided the browser has an adequate width).The columns define the

amount of horizontal space within a 12-unit wide grid its elements should occupy. The

components in a fluid page are scaled to fill the width of an internet browser in real time. All of

the user interface elements created by shiny functions are enclosed within the fluidPage function.

Now a variety of functions used to create various menus and items displayed in the application

will be explained. The function titlePanel is used to display the title of the application at the top

of the internet browser in bold. The function has two parameters which are title and windowTitle.

The title parameter is required and when set it will show the value provided for the title attribute

at the top of the browser in bold. The windowTitle parameter is optional and by default is set

equal to the value of the title parameter. The windowTitle parameter controls what is displayed

in the title bar of the browser window. The way a sidebar is displayed by the sidebarLayout

function. The sidebarlLayout function has 4 parameters which are sidebarPanel, mainPanel,

position, and fluid. You can set what kind of input controls will be displayed on the sidebar using

the sidebarPanel parameter. The mainPanel parameter is used to define the kind of output that

will be displayed in the browser. The position parameter of the sidebarLayout function sets the

direction of the sidebar as to whether it will be placed to the left of the main area or to the right

of the main area (if the parameter is not explicitly set, the sidebar will be placed to the left of the

main area). The last parameter of sidebarLayout is named fluid. If fluid is set to true, the sidebar

will have a fluid layout and if fluid is set to false, then the sidebar will have a fixed layout. For

The Amazing Race app, the sidebarPanel parameter in the sidebarLayout function is set equal to

the sidebarPanel function, the mainPanel parameter in the sidebarLayout function is set equal to

the mainPanel function and the two remaining parameters are not explicitly set and so the

parameters have the default values (the sidebar is to the left of the main area and the sidebar

layout is fluid). As the names suggest, the design of the sidebar panel is made with the

sidebarPanel function and the output that is displayed on the main panel is defined in the

mainPanel function. First the contents of the mainPanel function will be discussed and then the

contents of the sidebarPanel function will be discussed.

Contents of the mainPanel Function

Output elements can be specified within the mainPanel function that will then be passed to

sidebarLayout. Below is code from The Amazing Race app demonstrating use of mainPanel.

A set of tabs are created within tabsetPanel. The tabset we create with the tabsetPanel function

helps to separate different types of output based on which tab is currently selected or activated.

Individual tabs are created by using the function tabPanel within the tabsetPanel. The arguments

of the tabPanel function are title, which allows user interface (UI) elements to be included

within the tab, value which is the value that is sent to tabsetPanel when a tab is selected, and

icon which allows an optional icon to appear on the tab. Only the first three arguments are used

in the tabs created in the app. Below is a picture of the tabs created by the tabPanel functions

that are implemented within tabsetPanel.

Below is a table of the value id of the tab, the text that appears on tab, and the output object that

corresponds to a tab

Value Tab Text Name Name of Output Object

mapTabSeason Season Map raceMap

mapTabLegSeason Season and Leg Map raceMap

teamSeason Teams By Season teamTable

winTab Winners winnerText

The names in the Value column are used as variable names in the code to control what happens

when a particular tab is selected. So mapTabSeason is used in the code to control what will

happen when the tab that has the label text Season Map is selected, mapTabLegSeason is

used in the code to control what will happen when the tab that has the label text Season and Leg

Map is selected, teamSeason is used in the code to control what will happen when the tab that

has the label text Teams By Season is selected and winTab is used in the code to control

what will happen when the tab that has the label text Winners is selected. The variable names

of the tabs that are in the Value column are used extensively in the code that is in sidebarPanel

and also the code in the server.R script. The last column gives the variable names of the outputs

that will be displayed by selecting the specified tab. Different functions are used to render

different types of output. For the Team By Season tab, the argument of the tabPanel

function contains the dataTableOutput function. As the name of the function suggests, this

function is used to render and display a data table on screen. The only parameter of

dataTableOutput is called outputId. The name used for the outputId argument is teamTable and

this output variable name represents a data table of each member of each team across the first

twenty five seasons. On the next page, a picture of the data table that is produced by

dataTableOutput is shown for the first season of The Amazing Race.

Output of the dataTableOuput function

The next output function that will be discussed is textOutput. This function is useful if you want

text to be displayed on the screen but not necessarily in the form of a table. For the Winners

tab, the argument contains the function textOutput. Similar to dataTableOutput, the only

parameter is outputId. In this case, the name of our output variable is winnerText and so that is

what the outputId is set equal to. Below is a picture of the output produced by textOutput when

the user selects the Winners tab.

Output of the textOutput function

The figure above shows the results of textOutput and displays the team that won season #7 of

The Amazing Race.

The final output function that will be discussed is leafletOutput. This function is actually not in

the shiny package, but it is a wrapper function in the leaflet package that integrates leaflet

functionality with the shiny package. Like the output functions found in the shiny package, the

function leafletOutput has the parameter outputId. Unlike the output functions in shiny, the

function leafletOutput has more parameters than just outputId. The other two parameters to

leafletOutput are width and height which controls the size of the map to be displayed. The name

of the output variable for the leaflet map is raceMap and is used frequently in the server.R file.

The variable raceMap is used as the outputId in leafletOutput to produce the map for the

application. Below is the map that is displayed using the leafletOutput function.

Before discussing the sidebar panel code, there are some more significant points to mention.

Look at the sample of code below:

Notice that leafletOutput is not directly included in the tabPanel function for the tab named

mapTabSeason and the other tab named mapTabLegSeason. The parameter of tabPanel for

both the mapTabSeason and mapTabLegSeason tabs was not set equal to leafletOutput since it is

included within the conditionalPanel function which in the code above controls the behavior of

both the mapTabSeason tab and the mapTabLegSeason tab. The function conditionalPanel

controls what output is displayed based on particular panel event. The conditionalPanel has a

condition argument in which you can add a JavaScript style logical expression that controls what

happens when a certain event is triggered (in the code above, the logical expression controls

what happens when certain tabs are selected). After the condition parameter is specified, output

elements can be added to conditionalPanel which will be displayed if the logical expression set

for the condition argument holds true. The input elements mentioned in the condition parameter

can be referenced by writing input. followed by the name of the input object (in the code

above, the id of the set of tabs is referred to as input.amazingRaceTabs). Note that the names of

the variables that are named to the right of the logical comparison operator == are in single

quotes. The | | operator in the above code represents logical or. So the code in conditionalPanel

above says that the map generated by leafletOutput will only be displayed if the mapTabSeason

and mapTabLegSeason tabs are selected. This means that if you select the tab that has the text

label Season Map or the tab that has the text label Season and Leg Map, then the map will be

displayed, however if any other tabs are selected (such as the tabs labeled Team By Season and

Winners), then the map will not be displayed.

Contents of the sidebarPanel Function

The function sidebarPanel includes the parameter which allows a number of user interface

(UI) elements to a sidebar and the other parameter is width which controls the size of the sidebar.

In the ui.R for the app, different input selectors are made to be displayed on the sidebar and this

input selectors are controlled by using the conditionalPanel function which controls what input

selectors are shown by the app depending on which tab is selected.

The first type of input selector mentioned in the code is the slider input. The code that creates the

slider input for the app is pictured below along with the slider input that is produced by the code.

The first parameter is inputId which gives the name of the input variable, the second parameter is

label which provides the heading title that will be displayed on the input slider, the third

parameter is min which is the minimum value that can be selected (inclusive), the fourth

parameter is max which is the maximum value that can be selected (inclusive), the fifth

parameter is value which is the initial value that is selected on the slider and the sixth parameter

is step which represents the amount you can increment or decrement from the values on the

slider. The above code gives the name of the input variable that represents the slider is called

Season, the title name that is shown in bold is Season Number, the slider ranges from 1 to 25

inclusive (which represent season 1 to season 25 of The Amazing Race), the slider created starts

at the number 12, and the current number on the slider can be increased or decreased by 1 unit.

The next input selector that will be considered, is the input select menu. The input select menu is

created by the function selectInput. There are many parameters for selectInput, however, only the

first three parameters will be discussed. Like sliderInput, the first two parameters of selectInput

are inputId and label. The third parameter for selectInput is choices which includes the possible

choices that can be chosen from the selection menu. Below is a picture of the output from one of

the selectInput functions used in ui.R:

The code above creates a select menu that has an input variable name of seasonSL, displays the

title Season Number above the menu selector and allows the user to the numbers 1-25 inclusive

(which in this case the numbers represent the season number for the show).

The last type of input selector that will be discussed are radio buttons. In order to create radio

buttons, use the radioButtons function in shiny. The first three parameters of radioButtons are

exactly the same as the parameters for selectInput. The fourth parameter of radioButtons is called

selected and if this parameter is set, it will set which button is initial selected (if this parameter is

not selected, the first radio button from the top will be the button that is initially selected). The

fifth and last parameter of radioButtons is called inline. If the inline parameter is set equal to

TRUE, then the radio buttons will be displayed horizontally, however if the parameter is set

equal to FALSE, then the radio buttons will be displayed vertically (by default the inline

parameter is set equal to FALSE and so by default the radio buttons are displayed vertically).

The following is a code snippet that includes a radio button implemented in the app and also a

picture of the radio button created by the code:

The radio button created above has the input variable name of colorChoice, the bold title of

Marker Color Selection comes from the value that the label parameter is set equal to, the label

text for each of the radio buttons comes from the vector that is assigned to the choices parameter.

The named vector in radioButtons has thevalues which are the colors denoted in quotes that have

all lower case letters and the names of these values are the color names that have the first letter

capitalized. The names of the values in the vector of colors that are assigned to the choices

parameter in radioButtons show up as the text labels of the radio buttons in the output. The

values from the vector (the values are red, orange, yellow, purple, black) are passed to

functions from the leaflet package in the server.R file in order to change the color of the map

markers. Since the color of the typical marker pin cant be changed through a leaflet function, the

color values are only passed to the functions that produce the circle type of marker or the

line/path type of marker (these leaflet functions are addCircleMarkers and addPolyLines

respectively).

Examining the Code in server.R for the The Amazing Race App

At the beginning of the server.R script the Shiny and Leaflet packages are loaded. After loading

the main packages, data from comma separated value (csv) files is loaded into server.R. The csv

file named AmazingRace - LongitudeAndLatitudeList.csv stores the Latitude and Longitude

for the locations of each leg of the race for the first twenty five seasons of The Amazing Race and

the csv file named AmazingRaceContestants.csv stores the contestants for each of the first

twenty five seasons of Amazing Race. The data from each of these csv files are stored in objects

named amRaceDataCoords and amRaceContestants respectively.

After loading in the data and storing them in variables, the function shinyServer is used and the

remainder of the server.R code is contained within the shinyServer function. This function is

used to define the server-side logic of the Shiny application. Much of the code within the

shinyServer function involves code that states how data should be handled by the application.

The function shinyServer is called when the web browser first loads the application and it

includes the parameters input, output, and session (the session parameter is optional and is not

always used in the shinyServer function, but the session parameter is used to allow for greater

control over aspects of the application). As of Shiny 0.10, it is no longer required to include the

shinyServer function in the server.R script but the function has been retained for the purpose of

backward compatiblilty. Next, other functions used in sever.R will be discussed.

The server.R file for this application has a mix of functions from the Leaflet package and the

Shiny package. First, a map is created by the code leaflet() %>% addTiles() and is stored in an

object called amMap. The operator %>% is called the pipe operator (which is originally from the

magrittr package) and is used with functions in the Leaflet package. The leaflet() function creates

a map widget and the function addTiles creates the graphical layers for the map widget created

by leaflet(). The default layer for addTiles is used in this instance which is called OSM or the

Open Street Map layer. A vector called seasonWinners is created which contains the 25 teams

that won over the past 25 seasons. After these preliminary objects were created, a series of shiny

functions were used in order to define how certain output and input objects should be created and

how they should interact with the app. In the server.R file, the name of input variables are

prefixed with the notation input$ and the name of output variables are prefixed with the notation

output$. Below are tables that have the name of the input and output variables used in the

server.R file:

Table of Input Variables

Input Variable Names Description

seasonSL seasonSL is the season menu selector that

appears when the Season and Leg Map,

Teams By Season or Winners tab is

selected.

legSL legSL is the leg menu selector that appears

when the Season and Leg Map tab is

selected.

amazingRaceTabs amazingRaceTabs is the input ID for the set of

tabs (the tabset panel) created in ui.R

Season This is the slider input selector that appears

only when the Season Map tab is selected

markerType This is the type of marker that will be

displayed on the map to represent a particular

location. The three types of markers are pin,

circle, and path.

Table of Output Variables

Output Variable Names Description

winnerText This stores the season winner based on which

season number is selected from the menu

created by the variable seasonSL. The team

that won a particular season comes from the

seasonWinners vector.

teamTable This variable stores the teams that were in a

particular season based on the season number

selected by the menu created by the seasonSL

input variable.

raceMap The markers that are placed on the map and

the map itself is stored in this variable.

The first variable created in server.R is winnerText. The code to create this variable is presented

below.

The function renderText creates a reactive variable that stores text that can be used by the

textOutput function in the ui.R script. Recall the following code from ui.R

The Winners tab uses the textOutput function. Notice that the output ID that is used in the

textOutput is the same as the name of the reactive variable (without the prefix output$) that is

defined in server.R. It doesnt matter whether or not the output ID is defined first or the reactive

output variable (whether you declare the output ID name first in the output function you use in

ui.R or if you create the reactive output variable first in server.R by using a render function

before creating the output ID to be used by a shiny output function in ui.R as long as the output

variable name and the corresponding output ID are named in a consistent manner).

The next function that will be discussed is the observe function. Reactive expressions and

observers are more dynamic expressions than regular R expressions. Observers have a different

execution strategy than reactive expressions. When the dependencies of a reactive expression

change, the reactive expression does not automatically re-execute. Unlike reactive expressions,

observers will automatically re-execute as soon as an observers dependencies change. To learn

more about the differences between reactive expressions and observers, the reader is directed to

the documentation found here http://shiny.rstudio.com/reference/shiny/latest/observe.html [1].

Below is how the observe function was used in the server.R code:

The function updateSelectInput is used to change the available choices on the leg menu (the

menu that corresponds to the input variable legSL) based on the season number (the number

selected on the select menu represented by the input variable seasonSL). The reason for updating

the leg menu based on the season number is that not all seasons of The Amazing Race have the

same number of legs (some seasons have 11 legs, some have 12 legs and some seasons have 13

legs). The updateSelectInput function is given the session variable that was used in shinyServer

and a text heading of Leg Name is passed to the label parameter. The interesting parameter of

updateSelectInput is the choices parameter. For the choices parameter, the rows of the

amRaceDataCoords data frame are the rows in which the Season column matches the season

number that is selected by the menu that is created by the seasonSL object and the leg numbers

from the Leg column of the matching rows are selected. The leg numbers repeat for each location

in the leg and so the unique function is used to get distinct leg numbers for each season. The

updateSelectInput function is placed within the observe function in order to create an observer.

Therefore, using the created observer, every time the season menu changes value the respective

choices for the possible leg numbers in the leg menu also change.

The next function that will be discussed is renderDataTable. The only required parameter is expr

which is an expression that return a matrix or a data frame. For the table created in this

application, all of the defaults were accepted for all of the other parameters. Below is the code

for the data table created in server.R for this application.

Within renderDataTable the names of each team member for each team along with the

relationship between each team member for all the teams are accessed from the

amRaceContestants data frame for the season selected by the select menu represented by the

input variable seasonSL. The information gleaned from the amRaceContestants data frame is

then transferred to the output variable teamTable and is turned into a data table. The name of the

data table teamTable is then used in the function dataTableOutput in the ui.R script in order to

display the data table on screen in the app (the relevant code from ui.R where dataTableOutput

appears is shown below).

The ui.R code that uses the teamTable variable created in server.R

The next variable in server.R that will be discussed is the reactive variable markerProp. The first

part of the reactive expression that defines the variable markerProp is an else if statement. The

following is the code that was used for the conditional statements:

This code controls how the latitude and longitude are defined based on what tab is selected.

Recall that amazingRaceTabs is the input ID for the set of tabs defined in the mainPanel function

in ui.R. The first if statement says that if neither of the Season Map tab (mapTabSeason) or the

Season and Leg Map tab set the longitude and latitude variables to zero (the map is not

displayed for the Winners and Teams By Season tabs and so none of the latitude and

longitude values from the amRaceDataCoords data frame are needed). The first else if statement

states that the latitude and longitude values come from the rows of amRaceDataCoords where the

season number equals the season number value selected on the slider input selector that is

displayed when the Season Map tab is selected. The second else if statement states that when

the Season and Leg Map tab is selected, the latitude and longitude values come from the rows

of amRaceDataCoords where the season number equals the season number value selected on the

season select menu (represented by the input variable seasonSL) and the leg number selected on

the leg select menu (represented by the input variable legSL). The next set of code that defines

the markerProp variable is the following:

The 2nd part of the markerType code in the server.R file

The following is code from ui.R that relates to the markerType variable:

The first if statement in the server.R code snippet above states that if the choice Pin is chosen

from the marker type menu (the input that had input ID markerType), marker pins will put on the

map where teams on The Amazing Race have travelled by means of addMarkers from the leaflet

package. The first else if statement says that if the choice Circle is chosen from the marker

type menu, circles will be put on the map (instead of lines or pins) for the different race

locations. The last else if statement says that if the choice Path is chosen from the marker type,

lines will be placed in between race locations. Observe that addMarkers, addCircleMarkers and

addPolylines uses the map object amRace that was created at the top of the server.R script and

the second and third parameters of each of these functions take the latitude and longitude values

that were created in the first part of the code that defines the markerType input variable . Note

that input$colorChoice which is the value of the color parameter for addMarkers,

addCircleMarkers and addPolylines corresponds to the inputId parmeter value of radioButtons

in ui.R. So for each type of marker that identifies the race locations, the color of the marker can

be changed by means of the radio buttons that were created in ui.R. After creating the

markerProp variable, the markerProp variable is used placed in the renderLeaflet function to

create the output variable raceMap (the code is shown below).

The raceMap created from the variable markerProp variable is then is referred to in the

leafletOutput function which is placed in the ui.R script and is ultimately the function that

displays the map in the application.

References

[1] Create a reactive observer. RStudio, 2014. .

[2] J. Cheng and Y. Xie. leaflet: Create Interactive Web Maps with the JavaScript

LeafLet Library. R package version 0.0.10. 2014. .

[3] R Core Team. R: A Language and Environment for Statistical Computing. R Foundation

for Statistical Computing. Vienna, Austria, 2014. .

[4] W. Chang, J. Cheng, J. Allaire, et al. shiny: Web Application Framework for R. R

package version 0.11.1. 2015. .