In this video I'm going to show you examples of several kinds of different input, an output set you can use when you're making a shiny app. Some of these we have seen before, and so there will be some review, but then I will also show you some new options available to you. This is not every kind of input and output that you can use in shiny. You have to look at the reference documentation to get the complete list. But here I'm going to go through some of the most common types of input and output, and you're going to see some patterns, but how these are used. And then you can extend that into other functions that you might want to play around with when you look to the reference materials, when you see examples online. Together everything we show you here is going to give you a strong set of tools for building a powerful and interesting shiny app. To reiterate, a user interface in Chinese created using the fluidPage function. And within that fluidPage function you specify input and output parts of the user interface. That's everything that the user is going to see on the screen when they're using the application. You're telling the program where the users can provide instructions or input to the application by typing in text or selecting from different options. And you're also telling the application what kinds of things you want to display drawing on that input. Most commonly this is going to be things like filtering data based on some parameter supplied by the user. But there are other more exotic inputs and outputs that you can generate as you get more advanced doing this. There are several kinds of inputs that you can use to give input to a shiny app. And these are helpfully outlined in chapter three of mastering shiny by Hadley Wickham, and they are also available in the reference materials. And all that is included in the materials for this week, so you should go through and look at this yourself to see the more complete list. This is just the basics. So textInput allows the user to write in text, and that's something we've seen before. NumericInput would let the users type numbers into the application. SliderInputs tells users to select values from a slider that can either be one slider or two sliders on sliderInput. SelectInput is going to let users select options from a dropdown menu. Radiobuttons is going to present radio buttons that users can use to select between two or more options. And then checkboxInput an checkboxGroupInput will present checkboxes. Again, these are just the basic senior center most commonly used one, so if you want to find options for more, you can look at the documentation. Now, aside from Inputs who also have outputs in the user interface, and the functions for output include textOutput which will print text. VerbatimTextOutput which will print the output from the all console. TableOutput, which will display a formatted HTML table of a data frame or some kind of other object that you can provide. DataTableOutput which will display a fancier HTML table with some additional navigation options. And you should note that when using dataTableOutput, you need to, aside from shiny, also use the library DT in order to make this work. PlotOutput, as we've seen, will display plots that would otherwise display in the plot preview window in our UI. And then plotlyOutput will display plotly figures, and these are those interactive figures that we've seen in the past. And again, note here that in addition to the shiny library, in order to use plotlyOutput, you also must load plot the library in your shiny application. There are more output functions, but these are some of the most common in a good place to get started. Now these output functions are always paired with a rendering function, which is going to be in the server in your shiny application. Some of the rendering functions here that are paired with the output functions we've displayed above, are renderText, renderPrints, renderTable, renderDataTable, renderPlot and renderPlotly. Now, as you can imagine, these are complementary, right? So were renderPlotly is matched with plotlyOutput, renderPlot is matched with plotOutput and so on. Chill out, you should always think about things as being paired. This is all pretty abstract and difficult to follow, which is verbal explanation. So it's going to be easier just to walk through some more examples. And we're going to work through the example file. Associated with this video. The code creates a very simple shiny application that displays several kinds of output and few different input options. You should begin here by opening up the file and running the application so you see what the final product looks like. You should also take a look at the code and familiarize yourself with it a little bit before we start walking through it line by line. Once you're done poking around, you can open up the code again, and you can follow along with us here. To start with, we load all of the required libraries, and note that I'm including DDT package and the plotly package here, along with the tidyverse and shiny. You need DT for data tables, and plotly for plotly figures. For ease, I've just created some fake data here in the first lines of the code. And these are fake data for three different cities for a few different measures from 1990 to 1994. So take a minute here, look through this code to see how that data were generated, and also look at the resulting object so you know what we're trying to plot here. The app begins as we expect with the user interface object, and we're going to create this using the fluid page function. And we're going to feed different components of the user interface to the fluid page function as arguments. This is demonstrated in the commented code here. Without any arguments in the component function, the skeleton the UI looks like this, it's a series of input and output functions. You can also see that I have these functions here for h1 and p, and these are functions that will print static text into your shiny app. They're kind of equivalent to HTML tags, so that's something you've done before. You have multiple levels of headers, so h1, h2, h3, and so on, as well as normal paragraph text. And you can see these functions by doing a help command for builder in the shiny documentation. Using these components, we'll go ahead and start building the app, so we're going to start adding arguments into each of these functions and build the thing. It's helpful to have the code and the final product up side by side here for comparisons, you might want to run the app and have it open in a window that you can see while you're looking through the code. The first argument in our fluid page function is this h1 function for static text, followed by the p function for some paragraph style text. And in the first interactive elements of the app is the text input box, which we saw a few videos ago. This follows the same kind of pattern that all input functions will use. So we set the input ID, the label, and the starting value for the text input box. Then we have a text output function that points to text_output. And if we skip down the server function here, we can see that there's this complementary function to text output and that's render text. And that's where we assign the input from text input to the output slot, which is then filled in with the render text function. Below that dynamic text, we have a verbatim text output function. Which is going to print raw our output generated by commands in the server, and that's the compliment your render print which you find below. Next we have the slider input function and a checkbox group input function, we've seen these before. And these inputs will modify the tables and figures that are in the application. So if you look down at the rendering function for these plots, and the tables and the server function, you'll see that these incorporate filtering commands based on the input from the slider and the check boxes. So for example, the renderTable function tells the table to display only cities that are in the vector of cities selected by check boxes for the input city 1. And only years that are in the range of the two values selected by the slider in input year one. This is the same filter for all these tables and figures. But there could be different, you could choose to have different filters here if you wanted to. Going back up to the user interface now, and I hope you're following me as we're going back, and forth back, and forth to understand how all these parts work together. So back up in the user interface, after the table output, we have data table output which is matched with the render table function in the server. And this is going to produce the fancier interactive table. The data table output is matched with the render data table function in the server. And finally, we have to plot output function, And the plot layout put function. Which are matched with render plot and render plotly in the server. So there is a lot going on here, and I've kind of throw at you all at once. I've tried to make it as clear as I can, but you're just going to have to kind of puzzle through this again. Might have to watch the video several times. And one thing you might consider doing is commenting out different lines of the shiny app, building it up from scratch. So start by doing something like commenting out everything in the user interface except for the headers and the text input function. And then comment out everything in the server function except for the first output line. Then you can gradually keep uncommenting the complementary input and rendering functions until you get the whole app working correctly. This is going to take some time, but just try to stay positive right? These are the building blocks of really powerful visualizations, so once you get the sensor how this works? I think you're going to find putting these pieces together pretty easy actually. It's just that the learning curve is kind of steep and you have to spend some time with the code. In the next video we going to talk about how to lay out shinier and more advanced ways because right now all we have is just long strings of inputs and outputs and you might want to put these together a little more attractive or accessible way and we are going to work on that next after you've gone through all these functions and figured out how to put all these things together.
