Creating your first shiny app in R

okay today we are going to talk about creating a shiny app and i have some special guests with me this is hadley hi and this is adeline okay so hadley adeline and they're gonna help me out and they're helping me out today because we love baby names because they love the baby names data set so we are gonna just jump right in here and um so i have our studio open and the first thing i'm gonna do is create a project oops i'm going to um there we go new project and i'm going to just skip the version control now but if i had wanted to i could have set up a github repo first and then done this via version control because i'm replicating this app i'm going to start from here um also i should point out here that you can uh click this button and this will sort of give you a template to get started i'm gonna just do a new project for now and i'm gonna put this on my desktop for now because i'm going to eventually delete this so i'm going to call this baby names baby names baby names and we'll give it a second to get set up here and then the first thing i'm going to do so remember when we create apps we're going to go to file new file and i'm going to choose our script instead of our typical our markdown so i'm going to open this make that big and then something else i often do is i open our marked in our markdown file as well and um let's see controls go here we'll just create an empty document here and i'm going to have this here i i just sometimes like to get some r code run here okay so now in here the other thing i often do is um i cheat and i go to some old um shiny app i've made and i steal my own code um so let me just figure out my windows here and bring this over so you can see it there we go so you probably remember this from the tutorial you just went through this is like the most basic shiny app that exists it has nothing in it but it has the key elements i need so i'm going to start by copying this and pasting it into my new file and then i am also going to move this over to my other screen in case i make some mistakes in this document which i almost surely will um and then the other thing i want to point out is i have at all times well i have this open to remind me of what we're doing um but i also have my shiny cheat sheet open and i'm going to reference this as i'm going okay so once i have this bare minimum shiny app let's make this look a tad nicer there we go i'm going to save this into this project folder so i'm going to go to file save as and i'm already in the baby names folder and i'm just going to call this the baby names app okay and the first thing i'm going to do is i'm going to run this app and just make sure i don't have any mistakes right away if i did that would be a little bit sad okay no mistakes although remember extremely boring because there's nothing in this okay so let's start adding some things to our app and before i jump into the more difficult pieces i know that there's a couple libraries i'm going to need i'm going to need tidy burst i always need tidy verse right headly yes right out of line yeah we always need tiny verse and then i need the baby names library because we're gonna work with that data okay and again i just like to run the app sort of every time i make a change just to make sure i haven't made some mistakes so again very boring but haven't made a mistake no errors yet okay and then i want to remind myself there's the cheat sheet um of what a half i'm trying to make so i want to show the number of babies with a given name over time i want to allow the user to type a single name um maybe if we have time we'll talk about typing more than one name i want to allow the user to choose a range of years they would like to display and i want to allow the user to filter by sex okay so i'm trying to think right now of the places that the user is is giving me some input so the name the range of years and sex and then i'm going to try to think about like what sorts of things are they doing there so with sex it's a filter and it's in this data set is only male and female so that could be something like a drop down box for choosing a range of years i'm thinking sort of like a slider bar um so that they can move it around and choose the years and for the name i want them to be able to maybe just type in a name we could think of more creative ways to do that as well so those are all the user input things so i'm going to get some of those set up first those go inside this ui fluid page portion okay and um let's actually jump back to the cheat sheet real quick and so as i'm thinking about these inputs i'm looking over at uh this portion of the cheat sheet maybe i'll zoom in on that a bit more trying to think about um what the various inputs are that i'm going to use okay all right back to baby names so you know let's just start thinking about those inputs um so let's go with um let's go with the [Music] i guess maybe it makes sense sense to think about the name first since that perhaps is the most relevant to the person using this app um so in this case they're gonna be typing in some text okay so i'm going to jump back to oops where did it go i've lost all my bars here i'm going to jump back to the cheat sheet and i see that there's one here called text input so i'm going to go ahead and try out that text input so i need to give it an input id and i need to give it a label so just to remind you the input id is what what's going to be used later um in this server portion when we call that input and then the label the label is what it will actually look like in the user interface okay so let's put our okay let's put our first thing in here so text input and you can see here all the arguments it gives you so um the the input id actually let's explicitly call that input id i'm going to call this name oops okay i just also want to make sure this doesn't look too different from what i did in the tutorial and then the next argument here is the label and for the label i'm going to use n with a capital i'm going to use name with a capital n um and then let's see what were some of the other arguments so value this is the initial value if you want to have something in there by default um the other cool argument i like here i'm gonna uh i'm gonna skip value um so i can just put uh parentheses in the or excuse me quotations in there um the the one i like for uh text input is i like to use this placeholder because this uh sort of shows up in gray and this is like an example of what they should put in there and i'll go ahead and put well i'll use my name because i can't use just one of theirs because they'll maybe get mad okay so now i have this um the first thing i want to do again you'll see me do this over and over is i'm going to save my app and i'm going to run my app i like to do this at every step to make sure i haven't made a mistake so i can see now that it has that placeholder now if i actually do something nothing's going to happen here because i haven't told it what to do with this but that's good that looks like what i was expecting and i realized maybe i want to have name colon maybe that looks a little nicer okay um let's move on to the filtering by sex so i'm going to jump back to the cheat sheet so when i filter i want to do something where i have just two choices here so it looks like this select input is gonna do the right thing for me so let's try that select input and by the way notice that i have a comma over here very important i can't tell you how many times i've forgotten that i once again need an input id again this is what i'll reference later in the server side of things so we'll call this sex and uh the label will do sex with the colon and what are some other arguments i have here um we won't automatically select one we're not going to allow multiple items there's some width and size i'm just trying to think if i did anything else um i do need oh that's the one i forgot i do need to tell it the choices oops don't want to forget that so this gives it the choices that should show up there so we'll say um [Music] let's make sure i do this right ah that's right this has to be a list so let's actually read this carefully see i almost made a mistake there let's go back and see what actually let's go back to the cheat sheet so select input choices okay that doesn't give me much there i could try to help um let's see what this um let me go back here let's scroll over choices oh that doesn't really help me oh press f1 i'm gonna try that there we go let's open this up choices list of values to select from if elements of the list are named then that name rather than the value is displayed to the user okay let's see here so let's check back and see what i did in my other example here okay so let's do choices equals and then we have to give it a list of our choices so let's um say female equals f and male equals m and if we go back to these instructions here so these do need to be uh the values that this variable takes in the data so i believe in our baby names data set let's take a look at that really quick baby names okay okay so if i take a look at the baby names data set yes the values that they take are f and m so i want to make sure that those are in my two choices and if i name them instead of f and m showing up female and male will show up so let's stick with that okay um let's see here oops had something still down here okay i've made a mistake somewhere oh i haven't closed everything so i've closed the select input not the fluid page i'm going to actually put that down here so i don't keep making the same mistake okay so there's my boring app notice female and male show up rather than f and m and i can type in a name still no data to work with all right then i think the last thing we wanted to do was have a way to filter the years so how are we going to filter the years well i'm going to jump back to that cheat sheet again [Music] and i want to do something like this okay i want to have a slider where i can go between two values so i think that's the one i want yep looks like slider input is what i want right hadley yeah of course adeline you think that's right um [Music] yeah you're just excited to plot your name right yeah okay good we'll get there okay slider input so let's see we definitely need the input id so uh we'll call this year and then we're gonna need a label and let's because i know it's going to be a slider i'm going to call this year range colon and then they'll be able to choose a range of years okay oh look i didn't even remember i did that before but i did do that before somewhere in my memory okay so wrong thing um the other thing actually let me go back here so you can see where this is coming from the other thing we want to give it is the minimum value and the maximum value that can be selected so let's see here um we could actually compute this from the data so perhaps um perhaps i'll do that so let's make the minimum value baby names oops i know we haven't used this notation a lot in this class but i can do the minimum of baby names dollar sign year and that will be give me the minimum year for the data and then the max will be max baby names dollar sign year um and then what else do we want to give it oh i remember there's one little trick here so uh value um the initial range of values oops let's get that on the next line is going to go from uh let's see actually i'm just going to copy this it's going to go from whatever this is the minimum to the maximum and then one other thing i want in here and i can't remember if this is in here or not i think this is an extra oh no it's right there sep so um because these are years i don't want a separator for the thousands place so i'm gonna make that separator there we go i'm going to make that just nothing so i'm going to put quotes with nothing in it okay so let's give that a whirl all right so looks like i have my year range i can move this around which is really cool and great so my user input now is sort of set now comes the slightly trickier part this is where we do our all of our our our coding so let's think back to what we're trying to do here you getting excited we're almost to the plotting stage wait so then i can cut my name yes then you can put your name it's going to be super exciting so oops this is not the one i want to be on let's go this out of the way okay so let's see here show the number of names with a given name over time okey dokey so here's one little trick i use when i'm first starting to make the server side of things um if possible i just make a static graph first to make sure i don't make any mistakes as i'm coding so i'm just going to take the baby names data and i'm going to filter because i know at some point i'm going to want to filter so for now i'm going to filter to sex equals uh female and oh no i'm going to filter to name equals [Music] oh okay you're gonna let happily do it that's great so name equals hadley and i'm gonna plot it and let's see on the x-axis we're gonna have year and on the y-axis we're gonna have n did i forget anything oh hello i forgot my gm gm line so notice i haven't used any of the inputs here i just kind of want to get the graph set and make sure i haven't made any mistakes in that part of the code so let me run the app and here we go and my plot isn't there oh maybe it will be as soon as i do these things okay well but i don't have any errors so that's good maybe something is going wrong and i haven't quite had it yet let's also do this this is another thing i sometimes do is i like to take my code and i'm going to go over here to my uh you know essentially empty oops our markdown document and paste the code in here and run it okay good i have not made a mistake um i am going to add theme minimal because you know i like that one okay great well we've got something here now what we need to do is um oh hello i know what i forgot how could i forget this step i forget to tell it what kind of output i'm going to have so this is why it's not recognizing anything i have here because i haven't even told it that i'm going to have any type of output so let's go back to the cheat sheet almost to the plotting part i promise the cheat sheet so i need to tell it what type of output i want right and i need to also tell it to render that plot this is what i'm missing my goodness that's a little bit embarrassing oh well um so we want a plot output okay right so we're going to give it a plot output and we need to give it at least an output id okay so let's go back here into our user interface and we'll do plot output and let's see the output id let me look back and see what i did before we'll just call this time plot let's call it name plot that's really a better name okay now let's save this and run that code or run the app okay still no plot but i think that's to be expected because we haven't actually told it to add a plot one i didn't one oh no i have your name in there which is exactly what i want okay so now over in this part let's actually add a render function so this is getting a little bit a little bit tricky or a little bit new so here's where we need to connect some of our uh things from the user interface to the server side of things okay so i'm going to tell it to use that name plot okay and this oops okay and this is where we're going to use that render plot function and let me just do this and i'm going to copy cut this out of here and i'm going to paste it in here okay and let me just just in case that part was a bit confusing let me just jump into the cheat sheet here and point out that because we use this plot output and gave it an um in our user interface part we need to use render plot in order to sort of manifest that's that plot when we uh compile our app um and actually i don't think i need these curly brackets i'm not exactly sure why i had them in there before okay so i think that will do it now let's try running our app all right so now notice that there is a plot here it's already filled in if i change something here so if i put lisa and change to let's say mail this isn't actually going to change my plot right now because i i have this user interface part and right now i just have a static plot okay so here's where we need to connect those pieces from the user interface to what's in the server side of things okay so let's make some of those changes so here instead of sex being equal to female we're going to have sex equal to in oops input dollar sign and then what did we call it well here's our various input things right so for oops what one of my own um sex we called it sex lower case s okay and then here instead of name being equal to hadley we're going to have the name be equal to input oops dollar sign not add a line name because that way we'll be able to change the name yeah um and then in the plot let's see what do we need to change in the plot so here we actually need to add something so right now it'll just plot over the entire range of data but i can change that if i use scale x continuous and make my limits equal to let's see here um yeah so this um where did i put that the the year i said here is actually going to be a list of years or a sorry a vector of years it'll give you two numbers back that the whatever you choose for them in and whatever you choose for the max so the limits are just going to be that input oops dollar sign here okay i think hopefully i did all that right let's try to run the app and see what happens oh um oh somewhere i missed a comma or a plus sign there we go i missed a plus sign okay let's try again okay so i have what looks like an empty graph what name should we type in oh hadley again okay hadley sex female and then we'll do the fold you can see the graph already updated itself so there we are looks like there was no hadley's until i don't know the early 1960s maybe can you type in adelaide now now we can type in adeline too let's try it all right oh it looks like there was a lot of adeline's in the 1920s and then it resurged again like right when you were born um luna luna okay we'll do one more luna what's the request and let's just you want to see if there's any male lunas okay not many see that number that's seven so there have not been many male lunas let's try females oh wow that's really made a surge hasn't it and we could if we wanted to change the the date range there cool okay cool um so one other feature i want to add is i just want to add a button so that when you make these changes you can then click a button at the end and your plot won't populate until you click that button so let's add that and let's jump over to the cheat sheet really quick oops so there are uh submit buttons i thought there was one other button there action button and the one i want to use i believe is the submit button yep so we're going to add that to the user interface so essentially this is going to stop anything from happening until you click that submit button so if i go back to baby names here let's go up to the user interface part and we're going to add a submit button and the text that i want it to say is i wanted to say create my plot exclamation point because we're excited about creating our plots right yeah yeah yeah they're not bored we like baby names okay so this time let's um chris okay chris or christopher christopher okay and then we're gonna try mail okay so notice that this plot hasn't changed and i oh i see i i think i so now it puts my plot above this we'll go change that in a second we'll click that button here whoa whoa there were so many christopher's in the early 1980s oh sure we can look to see if there's female christopher's why not oh looks like there were some okay interesting okay so um i actually want this submit button up here because i sort of lose track of it down there so let's that was my fault so see this submit button i'm going to take this whole thing i'm going to cut it out and i'm also going to delete this comma that i otherwise would have forgotten about i'm going to paste it in there and let's just run that app one more time sure we can try mesa females and see now my create plot button is right here which makes a little bit more sense yeah this is not very popular name how about a name um we can check none or at least fewer than five because that's what this data has okay so the last thing i want to show you is um that you can publish this app so if i go to publish publish application now i already have this set up you have the instructions in the tutorial so you should take a look at those but once you have this set up it's pretty easy to publish um i'll keep the title baby names i will publish now this does take oh well cannot let's see oh i know what happened i called it baby names app instead of app.r that was my fault um okay let me close this and let me go into my files so this needs to be called app.r that was my fault for naming it incorrectly so let's go over here rename and instead we're going to call it app dot r okay now we can install it install isn't quite the right word but close we're gonna deploy it deploy deploy it that's right so i run the app again did i not click it happened here oh um what did i do um quite sure what happened let's try stopping that okay let's try this again i'm going to get rid of this don't need it i'm going to try to close this there we go and reopen our studio let's see oops you can hear my computer being super noisy right now so it's possible i have made it angry um it's humming yes the computer is humming quite loudly um let's see here let's try opening this from here instead there we go that worked okay let's open this app.r file and see yay okay so i'm not exactly sure what happened i'm sure if i go back and watch my own video i might catch what i did wrong there but let's just make sure i think we've got everything yep there we go in the 1960s that's right and mail um we can check that in a little bit after we publish the app so let's go to publish applications hopefully i can do it right this time and yes my computer is really singing right now it's not very happy with me okay now this takes a little bit of time the first time you publish it as you update it it doesn't take as much time but essentially it has to uh sort of install all these packages that you're calling so since tidy versus such a big package that one takes a while um so it's gonna take a little bit of time for this to work so maybe while we're waiting um this is not just a practice i decided to just wing it and do the whole thing right away okay um so i don't know what i know let's talk real quick and talk about like what features you would add to the app like what what other things would you like to be able to do with the baby names data set i would want to say that how old or like you could say how old they were like you could say like let's say um george um how many georges are in like the 19th in the 1950s and they were all seven oh so i think these are their names like the names they got when they were born yeah but we could sort of figure out how old those people would be now is that what you're kind of thinking okay that's a good idea what else can we do with our app any other ideas so adeline wants to be able to compare names i'm not sure how well you all can hear them when they're right next to me so yeah you want to be able to compare names that's a good idea i think that's something that my students could work on too great so you can see this does take a little bit of time the first time what else would you like to see in the app how many names should you be able to compare if you were going to compare names i would want to see how many you want oh you could okay that's a good idea all right guess what folks we have success so when you have success i'm going to pull this over here um your app will show up in a web browser and you actually this is this is my shiny apps io page so i could now send this app to hadley well hadley doesn't have her own electronic device but i could send it but she wants one but i could send it to adeline i could send her this url and she could play with this baby names app all day long really yeah and you could send it to your friends it'd be so fun okay well we have a baby names app started and i hope this uh was helpful and hopefully my kids made it more fun for you i think we are going to sign off now and go outside does that sound good or we might have been more distracting that's okay all right say bye bye bye oh my gosh okay bye

Channel: Lisa Lendway - Statistics & Data Science

Views: 4,758

Rating: 4.9252338 out of 5

Keywords:

Id: ak_NJCVrJXY

Length: 42min 33sec (2553 seconds)

Published: Sun Oct 04 2020