Introduction+to+R+Shiny

Getting to know Shiny
// shiny // is an R package that makes it easy to build interactive web applications (apps) straight from R. The package comes with eleven built-in examples that each demonstrate how Shiny works. Each of these examples is a self-contained app. The **Hello Shiny** example plots a histogram of R’s faithful dataset with a configurable number of bins. Users can change the number of bins with a slider bar, and the app will immediately respond to their input. You’ll use **Hello Shiny** to explore the structure of a Shiny app and to create your first app. To run **Hello Shiny**, type: code format="python" library(shiny) runExample("01_hello") code

1.1 Structure of a Shiny App
Shiny apps have two components:
 * a user interface script
 * a server script

The user interface (UI) script controls the layout and appearance of your app. It is defined in a source file named ui.R. Below is the ui.R script for the Hello Shiny example. code format="python" library(shiny)

shinyUI(fluidPage(
 * 1) Define UI for application that draws a histogram

# Application title titlePanel("Hello Shiny!"),

# Sidebar with a slider input for the number of bins sidebarLayout(   sidebarPanel( sliderInput("bins",                 "Number of bins:",                  min = 1,                  max = 50,                  value = 30) ),

# Show a plot of the generated distribution mainPanel(     plotOutput("distPlot")    ) ) )) code

The server.R mscript contains the instructions that your computer needs to build the app. Here is the server.R file for the Hello Shiny example. code format="python" library(shiny)

shinyServer(function(input, output) {
 * 1) Define server logic required to draw a histogram

# Expression that generates a histogram. The expression is # wrapped in a call to renderPlot to indicate that: # #  1) It is "reactive" and therefore should be automatically  #     re-executed when inputs change  #  2) Its output type is a plot

output$distPlot <- renderPlot({   x    <- faithful[, 2]  # Old Faithful Geyser data    bins <- seq(min(x), max(x), length.out = input$bins + 1)

# draw the histogram with the specified number of bins hist(x, breaks = bins, col = 'darkgray', border = 'white') })

}) code  At one level, the **Hello Shiny** server script is very simple. It does some calculations and then plots a histogram with the requested number of bins. However, you’ll also notice that most of the script is wrapped in a call torenderPlot . The comment above the function explains a bit about this, but if you find it confusing, don’t worry. We’ll cover this concept in much more detail soon. Play with the **Hello Shiny** app and review it’s source code. Try to develop a feel for how the app works. Your R session will be busy while the **Hello Shiny** app is active, so you will not be able to run any R commands. R is monitoring the app and executing the app’s reactions. To get your R session back, hit escape or click the stop sign icon (found in the upper right corner of the RStudio console panel).

1.2 Running an App
Every Shiny app has the same structure: two R scripts saved together in a directory. At a minimum, an app has ui.R and server.R files, and you can create an app by making a new directory and saving the ui.R and server.R file inside it. Each Shiny app will need its own unique directory. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">You can run a Shiny app by giving the name of its directory to the function <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runApp. For example, if your app is in a directory called <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">my_app, run it with the following code: code format="python" library(shiny) runApp("my_app") code

<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Note: The first argument of <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runApp is the file path from your working directory to the app’s directory. The code above assumes that the app directory is in your working directory; in such case, the file path is just the name of the directory. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">In case you are wondering, the **Hello Shiny** app’s files are stored in a special system directory designed to work with the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runExample call. Alternatively, you can also launch that app by calling code format="python" runApp(system.file(package="shiny", "examples", "01_hello")) code

1.3 Your turn
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Create your first Shiny app named <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">my_app. For this, start RStudio and from the **File** menu choose //New Project… > New Directory > Shiny Web Application//. As the //Directory name// enter the desired name **my_app**. The project will start with <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R containing the familiar code from the **Hello Shiny** app. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">To launch your app, run in the R console: code format="python" library(shiny) runApp code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Alternatively, you can click the //Run App// button (at the top of the editor), or or use the keyboard shortcut: <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">Control+Shift+Enter on Windows/Linux, or <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">Command+Shift+Enter on MAC <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">

<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: justify;">RStudio will launch the app in a new window by default, but you can also choose to have the app launch in a dedicated viewer pane, or in your external web browser. Make your selection by clicking the icon next to <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: justify;">Run App <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Make some changes to your app: <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">When you are ready, launch your app again. Your new app should match the image below. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;"> =2 Building a user interface=
 * 1) Change the title to “Hello World!”.
 * 2) Set the minimum value of the slider bar to 5.
 * 3) Change the histogram color from <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">"darkgray" to <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">"skyblue".

<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Now that you understand the structure of a Shiny app, it’s time to build your first app from scratch. We will start by showing how to build a user interface. You will learn how to lay out the user interface and add HTML elements to it. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">We’ll use the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">my_app you made before. To get started edit the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R files to match the scripts below: <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">**ui.R** code format="python" shinyUI(fluidPage) code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">**server.R** code format="python" shinyServer(function(input, output) {}) code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">This code is the bare minimum needed to create a Shiny app. The result is an empty app with a blank user interface.

** 2.1 Layout **
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">The Shiny <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R script uses the function <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">fluidPage to create a display that automatically adjusts to the dimensions of your user’s browser window. You lay out the app by placing elements in the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">fluidPage function. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">For example, the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R script below creates a user interface that has a title panel and then a sidebar layout, which includes a sidebar panel and a main panel. Note that these elements are placed within the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">fluidPage function. code format="python"
 * 1) ui.R

shinyUI(fluidPage( titlePanel("title panel"),

sidebarLayout(   sidebarPanel("sidebar panel"),    mainPanel("main panel")  ) )) code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;"> <span style="color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">titlePanel and <span style="color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sidebarLayout create a basic layout for your Shiny app, but you can also create more advanced designs. For example,<span style="color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">navbarPage creates a multi-page user interface that includes a navigation bar. You can also divide the page into equally spaced regions using <span style="color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">splitLayout, or you can use <span style="color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">fluidRow and <span style="color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">column to build a grid-based layout. For an overview, see the

2.2 HTML Content
You can add content to your Shiny app by placing it inside a <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">*Panel function. For example, the app above displays a character string in each of its panels. The words “sidebar panel” appear in the sidebar panel, because we added the string to the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sidebarPanel function, i.e.<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sidebarPanel("sidebar panel"). The same is true for the text in the title panel and the main panel. To add more advanced content, use one of Shiny’s HTML tag functions. These functions parallel common HTML5 tags. As an example, let’s try out creating headers.

2.2.1 Headers
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">To create a header: <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">For example, you can create a first level header that says “My title” with <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h1("My title"). If you run this command in R, you’ll notice that it produces HTML code. code format="python" h1("My title") code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">To place that element in your app, pass it as an argument to <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">titlePanel, <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sidebarPanel , or <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">mainPanel. The text will appear in the corresponding panel of your web page. You can place multiple elements in the same panel if you separate them with a comma. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Give this a try. The script below uses all six levels of headers. Update your <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R file to match the following code and then relaunch your app. code format="python"
 * select a header function (e.g., <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h1 or <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h3 )
 * give it the text you want to appear in the header
 * 1) ui.R

shinyUI(fluidPage( titlePanel("My Shiny App"), sidebarLayout(   sidebarPanel,    mainPanel( h1("First level title"), h2("Second level title"), h3("Third level title"), h4("Fourth level title"), h5("Fifth level title"), h6("Sixth level title") ) ) )) code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;"> Now your app should look like this: <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;"> <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">** 2.3 Other tags** <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">We have demonstrated how to use the header tag functions, but there are many more tag functions for you to use. <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">shiny::tags contains a list of 110 functions, each of which builds a specific HTML tag. If you are familiar with HTML, you will recognize these tags by their names. code format="python" names(tags) code

code code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">To create a tag, run an element of <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">tags as a function. For instance, to create a <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">div tag, use: code tags$div code code code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">You can call some of the most popular tags with helper functions that make accessing them easier. For example, the function <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">code is a wrapper for<span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">tags$code and creates text formatted as computer code. Other available helper functions are:<span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">a ,<span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">br, <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">code , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">div , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">em , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h1 , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h2 , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h3 ,<span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h4 , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h5 , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">h6 , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">hr , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">img , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">p , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">pre , <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">span , and <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">strong. The names of the rest of tag functions conflict with the names of native R functions, so you will need to call them with the <span style="background-color: #ffffff; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">tags$ syntax. =3 Control widgets=
 * 1)   [1] "a"           "abbr"        "address"     "area"        "article"
 * 2)   [6] "aside"       "audio"       "b"           "base"        "bdi"
 * 3)  [11] "bdo"         "blockquote"  "body"        "br"          "button"
 * 4)  [16] "canvas"      "caption"     "cite"        "code"        "col"
 * 5)  [21] "colgroup"    "command"     "data"        "datalist"    "dd"
 * 6)  [26] "del"         "details"     "dfn"         "div"         "dl"
 * 7)  [31] "dt"          "em"          "embed"       "eventsource" "fieldset"
 * 8)  [36] "figcaption"  "figure"      "footer"      "form"        "h1"
 * 9)  [41] "h2"          "h3"          "h4"          "h5"          "h6"
 * 10)  [46] "head"        "header"      "hgroup"      "hr"          "html"
 * 11)  [51] "i"           "iframe"      "img"         "input"       "ins"
 * 12)  [56] "kbd"         "keygen"      "label"       "legend"      "li"
 * 13)  [61] "link"        "mark"        "map"         "menu"        "meta"
 * 14)  [66] "meter"       "nav"         "noscript"    "object"      "ol"
 * 15)  [71] "optgroup"    "option"      "output"      "p"           "param"
 * 16)  [76] "pre"         "progress"    "q"           "ruby"        "rp"
 * 17)  [81] "rt"          "s"           "samp"        "script"      "section"
 * 18)  [86] "select"      "small"       "source"      "span"        "strong"
 * 19)  [91] "style"       "sub"         "summary"     "sup"         "table"
 * 20)  [96] "tbody"       "td"          "textarea"    "tfoot"       "th"
 * 21) [101] "thead"       "time"        "title"       "tr"          "track"
 * 22) [106] "u"           "ul"          "var"         "video"       "wbr"

<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Now that you know how to create the layout of the user interface, it’s time to add some control widgets to your app. A widget is a web element that users can interact with. Widgets provide a way to collect values from the user and send them to your app. When the user changes the widget, the value will change as well. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Shiny comes with a family of pre-built widgets, each created with a transparently named R function. For example, the function<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sliderInput creates a slider bar. The standard Shiny widgets are: <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;"> Some of these widgets are built using Twitter Bootstrap, a popular open source framework for building user interfaces.
 * ~ function ||~ widget ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">actionButton || Action Button ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">checkboxGroupInput || A group of check boxes ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">checkboxInput || A single check box ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">dateInput || A calendar to aid date selection ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">dateRangeInput || A pair of calendars for selecting a date range ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">fileInput || A file upload control wizard ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">helpText || Help text that can be added to an input form ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">numericInput || A field to enter numbers ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">radioButtons || A set of radio buttons ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">selectInput || A box with choices to select from ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sliderInput || A slider bar ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">submitButton || A submit button ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">textInput || A field to enter text ||

3.1 Adding widgets
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">You can add widgets to the user interface in the same way that you add other types of HTML content by placing a widget function in<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">sidebarPanel or <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">mainPanel in your <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R file. Each widget function requires several arguments. The first two arguments for each widget are

<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">The remaining arguments vary from widget to widget, depending on what the widget needs to do its job. You can find the exact arguments required by a widget on the widget function’s help page, e.g., <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">?selectInput. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">The code below makes the app pictured above. Change the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R script of <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">my_app to match it, and then relaunch the app. Play with each widget to get a feel for what it does. Experiment with changing the values of the widget functions and observe the effects. code format="python"
 * **A Name for the widget**. The user will not see this name, but you can use it to access the widget’s value. The name should be a character string.
 * **A label**. This label will appear with the widget in your app. It should be a character string, but it can be an empty string <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">"".
 * 1) ui.R

shinyUI(fluidPage( titlePanel("Basic widgets"),

fluidRow(

column(3,     h3("Buttons"),      actionButton("action", label = "Action"),      br,      br,      submitButton("Submit")),

column(3,     h3("Single checkbox"),      checkboxInput("checkbox", label = "Choice A", value = TRUE)),

column(3,     checkboxGroupInput("checkGroup", label = h3("Checkbox group"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1)),

column(3,     dateInput("date", label = h3("Date input"), value = "2014-01-01")) ),

fluidRow(

column(3,     dateRangeInput("dates", label = h3("Date range"))),

column(3,     fileInput("file", label = h3("File input"))),

column(3,     h3("Help text"),      helpText("Note: help text isn't a true widget,", "but it provides an easy way to add text to", "accompany other widgets.")),

column(3,     numericInput("num", label = h3("Numeric input"), value = 1)) ),

fluidRow(

column(3,     radioButtons("radio", label = h3("Radio buttons"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1)),

column(3,     selectInput("select", label = h3("Select box"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1)),

column(3,     sliderInput("slider1", label = h3("Sliders"), min = 0, max = 100, value = 50),      sliderInput("slider2", "", min = 0, max = 100, value = c(25, 75))      ),

column(3,     textInput("text", label = h3("Text input"), value = "Enter text...")) )

)) code

=4 MA plot explorer=

<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">You will now build a new Shiny app that creates an interactive MA plot. The app will allow you to select a gene by clicking on the MA plot, and it will display a counts plot for the selected gene. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">This new Shiny app will need its own, new directory. Close any open projects and create a new directory named <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ma_plot in your working directory. This is where we’ll save the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R files described below. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">The app will use the example data set from the RNA-seq tutorial. Let’s start by reproducing the MA plot. The results of differential expression calling have been saved to the data file <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">data.rda. Copy the file to the newly created folder <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ma_plot, change your working directory to that folder, e.g. using <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">setwd("ma_plot") , and run: code library(DESeq2)

load("data.rda") res <- results(dds)

ymax <- 5 plotMA( res, ylim=c(-ymax, ymax) ) code

4.1 Displaying R output in Shiny
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">For the MA plot to appear in our Shiny app, we need to:
 * Add the plot to the user interface definition in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R.
 * Tell Shiny how to render the plot in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R.

** 4.1.1 Step 1: Add the plot to the UI **
Shiny provides a family of functions that turn R objects into output for your user interface. Each function creates a specific type of output: You can add these output functions to the user-interface in the same way that you added HTML elements and widgets. Let’s use<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotOutput to add the MA plot to your user interface. code
 * ~ Output function ||~ creates ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">htmlOutput || raw HTML ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">imageOutput || image ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotOutput || plot ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">tableOutput || table ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">textOutput || text ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">uiOutput || raw HTML ||
 * 1) ui.R

size = 450

shinyUI(fluidPage( titlePanel("MA plot explorer"),

splitLayout(cellWidths=size, plotOutput("plotma", width=size, height=size) )

)) code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Notice that <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotOutput takes as its first argument the character string <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">"plotma". Each of the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">*Output functions requires a single argument: a character string that Shiny will use as the name of your reactive element. Your users will not see this name, but you will use it later. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">We have used <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">fluidPage again, but this time we use <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">splitLayout to organize the content into cells of width specified by <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">cellWidths. We set the width of the cells and the width and height of the plot to the same value given by <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">size, which we have set to 450 pixels.

4.1.2 Step 2: Provide R code to build the plot
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Placing a function in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R tells Shiny where to display your object. Next, you need to tell Shiny how to build the object. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Do this by providing R code that builds the object in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R. The code should go in the unnamed function that appears inside<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">shinyServer in the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R script. The unnamed function plays a special role in the Shiny process; it builds a list-like object named<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">output that contains all of the code needed to update the R objects in your app. Each R object needs to have its own entry in the list. You can create an entry by defining a new element for output within the unnamed function, like below. The element name should match the name of the reactive element that you created in ui.R. In the script below, output$plotma matchesplotOutput("plotma", width=size, height=size) in your ui.R script. code
 * 1) server.R

library(DESeq2)

load("data.rda") res <- results(dds)

ymax <- 5

shinyServer(function(input, output) {

output$plotma <- renderPlot({ par( mar=c(5,5,3,2), cex.main=1.5, cex.lab=1.35 ) plotMA( res, ylim=c(-ymax, ymax) ) })
 * 1) MA-plot

}) code <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">Notice that we have included the code for loading and preprocessing the data just before the call to <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">shinyServer . The call to <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">par before<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotMA sets some graphical parameters improving the aesthetics of the figure, like <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">mar setting the margins, or <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">cex.* increasing the text size of the corresponding elements. For more details see <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">?par. Each entry to output should contain the output of one of Shiny’s <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">render* functions. These functions capture an R expression and do some light preprocessing on it. Use the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">render* function that corresponds to the type of reactive object you are making. Each <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">render* function takes a single argument: an R expression surrounded by braces, <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">{}. The expression can involve many lines of code, as if it were a complicated function call. Think of this R expression as a set of instructions that you give Shiny to store for later. These instructions will be run when you first launch your app, and they will re-run every time your object needs to be updated. For this to work, your expression should return the object you have in mind (a piece of text, a plot, a data frame, etc). You will get an error if the expression does not return an object, or if it returns the wrong type of object.
 * ~ Render function ||~ creates ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderImage || images (saved as a link to a source file) ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderPlot || plots ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderPrint || any printed output ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderTable || data frame, matrix, other table like structures ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderText || character strings ||
 * <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderUI || a Shiny tag object or HTML ||

4.2 Reactive output using widget values
At this stage, when you launch your app, it will just display a static MA plot. The function <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotMA has an argument <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">alpha setting the significance level for thresholding adjusted p-values. We will now extend the app by adding a slider widget controlling this parameter. First, let’s add a slider widget below our plot output: code
 * 1) ui.R

size = 450

shinyUI(fluidPage( titlePanel("MA plot explorer"),

splitLayout(cellWidths=size, plotOutput("plotma", width=size, height=size) ), splitLayout(cellWidths=size, sliderInput("alpha", "Adjusted p-value treshold", min=0, max=0.2, value=0.1, step=0.001, width=size) )

)) code The slider allows to select values in the range from 0 to 0.2 in steps of 0.001, and we have set its width to match the size of the plot above it. You can make the plot reactive by asking Shiny to call the slider value when it builds the plot. Let’s look at how to do this. Take a look at the first line of code in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R. Do you notice that the unnamed function mentions //two// arguments, namely <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input and<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">output ? You already saw that <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">output is a list-like object that stores instructions for building the R objects in your app. <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input is a second list-like object. It stores the current values of all of the widgets in your app. These values will be saved under the widgets’ names from <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R. So for example, our app has one widget named <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">"alpha", whose value will be stored in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input$alpha. Shiny automatically makes an object reactive if the object uses an <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input value. In order to make the MA plot reactive, substitute in your <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R script the line containing the call to <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotMA by the following one: code plotMA( res, ylim=c(-ymax, ymax), alpha=input$alpha )

code

When you are ready updating the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R files, launch your Shiny app. The plot should redraw instantly as you move the slider. Shiny tracks which outputs depend on which widgets. When a user changes a widget, Shiny will rebuild all of the outputs that depend on this widget, using the new value of the widget. As a result, the rebuilt objects will be completely up-to-date. This is how you create reactivity with Shiny, by connecting the values of <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input to the objects in <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">output. Shiny takes care of all of the other details 4.3 Reactivity Finally, we will make the MA plot clickable allowing to select a gene, and add the counts plot for the selected gene.We start by adding the counts plot next to the MA plot, so that the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R script matches the following: code
 * 1) ui.R

size = 450

shinyUI(fluidPage( titlePanel("MA plot explorer"),

splitLayout(cellWidths=size, plotOutput("plotma", click="plotma_click", width=size, height=size), plotOutput("plotcounts", width=size, height=size) ), splitLayout(cellWidths=size, sliderInput("alpha", "Adjusted p-value treshold", min=0, max=0.2, value=0.1, step=0.001, width=size) )

)) code Notice the additional <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">click argument to the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotOutput function of the MA plot. If set to a value like <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">plotma_click, the plot will send coordinates to the server whenever it is clicked. This value will be accessible via <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input$plotma_click and will contain a named list with <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">x and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">y elements indicating the mouse position. We will use the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input$plotma_click coordinates to resolve the nearest gene in the MA plot. Let’s get back to our <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R script. In order to be able to resolve which point in the MA plot was the closest one to the click, we create the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">t.data.scaled object containing points in normalized coordinates. We will use that object to find the closest point in terms of euclidean distance. code
 * 1) server.R

library(DESeq2)

load("data.rda") res <- results(dds)

ymax <- 5

data <- with(res, cbind(baseMean, log2FoldChange)) data[,2] <- pmin(ymax, pmax(-ymax, data[,2])) scale <- c(diff(range(data[,1])), 2*ymax) t.data.scaled <- t(data)/scale
 * 1) this object will be used to locate points from click events.

shinyServer(function(input, output) {

current = reactiveValues(idx = NULL)

observe({ xy = c(input$plotma_click$x, input$plotma_click$y) if (!is.null(xy)) { sqdists <- colMeans( (t.data.scaled - xy/scale )^2 ) current$idx <- which.min(sqdists) } })
 * 1) find index of the closest point

output$plotma <- renderPlot({ par( mar=c(5,5,3,2), cex.main=1.5, cex.lab=1.35 ) plotMA( res, ylim=c(-ymax, ymax), alpha=input$alpha ) idx = current$idx if (!is.null(idx)) points( data[idx,1], data[idx,2], col="dodgerblue", cex=3, lwd=3 ) })
 * 1) MA-plot
 * 1) add a circle around the selected point

output$plotcounts <- renderPlot({ par( mar=c(5,5,3,2), cex.main=1.5, cex.lab=1.35 ) idx = current$idx if (!is.null(idx)) plotCounts( dds, idx, intgroup=c("dex") ) })
 * 1) counts plot for the selected gene
 * 1) update only when idx changes

}) code Apart from the updated <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderPlot functions responsible for plotting, there are some other important additions to our Shiny app. Namely, we have used a <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">reactiveValues object and an <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">observer to streamline the app. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;">

4.3.1 Reactive values
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> Reactive values contain values which can change over time, and which can be read by other reactive objects. In particular, the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input object is a <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">reactiveValues object, which looks something like a list, and contains many individual reactive values. When you read a value from a <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">reactiveValues object, the calling reactive expression takes a reactive dependency on that value, and when you write to it, it notifies any reactive functions that depend on that value. We use the reactive value <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">current$idx for storing the index of the currently highlighted gene. It’s value is set in the <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">observer described below, and both plots depend on it.

4.4 Dependencies
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> What happens if you click on the MA plot? This will make both plots drawn by <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">renderPlot out of date, even though they don’t depend directly on <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">input$plotma_click. Shiny will know that they became outdated and will redraw the plots because it keeps track of which reactive values an output object depends on. Shiny will automatically re-build an object if an reactive/input value in the object’s <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">render* function changes. 5 Sharing your apps

Shiny apps are easy to share, and there are several options to choose from. In general, there are two basic ways to do it:
 * **Share your Shiny app as two files: //server.R// and //ui.R//**. This is the simplest way to share an app, but it works only if your users have R on their own computer (and know how to use it). Users can use these scripts to launch the app from their own R session, just like you’ve been launching the apps.
 * **Share your Shiny app as a web page**. This is definitely the most user friendly way to share a Shiny app. Your users can navigate to your app through the internet with a web browser. They will find your app fully rendered, up to date, and ready to go.

5.1 Share as R files
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> Anyone with R can run your Shiny app. They will need a copy of your <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R files, as well as any supplementary materials used in your app (e.g., <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">www folders or any helper R scripts). The user can place these files into an app directory and launch the app in R with the same commands you used on your computer, e.g. <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runApp. Additionally, Shiny provides three built in commands that make it easy to use files that are hosted online: <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runUrl, <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runGitHub , and<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runGist.

5.1.1 runUrl
<span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runUrl will download and launch a Shiny app straight from a weblink. To use <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runURL : code runUrl( " " ) code 5.1.2 runGitHub If you don’t have your own web page to host the files at, you can host your the files for free at GitHub. Github is a popular project hosting site for R developers since it does more than just host files. GitHub provides many features to support collaboration, such as issue trackers, wikis, and close integration with the git version control system. To use GitHub, you’ll need to sign up (it’s free) and choose a user name. To share an app through GitHub, create a project repository there. Then store your <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">server.R and <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">ui.R files in the repository, along with any supplementary files that the app uses. Your users can then launch your app by running: code runGitHub( " / " ) code 5.1.3 runGist If you want an anonymous way to post files online, Github offers a pasteboard service for sharing files at gist.github.com. You don’t need to sign up for Github to use this service. Even if you have a Github account, Gist can be a simple, quick way to share Shiny projects. To share your app as a Gist: Once you’ve made a Gist, your users can launch the app with <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">runGist(" ") where <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">" " is the number that appears at the end of your Gist’s web address. Here ’s an example of an app hosted as a Gist. You could launch this app with code runGist("3239667") code
 * Save your Shiny app’s directory as a zip file
 * Host that zip file at its own link on a web page. Anyone with access to the link can launch the app from R using:
 * Copy and paste your server.R and ui.R files to the Gist web page.
 * Note the URL that Github gives the Gist.

5.2 Share as a web page
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> All of the above methods share the same limitation: they require your user to have R and Shiny installed on their computer. However, Shiny creates the perfect opportunity to share output with people who do //not// have R (and have no intention of getting it). Your Shiny app happens to be one of the most widely used communication tools in the world: a web page. If you host the app at its own URL, users can visit the app (and not need to worry about code). RStudio offers three ways to host your Shiny app as a web page:
 * Shinyapps.io
 * Shiny Server, and
 * Shiny Server Pro

5.2.1 Shinyapps .io
The easiest way to turn your Shiny app into a web page is to use shinyapps.io, RStudio’s hosting service for Shiny apps. shinyapps.io lets you upload your app straight from your R session to a server hosted by RStudio.

5.2.2 Shiny Server
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> Shiny Server is a companion program to Shiny that builds a web server designed to host Shiny apps. It’s free, open source, and available from Github. Shiny Server is a server program that Linux servers can run to host a Shiny app as a web page. To use Shiny Server, you’ll need a Linux server that has explicit support for Ubuntu 12.04 or greater (64 bit) and CentOS/RHEL 5 (64 bit). If you are not using an explicitly supported distribution, you can still use Shiny Server by building it from source. You can host multiple Shiny applications on multiple web pages with the same Shiny Server, and you can deploy the apps from behind a firewall. To see detailed instructions for installing and configuring a Shiny Server, visit the Shiny Server guide.

5.2.3 Shiny Server Pro
<span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> Shiny Server will get your app to the web and take care of all of your Shiny publishing needs. However, if you use Shiny in a for-profit setting, you may want to give yourself the server tools that come with most paid server programs, such as If so, check out Shiny Server Pro, RStudio’s paid professional version of Shiny Server. <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> <span style="color: #000000; display: block; font-family: sans-serif; line-height: 20px; text-align: start;"> = 6 Extending Shiny = There is a number of packages that provide advanced features that can enhance your Shiny apps. These include: <span style="display: block; height: 1px; left: 0px; overflow: hidden; position: absolute; top: 25px; width: 1px;"> <span style="color: #000000; font-family: sans-serif; line-height: 20px; margin: 0em 0em 1em; text-align: justify;">// shiny // is an R package that makes it easy to build interactive web applications (apps) straight from R. The package comes with eleven built-in examples that each demonstrate how Shiny works. Each of these examples is a self-contained app. The **Hello Shiny** example plots a histogram of R’s <span style="background-color: transparent; color: #87b13f; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; font-size: 11.96px; white-space: pre;">faithful dataset with a configurable number of bins. Users can change the number of bins with a slider bar, and the app will immediately respond to their input. You’ll use **Hello Shiny** to explore the structure of a Shiny app and to create your first app. To run **Hello Shiny**, type: code format="r" <span style="background-color: #f8f8f8; border: 0px none; color: #000000; font-family: 'DejaVu Sans Mono','Droid Sans Mono','Lucida Console',Consolas,Monaco,monospace; line-height: 20px; margin: 0em 0em 1em; max-width: 100%;"> code
 * Password authentification
 * SSL support
 * Administrator tools
 * Priority support
 * and more.
 * shinythemes – CSS themes ready to use with Shiny
 * shinydashboard – Shiny powered dashboards
 * shinyURL – Facilities for saving and restoring user input values by encoding them in the app’s URL query string
 * htmlwidgets – A framework for embedding JavaScript visualizations into R. Ready to use examples include:
 * leaflet – Geo-spatial mapping
 * dygraphs – Time series charting
 * MetricsGraphics – Scatterplots and line charts with D3
 * networkD3 – Graph data visualization with D3
 * DataTables – Tabular data display
 * threejs – 3D scatterplots and globes
 * rCharts – Multiple JavaScript charting libraries

=<span style="border-bottom-color: #1a81c2; border-bottom-style: solid; border-bottom-width: 1px; color: #1a81c2; font-family: Helvetica,Arial,sans-serif; font-size: 20.8px; font-weight: normal; line-height: 1.4em; margin: 1.2em 0em 0.6em;"> 6 Extending Shiny = <span style="display: block; height: 1px; left: 0px; overflow: hidden; position: absolute; top: 8576px; width: 1px;">http://shiny.rstudio.com/tutorial/ <span style="display: block; height: 1px; left: 0px; overflow: hidden; position: absolute; top: 8165px; width: 1px;">