Web Apps in R: Building Data-Driven Web Application in R | Shiny Tutorial Ep 3

Key Takeaways

welcome back to the data professor YouTube channel if you're new here my name is shannon antacid ahmad and i'm an associate professor of bioinformatics on this youtube channel we cover about data science concepts and practical tutorials so if you're into this kind of content please consider subscribing okay so this is the third episode of the web apps in our series so today we're going to build a play golf web application so probably you're wondering what is a play golf application so the play golf web application that we're going to build today it's going to be based on the weather data set provided by the weeka data mining software so let's have a look here so the data set is a relatively small data set where it has a total of five variables so four variables are the outlook temperature humidity and the win and the class label would be to play or not play golf which is a function of the weather and the condition right like whether it is sunny whether the temperature is high whether the humidity is high or low or medium and whether there is win or not true or false and then the final decision is to either play or not play COFF so before we dive into the code let's have a look at how does the web application looks like okay so the web app looks like this it's a very simple application so the name of the web app is play golf and so here there is the input parameters comprising of the four variables that I have mentioned the first one is the outlook and so the user can select one of three outlook whether it is sunny weather there is overcast of cloud and also whether there is rain or not and the second variable is the temperature and so this is a slider input so the user can slide the input value and then the humidity is also a slider input and then windy is either a yes or a No which is a drop-down menu and then when you're ready to make a prediction you just click on the submit button okay and here you see a prediction is being made and the prediction says yes and then we also see the underlying probability in that the know has a 27 percent probability and the yes has a 73 percent probability and so you could play around with this right if for example if it is sunny and the humidity is very high and the temperature is very high and there is when should you play golf no I mean really if the temperature is high it's very humid and it's very windy and sunny right probably not okay well if it's what if the humidity is low temperature is quite cool and it's sunny and it's not so windy would you play golf right yes right so there's a 87 probability for yes and a 13 percent probability for no okay so this is the web app we're going to build today so let's go ahead and stop the web map for a moment okay so what you want to do now is go to the data professor github and then you want to click on the code directory and followed by clicking on the shiny directory and finally clicking on the 0:03 play golf directory and then click on the app dot r file okay so what you want to do is right click on the raw link and then save the file so I'm gonna save it into the weather folder save it okay it's right here click on it make sure that the app works okay it works prediction has been made okay cool so it's just clear up this by pressing on the ctrl + L button ok so let's have a look under the hood what does the app dot our file looks like so the first couple of lines which has import libraries used by this app dot our file so this comprises of the shiny packaged shiny themes packaged the data table library the r curl library and the random forest library ok so next line of code would be to create a data object called weather by reading the CSV which is load it from the data professor github in the data folder and the file is called weather dot weeka dot CSV ok let's have a look at the data set what does it look like I'll click on the line weather and then I hit on the ctrl + Enter button and then let's type in weather ok so this is what me see let's go with head and then weather ok and so we see that there are five columns outlook temperature humidity windy and play right and let's have a look at the data type of the data set we see that the outlook has three factor levels play has two factor levels so these are categorical label no yes and the outlook is overcast rainy and sunny windy is a true-and-false humidity and temperature are integers and so a random forest model will be created by using the four variables comprising of outlook temperature humidity windy as the input variable and the play variable here will be used as the output variable or the variable that we want to predict ok and in the the data equals to weather which is the weather data object here and we're gonna use number of three to be five hundred and because there are four input variables we're just gonna use em try a four okay so let's try building a model and the model has been built and let's apply the model for prediction shall we I mean just to test that the code is working properly so let's try applying the model on the input file that I have previously mentioned about and so we're gonna run this line and putting the data into the variable called test and then we're gonna assign the factor you can see if we don't do it and it'll provide an error so before we run this line of code let's just try to make a prediction model and we should be able to see a error coming up okay so we got this error error in predict random forest type of predictor in new data do not match so what we notice is that if we type in the STR and we type in weather and then we notice that the outlook has factors with three level but if it Str and then the test variable notice that the outlet has a factor of only one level and this is because the input data has only one line of data which is essentially one row of data and and so the outlook is only sunny so the prediction being made has only one role and but in reality it should have three levels of the feather so we're gonna define that by telling the code that there are three possible factors there are overcast rainy and sunny so let's run that line of code and then run the prediction again okay and it works and then print outputs and here you go we got the prediction which is exactly what is going to be displayed on the web application let me show you right we make the prediction and it's shown here so this table you see here it's shown right here so the model works and let's go to the other lines of code so the next one would be the user interface right as I have mentioned in previous video the user interface represents the first component of the shiney web app and this is followed by the second component which is the server and then this is followed by the third component which is the fusion of the user interface and the server component using the shiny app function okay so let's talk about the UI so this UI object makes use of the fluid page function and we're gonna use the theme equals to the shiny theme United and so the United theme will give the buttons a red color so if we change it to cerulean then we're going to have the cerulean color theme which is a bit blue okay so please refer to the first video of the web apps in our in order to see the selection of web templates that you can choose from okay so just run the app again and I'm going to put the app just about right right here so the header panel is play golf and so this is right here play golf so if you want to change the name feel free to do so and then the next one is the sidebar panel so the sidebar panel except the input parameters it's located to the left and there will be a total of four input and so the first one is select input which is a drop-down menu and if you click on it you get three selection sunny overcast rainy and when you hover on the drop-down menu on sunny it will secretly under the hood select the sunny object and if you select on the overcast also it will under the hood be equivalent to the overcast object and if you select on the rainy it will be equivalent to the rainy object and the default is to select rainy right here we'll select rainy ask the default what if you change it to sunny and let's change the value to be a high value let's say like 85 and humidity to be 95 and it's windy that's true reload the app again right so high temperature high humidity windy sunny don't play golf okay so here you can change the default value to your liking okay so we have mentioned about the three data objects for here sunny overcast and rainy so keep that in mind we're gonna make use of that in the server function and note that when we will refer to it later on in the server function it will be referred to as input dollar sign outlook input dollar sign temperature input dollar sign humidity and input dollar sign windy here why don't we just scroll down and have look here input dollar sign outlook input dollar sign temperature input dollar sign humidity input dollar sign windy okay and then the smooth back notice the spelling here using the small letter not the capital one so the capital one here are the label so it's exactly what we're gonna see in the web application outlook with the : it's right here on the label okay actually you don't have to type in label if you don't want to we could just you know delete it and it will give the same results it's just implied okay but if you want to add the label argument you could feel free to do so right but if you do it for London well might as well do it for all so that would actually make the coat looks a bit more easier to read right let me see here that okay this is the object name Outlook and the label is Outlook with a capital o reload the app here you go right it works as usual so here this outlook here it's an outlook object and this temperature here is the temperature object and this action button here is the submit button so this submit button is added in order to overcome the reactive function so we're just at the familiar submit button so that users can initiate the prediction process when they feel ready to do so instead of having the web app being reactive and making the prediction spontaneously upon sliding up and down of the input values because when it's reactive if you move it by one notch and you let go of the mouse it'll make a prediction but for this one with the submit button no prediction will be made until you actually click on the submit button so actually this might be a good thing on the server side because the server will work a bit less if the prediction being made is made only once versus if it is in the reactive mode if you slide the input value and you just change your mind later on then prediction will be made at each point of the changing of the input value of the slider here or even the drop-down menu right but we do it once with the use of the submit button okay and that's it for this left sidebar panel and then the main panel here will display the result from the output generated by the server function so we're going to talk about that in just a moment so why don't we note that the output being generated by the server component will be called contents and table data okay okay so let's stop on to the server function which is the second component so in this data set input variable it will comprise of the first component is it will create a data frame which will accept four input values from the web ocation compressing of the outlook temperature humidity windy which is right here outlook temperature humidity windy and then it will combine it with the play variable which is the fifth column of the original data set and then it will transpose the data set it will rotate it it will transpose it and then write a input dot CSV file it will read the input dot CSV file back in into the test variable and then it will apply the factor function in order to tell that the outlook has three levels and finally a prediction will be made using the model generated earlier by means of the random forest and apply the prediction model to predict the input values from the user and once the prediction is made it will be sent from here into the output dollar sign table data as the function data set input right here and then it's going to render the table as we will see in the web application so the table that is being rendered will be right here which comprises of three columns the prediction the no and the yes probability okay and this status output text box it's just essentially this box right here so if we load the app for the first time it will just say server is ready for calculation and if we click on the submit button the texts will change to calculation complete and it will be followed by the prediction results table okay so note that there are two output being generated right here output dollar sign contents output dollar sign table data so these two output will be sent to the UI component right here table data and contents table data will be displayed at the table using the table output function and the status of the prediction whether it is ready for prediction or prediction has been made would be displayed by the verbatim text output function okay and this is just a label of the status output text box shown right here that we're going to have the h3 font size I mean if you want 62h to make it a bit bigger then you will notice that the we'll become bigger Hey I'm just gonna make it back to h3 okay so that's all right and then the the last component shiny app function which is fuse the UI and the server together okay and you have all of this in 121 lines of code and so nothing fancy here just a simple web application that you can create using the shiny language thank you for watching please like subscribe and share and I'll see you in the next one but in the meantime please check out these videos