In order to use Shiny we need to have an understanding of R code syntax and how to use functions in R.
Functions take an argument (input) and produce a result (output). A simple function is mean(). The input argument is a numeric vector such as c(1,5,3.2,0.001) and the output is a numeric value that is the mean of the vector.
-
The concept of ui and server elements
+
The concept of ui and server elements
Every shiny app has two elements. The first is ui, which handles both the user controls and the layout and placement of output elements, such as plots or tables. ui usually consists of a layout scheme, with user controls (such as sliders, select boxes, radio boxes, etc) specified here. The second element is server, which handles all of the calculations and the generation of plots for ui.
ui and server are only connected by two objects input, and output (they actually are environments, but we’ll just say they are objects). ui puts the values from the controls into input, which can be accessed by server. For example, if we have a slider called year_release in ui, we can access the value of that slider in server through input$year_release.
server will then do something with the slider value and generate some output. Where does it put the output? If you guessed output, then give yourself a star! ui then takes output and will then display it using the various _Output functions (such as plotOutput, textOutput andtableOutput).
diff --git a/docs/search_index.json b/docs/search_index.json
index dd019e5..fe54d7d 100644
--- a/docs/search_index.json
+++ b/docs/search_index.json
@@ -1,6 +1,6 @@
[
["index.html", "A gRadual intRoduction to Shiny 1 Preface 1.1 Workshop Expectations", " A gRadual intRoduction to Shiny Ted Laderas and Jessica Minnier 2019-06-23 1 Preface 1.1 Workshop Expectations We want to foster a positive learning environment in this workshop. We expect everyone to adhere to the Code of Conduct. In short, be respectful of each other’s learning styles, don’t be dismissive or mean to someone who knows less than you, and try to help people if you see them struggle and you can help. We will enforce this and ask you to leave if you are not respectful to others. Additionally, please work together! The people in my workshops who have a really bad time and don’t get anything out of it are the ones who try to do it alone. To quote Legend of Zelda, “It’s dangerous to go alone”. Talking through the material with someone will help you understand it. We also are giving people post-it notes. Put them on your laptops so we can identify you if you need help or not. Green means “I’m okay, don’t bug me”, Red means “I need some help!”. "],
-["introduction.html", "2 Introduction 2.1 Setup 2.2 Introducing Shiny 2.3 Functions in R 2.4 The concept of ui and server elements", " 2 Introduction 2.1 Setup Make sure that you have the following packages installed: install.packages(c("shiny", "tidyverse", "fivethirtyeight", "plotly")) Clone or download the tutorial from here (click the Clone or Download button, it’s green and on the right side): https://github.com/laderast/gradual_shiny Unzip, and open the gradual_shiny.Rproj file in this folder. The project should open in RStudio and you should be ready! 2.2 Introducing Shiny Welcome to Shiny! Shiny is a framework in R for making interactive visualizations for the web created by Joe Cheng. Nearly any plot in R can be made into an interactive visualization by adding some simple interface elements and mapping these interface elements into the plot. It’s an extremely powerful technique for visualization and communication of findings. Before we get started, we need to talk a little bit about the architecture of shiny apps. shiny apps are server-based, which means that all of the calculations and plot rendering happen on a server (when you’re running them in RStudio, your server is your computer). Compare this to JavaScript visualization frameworks such as D3.js, where the client’s computer needs to do all of the computing of the visualization. There are a lot of benefits to server-based frameworks, namely that your users don’t need to have a heavy-duty computer to visit your site, and that your data is sitting behind a protected server. One of the difficulties is that it can be difficult to scale for lots of users. 2.3 Functions in R In order to use Shiny we need to have an understanding of R code syntax and how to use functions in R. Functions take an argument (input) and produce a result (output). A simple function is mean(). The input argument is a numeric vector such as c(1,5,3.2,0.001) and the output is a numeric value that is the mean of the vector. mean(x = c(1,5,3.2,0.001)) Note we could also not specify the name of the argument since R uses the inputs as arguments in the order it sees them. mean(c(1,5,3.2,0.001)) To see what arguments the function mean() requires, try looking it up in help: ?mean We can see that mean() takes optional arguments trim and na.rm. Compare the output from these two uses of mean(): mean(x = c(1,2,NA)) mean(x = c(1,2,NA), na.rm = TRUE) The NA value signifies missing data in R. The addition of other arguments changes how the function is used. 2.3.1 Writing our own functions In Shiny, we will use functions such as fluidPage() and shinyApp(). We will also create our own function server(). To define functions, the syntax is: name_of_function <- function(input) { # code } For example: myfunction <- function(a, b, div = 2) { (a + b)/div } Here, we must specify the inputs a and b and optionally div. Now we can use our function: myfunction(a = 3, b = 4) myfunction(a = 3, b = 4, div = 1) If we just type myfunction R prints the definition of our function. For more information on functions, see Advanced R book’s chapter on functions. 2.4 The concept of ui and server elements Every shiny app has two elements. The first is ui, which handles both the user controls and the layout and placement of output elements, such as plots or tables. ui usually consists of a layout scheme, with user controls (such as sliders, select boxes, radio boxes, etc) specified here. The second element is server, which handles all of the calculations and the generation of plots for ui. ui and server are only connected by two objects input, and output (they actually are environments, but we’ll just say they are objects). ui puts the values from the controls into input, which can be accessed by server. For example, if we have a slider called year_release in ui, we can access the value of that slider in server through input$year_release. server will then do something with the slider value and generate some output. Where does it put the output? If you guessed output, then give yourself a star! ui then takes output and will then display it using the various _Output functions (such as plotOutput, textOutput andtableOutput). If this is confusing, go very carefully through the diagram below. I’m happy to answer any questions you have about it. Basic shiny architecture "],
+["introduction.html", "2 Introduction 2.1 Setup (On RStudio Cloud) 2.2 Setup (On your Computer) 2.3 Introducing Shiny 2.4 Functions in R 2.5 The concept of ui and server elements", " 2 Introduction 2.1 Setup (On RStudio Cloud) If you’re running this workshop on RStudio Cloud, you will need to register for an RStudio Cloud account and then join the invite. This will be provided in the workshop. You will not need to download anything on the cloud instance. 2.2 Setup (On your Computer) Make sure that you have the following packages installed: install.packages(c("shiny", "tidyverse", "fivethirtyeight", "plotly")) Clone or download the tutorial from here (click the Clone or Download button, it’s green and on the right side): https://github.com/laderast/gradual_shiny Unzip, and open the gradual_shiny.Rproj file in this folder. The project should open in RStudio and you should be ready! 2.3 Introducing Shiny Welcome to Shiny! Shiny is a framework in R for making interactive visualizations for the web created by Joe Cheng. Nearly any plot in R can be made into an interactive visualization by adding some simple interface elements and mapping these interface elements into the plot. It’s an extremely powerful technique for visualization and communication of findings. Before we get started, we need to talk a little bit about the architecture of shiny apps. shiny apps are server-based, which means that all of the calculations and plot rendering happen on a server (when you’re running them in RStudio, your server is your computer). Compare this to JavaScript visualization frameworks such as D3.js, where the client’s computer needs to do all of the computing of the visualization. There are a lot of benefits to server-based frameworks, namely that your users don’t need to have a heavy-duty computer to visit your site, and that your data is sitting behind a protected server. One of the difficulties is that it can be difficult to scale for lots of users. 2.4 Functions in R In order to use Shiny we need to have an understanding of R code syntax and how to use functions in R. Functions take an argument (input) and produce a result (output). A simple function is mean(). The input argument is a numeric vector such as c(1,5,3.2,0.001) and the output is a numeric value that is the mean of the vector. mean(x = c(1,5,3.2,0.001)) Note we could also not specify the name of the argument since R uses the inputs as arguments in the order it sees them. mean(c(1,5,3.2,0.001)) To see what arguments the function mean() requires, try looking it up in help: ?mean We can see that mean() takes optional arguments trim and na.rm. Compare the output from these two uses of mean(): mean(x = c(1,2,NA)) mean(x = c(1,2,NA), na.rm = TRUE) The NA value signifies missing data in R. The addition of other arguments changes how the function is used. 2.4.1 Writing our own functions In Shiny, we will use functions such as fluidPage() and shinyApp(). We will also create our own function server(). To define functions, the syntax is: name_of_function <- function(input) { # code } For example: myfunction <- function(a, b, div = 2) { (a + b)/div } Here, we must specify the inputs a and b and optionally div. Now we can use our function: myfunction(a = 3, b = 4) myfunction(a = 3, b = 4, div = 1) If we just type myfunction R prints the definition of our function. For more information on functions, see Advanced R book’s chapter on functions. 2.5 The concept of ui and server elements Every shiny app has two elements. The first is ui, which handles both the user controls and the layout and placement of output elements, such as plots or tables. ui usually consists of a layout scheme, with user controls (such as sliders, select boxes, radio boxes, etc) specified here. The second element is server, which handles all of the calculations and the generation of plots for ui. ui and server are only connected by two objects input, and output (they actually are environments, but we’ll just say they are objects). ui puts the values from the controls into input, which can be accessed by server. For example, if we have a slider called year_release in ui, we can access the value of that slider in server through input$year_release. server will then do something with the slider value and generate some output. Where does it put the output? If you guessed output, then give yourself a star! ui then takes output and will then display it using the various _Output functions (such as plotOutput, textOutput andtableOutput). If this is confusing, go very carefully through the diagram below. I’m happy to answer any questions you have about it. Basic shiny architecture "],
["app-1-connecting-ui-and-server.html", "3 App 1: Connecting ui and server 3.1 Making a ggplot interactive 3.2 Exercise 3.3 More about Inputs and Outputs 3.4 What you’ve learned so far 3.5 For More Info", " 3 App 1: Connecting ui and server Basic shiny architecture We’ll be taking two simple ggplot2 graphs and turning them into part of an interactive dashboard. The data we’re going to use is the biopics dataset from the fivethirtyeight package. 3.1 Making a ggplot interactive The first visualization is a scatterplot visualizing the total box_office by year_release, colored by type_of_subject. For the interactive portion, we’re going to color each point by different categories. Notice we use aes_string() to map columns to aesthetics. This is important, since we’ll be passing character arguments to modify this plot later. library(tidyverse) library(fivethirtyeight) data(biopics) biopics %>% ggplot(aes_string(y="box_office", x="year_release", color = "type_of_subject")) + geom_point() 3.2 Exercise Open the 01_app_basics folder and open the app.R file. This is the file for the Shiny App and we’ll modify it. Look at the structure of the code. There are two objects that we define: ui and server. We make them into an app with the command shinyApp(ui = ui, server = server). Take a look at the server code. Notice where our ggplot2 code is. Both graphs are placed in a renderPlot() function, and we give them a place in output, so ui can “see” it. The scatterplot is named output$scatter_plot and the boxplot is named output$boxoffice_boxplot. Take a look at the ui code. Where in the code are we displaying scatter_plot and boxoffice_boxplot? Notice we don’t need to refer to output. The display function plotOutput knows to look in the output object. Run the code by clicking the “Run App” button on the top of code window. You can see that we output our graphs in the “main” window. Let’s paste in a control. Paste the following code where it says “Add User Interface Element here” in app.R. If you run the app again, you should see a control, but it doesn’t change the plot. selectInput("color_opts", "Select Category to Color With", choices = select_color_options) Let’s connect the control to the plot. Change the color aesthetic to the following: color = input$color_opts Now try running the app. Your select box should control what categorical data controls the color of the points. Try it out! Bonus! Let’s add in another category option. Where should you add it? Just in case, here are the column names and their data types. You probably shouldn’t add title, director, subject, lead_actor_actress since they aren’t really categories, and they will blow up your ggplots. glimpse(biopics) ## Observations: 761 ## Variables: 14 ## $ title <chr> "10 Rillington Place", "12 Years a Slave", ... ## $ site <chr> "tt0066730", "tt2024544", "tt1542344", "tt2... ## $ country <chr> "UK", "US/UK", "US/UK", "Canada", "US", "US... ## $ year_release <int> 1971, 2013, 2010, 2014, 1998, 2008, 2002, 2... ## $ box_office <dbl> NA, 5.67e+07, 1.83e+07, NA, 5.37e+05, 8.12e... ## $ director <chr> "Richard Fleischer", "Steve McQueen", "Dann... ## $ number_of_subjects <int> 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 3, 3, 3... ## $ subject <chr> "John Christie", "Solomon Northup", "Aron R... ## $ type_of_subject <chr> "Criminal", "Other", "Athlete", "Other", "O... ## $ race_known <chr> "Unknown", "Known", "Unknown", "Known", "Un... ## $ subject_race <chr> NA, "African American", NA, "White", NA, "A... ## $ person_of_color <lgl> FALSE, TRUE, FALSE, FALSE, FALSE, TRUE, FAL... ## $ subject_sex <chr> "Male", "Male", "Male", "Male", "Male", "Ma... ## $ lead_actor_actress <chr> "Richard Attenborough", "Chiwetel Ejiofor",... 3.3 More about Inputs and Outputs As you start to program Shiny apps, you’ll need to know the different kinds of inputs and the different kinds of outputs. This is a quick tour of the various types. 3.3.1 Interactive control tools (from UI to server) In the above image, the UI uses a function selectInput() to allow the user to interactively select the color variable. In the server, this selected color is called input$color_var. This function selectInput() creates a box with choices for the user to select from. There are amny types of selecting tools, including drop down menus, checkboxes, radio buttons, numeric sliders, text input, etc. They all have their own function and they all require an argument id= which tells the server what the input is named. A list of useful control functions can be found below (a more complete list with examples is in shiny.rstudio.com lesson 3): function tool or widget description actionButton action button checkboxInput checkbox input, multiple options allowed fileInput file upload numericInput numeric value input radioButtons radio buttons where only one option is allowed selectInput a box that a user can type into and choose from choices sliderInput a slider bar textInput text/string input 3.3.2 Display output (from server to UI) In our above example, the server uses a function renderPlot() to send a boxplot image to the UI to display using the function plotOutput(). An example in the server function might be: server <- function(input, output) { output$box_plot <- renderPlot({ # R code goes here ggplot(iris, aes(y=Sepal.Length)) + geom_boxplot() }) } Now, we’ve used ggplot() to make our boxplot, and renderPlot() assigns this plot to output$box_plot. The UI uses plotOutput(outputId = "box_plot") which adds the plot stored in output$box_plot to the app. There are many render* functions that are reactive functions producing reactive output. Remember, the server is where all the hard work goes. The UI just listens to what the server is giving it. A list of render and output functions are found in shiny.rstudio.com lesson 4): render function creates renderDataTable DataTable renderImage images (saved as a link to a source file) renderPlot plots renderPrint any printed output renderTable data frame, matrix, other table like structures renderText character strings renderUI a Shiny tag object or HTML Once the result is rendered, the UI takes this output and uses an *Output function to produce it in the app: output function shows/creates dataTableOutput DataTable htmlOutput raw HTML imageOutput image plotOutput plot tableOutput table textOutput text uiOutput raw HTML verbatimTextOutput text Render functions take one argument (code) wrapped in ({}) such as renderText({"Hello World"}) Output functions take the name of the output object that is the result of a render* function. 3.4 What you’ve learned so far The architecture of shiny apps How ui and server communicate through output and input How ui displays plots (using plotOutput) Adding a control (a selectInput) Connecting that control to our plots using input 3.5 For More Info Dean Attali is, next to Joe Cheng, a real Shiny expert and a great teacher. He has a great course on DataCamp called “Shiny Case Studies” that would be a great next step into learning more about Shiny. "],
["app-2-reactives.html", "4 App 2: Reactives 4.1 Exercise 4.2 For More Info", " 4 App 2: Reactives So we’ve connected our control up. Great! Now let’s add a numeric filter to our data by using an reactive. reactives are the heart and soul of shiny. We’ll use a reactive to filter our data, and pass this filtered data on to our two plots. This means we can dynamically filter our data and our plots will update. A reactive can be thought of a bit of code that runs whenever the controls that map to it are changed. In this case, our reactive represents our filtered dataset when we adjust our slider. Basic workflow of reactives 4.1 Exercise Open up the 02_reactives folder and the app.R file within. Try running the app. You can see that we added a slider (using sliderInput) in ui, but it doesn’t do anything. We’re going to connect that slider to filter the biopics dataset. You might notice that there is a new object in the server code, called biopics_filtered. This is where we’re going to connect our slider. Paste the following bit of code into the reactive, after biopics. What does it do? %>% filter(year_release > input$year_filter) Notice how we call the reactive in output$scatter_plot? We have to use biopics_filtered() rather than biopics_filtered. A reactive is actually a function, and so you need to use the function notation to invoke it in a renderPlot statement. Ok, run the app again and adjust the slider. Notice how the plot axes changes. Congrats, that’s your first use of a reactive! 4.2 For More Info We’ve only shown one type of reactive, basically a reactive data.frame. Almost any type of object can be a reactive. Here are more resources on learning about them. Reactivity 101 (Dean Attali) - Dean Attali’s pages on Shiny are a good read, especially his section on reactives. Reactivity: An Overview (Official Shiny Documentation) - I personally find this overview of reactives a little confusing. "],
["app-3-adding-tooltips-with-plotly.html", "5 App 3: Adding tooltips with plotly 5.1 Exercise 5.2 For More Info", " 5 App 3: Adding tooltips with plotly Tooltips are great for examining single datapoints in the data. We’re going to add tooltips to our scatterplot so that users can hover over a datapoint and see all the other values that go along with a datapoint. There is an easy way to add tooltips to our graphs: use the plotly library. This is a JavaScript (built on top of d3.js) library that makes your ggplots more interactive, with built in tooltips. The plotly library itself relies on d3.js, which is a client-side visualization library. So if you add plotly, does this make your shiny app client-based? Not quite. All of the controls and data serving are still done server-side. It’s only the last bit that is translated to JavaScript and is client-side. Please note that we’re not putting anything on the plotly servers when we do this. All of the data still lives on your server. We’re just using the JavaScript library. 5.1 Exercise Try running the app.R in 03_tooltips_plotly. Mouse over a datapoint. Neat, huh? shiny::runApp("03_tooltips_plotly") How did we supply the infomation to the tooltip? Take a look at the aes_string() code. Notice we’re passing in a bunch of dummy variables into aes_string. Do these variables appear in the tooltip? Modify the aes_string() statement to only show 5.2 For More Info The plotly package can instantly make your graphs more interactive using the ggplotly() function. For more info and some recipes, go here: https://plot.ly/ggplot2/ "],
diff --git a/docs/testing-and-debugging-apps.html b/docs/testing-and-debugging-apps.html
index df68faa..4ba7d3d 100644
--- a/docs/testing-and-debugging-apps.html
+++ b/docs/testing-and-debugging-apps.html
@@ -129,12 +129,13 @@
1.1 Workshop Expectations
2 Introduction