"Introduction to R dashboard development with Shiny Dashboard" with Anastasia Lucas

all righty 6 10. so we're ready to get started i see we saw we have a few but a few people who have joined probably more will trickle in over time but i think we're ready to get going i see we have a very international crowd but also a good representation from philly so that's that's really awesome uh and we're very excited to to bring this this workshop to you um a couple of logistical things before we get into it um so the agenda is shown here on the screen we will um start with a couple of intros and announcements from our ladies philly and then we will hand it over to anastasia for the workshop we will take a break at some point around seven so in like an hour for those on other time schedules and then we'll continue with the second part of the workshop and we'll wrap it up around 8 o'clock just so just so everyone knows again if you do want to follow along please make sure you clone the repo that's in this link from github from anastasia's github account to yours and clone it locally so that you can follow along make sure you install the required packages so these anastasia set up a really nice script in utils so you can just run that and it'll install everything that you need if you run into any issues make sure you raise your hand on zoom we will keep everybody muted but the chat will be available to everybody and raise your hand and one of the organizers are going to reach out to you and help you try and help you out also feel free to ask questions in the chat so others can chime in too we also have a q a document so in for these zoom workshops the way we've done it before and that's worked very well is to set up these google documents that everyone can open up and everyone can edit in real time so if you can type in your questions there that would be super helpful because we will pause at several times during the workshop and we will just ask anastasia these questions uh in in batches so it's it's easier if you just type in your questions there but otherwise you can also type your questions in the chat and we will the organizing team will keep an eye on the chat and uh and make sure that your questions are addressed all right so get into it then so for anyone who doesn't know our ladies philly is a part of our ladies global which is a worldwide organization that promotes gender diversity in the art community but the data science community more broadly as well and we do this through meetups through projects and through mentorship and we really want to keep this a friendly and safe environment for everybody we do ask everyone who joins our meetups and participates in our projects to abide by the code of conduct which you can access here the tldr for that is just be nice to everybody and be kind so that's that's really what we try to push here okay so a couple of announcements before we get into the workshop so we want to get as many people into r and help them be comfortable with r as possible so the more the merrier if you can tell your friends if you have friends who are trying to learn are who are using are but aren't really sure who else is using it or just want to find a community that can be supportive and and where they can exchange ideas on our please send them over to our ladies we're always happy to have new people and learn about the cool projects that people are doing with our we also have a mentor and speaker directory we're trying to grow this so if you are interested in having a mentor guide you through um different things professionally please access this we don't have a lot of people in there but if you are someone who wants to be a mentor to someone who's less experienced please sign up um we're we're trying to grow this so that people have others that they can reach out to and and learn from professionally we also have a youtube channel so this is where we post all of our recorded meetups uh we also have just recently published a short little video to recap 2020 how and how that's been for us and what we're planning to do this year um it's very short it's less than two minutes long and we've put a lot of time in making it fun and animated so if you want to check it out go ahead and click on this youtube channel link we also have a slack space so feel free to join our slack space this link should should let you sign up we have a really wonderful community there and you can ask any questions from help with r to new events that are happening in philly if you want to share jobs that you've come across or if your team is recruiting uh that's that's a really good space to post things a couple of uh announcements for upcoming events so we have uh an event coming up we try to do events every month so if those who have been with us for a while you know we're trying to do one one event per month our february event is going to be um an expert panel on effective r instructions so that's going to be a really neat event so if you have time please join i think the the details are already published on meetup so make sure to rsvp for that one and then for march and april we are planning a hackathon um we're still everything is still in the works so i can't i don't really have more details that i can share but we are really trying to get something together for all of us to come together and work on analyzing some real data get get our hands dirty with the data so that'll be fun stay tuned for announcements about that otherwise a couple of additional things so you can help us spread the word if you like what we're doing if you like our meetups um please live tweet our events and tell the world what we're doing we're trying to get more people interested in our and participating in these events um so these are the the tags that you can use and then finally we are recording this meetup if everything goes well and we don't have any system issues or anything like that uh the video should be up on youtube within about a week or so we'll do a little bit of trimming and cleaning it up after the meetup but we will post it as soon as it's available all right so with that said i am going to introduce our speaker so anastasia lucas has very kindly offered to do this workshop on a really interesting topic shiny dashboard is something that's super useful if you want to present really interactive plots and show some of the power that that r has in terms of analytics so this is going to be really helpful anastasia has a bachelor of science in in biostatistics and she's a data analyst working in biomedical informatics and computational genomics research at the university of pennsylvania her work focuses on statistical analysis package development and data visualization and this workshop in this workshop from what i understand she's going to do a really hands-on approach and introduce shiny dashboards so it should hopefully help even those that don't really have any experience with it as well as the ones that that are more experienced but would like to get a refresher or learn a couple of additional tricks so with that being said anastasia i will stop sharing the screen and hand it over to you okay hi so i'm anastasia like carla said thank you to carla for the introduction and the rest of the organizers and also thank you to everyone for attending especially the people here who are here at not so great local times i'm really impressed by people who are learning are at 4 30 a.m i wish i could be you and i'm also i was also thrilled to see a lot of great guesses on what the poll is going to be for and we'll we'll get into that a little later so yeah just to before we get into the exercises which are going to be more hands-on i just wanted to do a quick introduction to shiny dashboards and really a quick primer on shiny because this is really the building block of shiny dashboards for people who may not be familiar with it so yeah what is shiny dashboard it is an interactive web app and it's built on html and we can see there's a pretty basic app we have here that's showing it histogram this is basically just an example on the shiny website and we look at the components we have a slider that the users can interact with to change the number of bins on the histogram then we have this histogram which changes its its aesthetics based on the slider value and then over here we can see that it's it's running on a server in this case we can see that the user is running it locally with this hd http http12701 that just means they're running on a local computer and we'll come back to this in a little bit so don't worry about that too much right now but um yeah so shiny apps what what is the point of them they allow for interactivity and reactivity so interactivity just a reminder is an element that reacts to a user action so an example would be hover text on click action highlight on hover you can zoom in or zoom out of the plot some our packages to do this would be plotly giraffe and shiny has also some innate options to do this and then reactivity which means data is updated from a server without refreshing the site so the user makes a change like the changing bin width and the plot reacts to that so other examples could be filtering which is what we're going to be doing a lot of today for changing parameters in a model if you're running regression you can change different covariates out and then some art packages to do this are shiny shiny dashboard and also flex dashboard which i know there was a workshop on flex dashboard a few months ago i haven't personally used it as much but one of the advantages there was that it had a lower barrier to entry for non-shiny users so i just want to mention it because at the end of the workshop if you really like the idea of making dashboards in r but you're feeling overwhelmed by shiny or you just don't want to use it for some reason it's like dashboard might be another option you can look into okay so we saw the basic shiny app and now we're going to look at the back end of that so how we make this using code the shiny app has three main components and all these screenshots are going to be the code that was used to generate the example that i showed so the first thing is a user interface object so we have a ui here and then we're defining a page with a title and a sidebar and kind of a main panel with our plot down here and then we also have the slider input which we saw so this is the slider input that the user can use to determine the number of bins and here's just really quickly you might see these inputs the input sliders called control widgets so here's another example there's radio buttons numeric input text input select boxes we're going to be using the numeric input and text input later on the exercises but i just wanted to show you kind of the variety of options you can use there okay so then moving on the second component of the shiny app is a server and this the server basically builds an output object which is similar to a list and it contains code to update the app based on the user input which we also defined in the ui so each output has its own entry in the list we can see here output dollar disc plot and will correspond to each of the widget values and the input which is also a list like object so we can see that it's using the input dollar bins right so this is the user input number of bins and we are then using that variable so the input the user input is stored in this variable here and then it's being used when we determine the number of breaks in the histogram okay the third is much easier than the other two the other two were i know it's kind of a lot of information if you've never seen shiny but hopefully it makes a little more sense as we dig into the code the third component is just this color to the shiny app so we're saying we're running shiny app we have our server and our ui and now we're running it okay so that was an extremely extremely brief and kind of top level explanation of shiny so what is a shiny dashboard then so more generally a dashboard is a graphical interface for users to quickly visualize important metrics they're becoming really popular in industry now with software like tableau and power bi and then so a shiny dashboard then is mainly a collection of shiny apps that are displayed in this dashboard format so just basically some reasons to use shiny dashboard if you know shiny it does provide a pretty nice framework for making professional looking product and for those who don't know shiny it's usually pretty easy to get a professional looking product even if you don't know shiny without wrangling with a ton of layouts and different things like that so for people who don't know shiny and are thinking i don't know if i should continue the workshop just know that i really was never even a shiny user i basically went straight from making you know base r and graphics in there and then to shiny dashboarding so i kind of skipped the shiny step overall so you can do it too um again you can do a lot here without needing to know html and css for style changes in your in your dashboard i do have a note that if you already know flex dashboard which i mentioned before it may not provide a ton of extra advantages to you however i did see there is a new package called training dashboard plus that does provide even additional features to shiny dashboard and it's built off of shiny dashboard so this could be you know a good background if you want to look into that package as well so just in general i wanted to add this slide because i think coming from a statistics background where i'm doing a lot of analysis making it developing a dashboard is a bit of a different experience because you're making a ui or a user interface and you're really making a product for a user whereas as a statistician i wasn't really doing that before so before i even start making the dashboard i typically ask myself a few questions and one of them is who will my users be have a general sense for their level of expertise in interpreting data drawing conclusions from figures and tables on their level of technical expertise in general uh the the number of users that will be using this and then two of course what insights do we want our users to be able to gain from these apps are we doing summary level information do we want them to be able to make predictions about the company or something else and then three is this the best way to present the data given who our users are and what insights we want them to gain then of course there's one more that always catches me personally how our user is going to access the dashboard so r does provide a couple of hosting options i have them listed here i'm not going to go too deep into any of them because i'm not the person who does the hosting in my organization so i'm not the expert on this i'll be honest but yeah so we saw earlier i mentioned that the shiny app we looked at as an example was running on a local host so basically what this means is and we're going to be doing this today as well that when when i'm running the app on my computer only i'm accessing it so the way that someone else would be able to access it at this point is if they download all the code that i wrote they download all the data that i have and i send it to them they open our studio and run the app then they can access it that way of course you know that's not an ideal way to share so we want mainly one instance of the app running that multiple people can use so this is where you come into the the hosting options and and use the shiny servers uh which is you can use chinese server which is an open source then where you could use shiny apps dot io this one has a few different pricing levels with different features of course the free tier doesn't offer as much as some of the paid tiers and then uh there's also our studio connect which is a commercial software um you know one of the main advantages of our usually is that it's free so you know depending on your organization's needs the free may may or may not work for you i would definitely recommend having looking into the hosting and and what your options are before you start you know put a lot of work into your dashboard um what we did basically we needed some authentication for ours so we set up a free shiny server and app on an aws server and then we set up a separate website which we already had that had all the authentication to be a proxy for that server so that was just a brief um summary of what we did for ours okay that was a lot of information i hope that um it wasn't too much and i hope that when we get into the exercises some of it will start making a little more sense to you so just in case you missed it you can download the github repo here as a zip file and then just open it on your computer and i'm going to take probably just one minute as i transition to the r project anastasia we had a couple of questions before we dive in and i'm sure you'll address these in your workshop but uh quick question can we change the look and feel depending upon our own theme yeah that's we're not going to do that today but we do have some themes towards the end and the advanced exercises and there is the package that we're using actually does have a diy theme maker so it kind of helps you make your theme but you can also do it if you um know css likes cascading style sheets i think that gives you even more control than what i'm going to show today that's awesome and then for the objects that you showed earlier so you showed text inputs and sliders are those the only objects which can be used or are there more objects that you can use in a dashboard uh that i would have to look more into i personally perhaps someone who has used has has done it can post in the chat i've personally never used other controls besides those those are the most uh familiar and what people usually want to see so but like i said maybe can mention yeah you can use uh i've also seen radio buttons and drop downs and things like that but you're right text input and sliders are fairly often used and then one more question about data sensitive dashboards can we um would you would we deploy these on a company's internal website or is there something [Music] any sensitive data yeah so that's kind of what i was was getting at with the free tier um for us we used sensitive data we needed authentication that was how we kind of um yeah that our sense of data was like we need authentication for people to view it so what we did worked for that where we set up a proxy um we set up the server on our own and then we set up our website that needed that authentication as a proxy i think in terms of sensitive data you might need to kind of see if there's any data use agreements that you're not breaking there um i know that you definitely can there are pa um paid options that you can use but yeah they get a little pricey sometimes depending on what your organization wants to pay yeah i think you're right i think the free tiers don't really offer any any real security so you do need to the company needs to pay if if you want to add a security layer yeah and then i think someone asked if you can dockerize a shiny app and uh i can i can say you can i um i i believe shiny apps io actually works that way by dockerizing everything and deploying things as as its own container but um these are i think the main questions for now and uh i'll i'll let you get back to the to the workshop okay cool thank you and thank you for answering the docker question because i have not worked much with docker so um okay so yeah if you were able to oops it's not that okay if you were able to open up the r project from the folder what we're going to do is you can either use this browser over here and click on the exercises and we just want the first shiny dashboard exercises dot markdown file hopefully you have installed everything if you haven't please do it now and i'm just gonna go while people are still installing potentially go kind of into markdown and just a brief over what that is so yeah this is a markdown file what we're gonna do is basically go through the file sequentially running these code chunks so the code chunks are going to be surrounded by these back ticks here and basically what you can do for each of the code chunks is go over here to this arrow on the right hand side the green arrow and you can click click run code chunk so that will just run this certain set of codes here and we're basically going to do that throughout the whole file later on once we get to the exercises i have some fill in the blanks and we will need to fill those in successfully before the code will be able to run and then if if you prefer to just follow along using the solutions i have created corresponding solutions files in the solutions folder so you can always just open that up and run a lot and run the code along with what we're doing and that shouldn't need any edits so the first thing that we want to do is kind of set up our environment and that's basically going to be loading these libraries that we installed earlier so if you can go ahead and just click run on that and they should be you can see down here they were loaded okay and then before we do anything we're gonna take a minute to understand our data and this is where the polls coming in so let's go to the poll right now and of course we've have some some pie charts here my data visualization nemesis the dreaded pie chart it seems that um okay so this is great a lot of intermediate users and a lot of beginner users that's great to see and some advanced users as well and the artist that we all chose was queen with 40 of the vote so this uh reveal is that we'll be using queen's lyrics for today's dashboard so i'll change that to queen of course you can change it to queen okay so of course you can pick your own artist the list is here in this data folder it's the options on the whole i will mention really briefly that i scraped these lyrics from genius and you can see i also included a compiled data script so if you're interested in that i didn't clean them much for content so that means one i didn't remove any stop words for the text analysis people and two i also didn't remove any explicit language so um i think drake in particular if we are running this exercise there will be some explicit language that pops up and i just wanted to note that in case i know people are home with kids and you know just just in case so anyway we're going to be using queen for this so let's take a look at our data first and run this and of course this happened here so i think if you get an error you can just do this dot dot slash and then save the file and run it and then we still see an error really um i ran through this about three times okay and run it again without the dots and it works this time perfect okay so just i apparently keep running with or without the dots until it starts working anyway i think that's what we all do yes thank you for the reassurance um anyway so let's take yeah so let's look at the head of the data which is just the first few lines to see what we have here and then the structure which is just showing us the column uh classes uh character and integer here so basically what we're looking at is a data frame with four columns and in a sentence that's spelled incorrectly each row represents the n number of times that a word appears in each song or track title per album in our data set so yeah this is basically just these will be the lyrics of each song and i've broken them up from a line into a word and the important thing to remember here is that the lyrics are summed across the songs and not across all the albums so this will come into play when we we ask our question about what apps we're making okay so forget about the data for one second and now we're to try to run the most basic dashboard we can basically which is going to be a blank dashboard and so again similar to what we saw in the the shiny app on the the slide deck we have a ui here and this time instead of a fluid page where we have this dashboard structure which is dashboard page header sidebar and body notice they have nothing in them we've just set them up to be blank we also have our server down here we have input and output we're not doing anything with them we didn't we didn't put them in the ui so this is basically going to be a dashboard that does essentially nothing but let's run it and see what it looks like okay so hopefully you can all see this and hopefully this has popped up for everyone again we can see we're running on localhost we have this hamburger menu that collapses the sidebar here we have our dashboard body with nothing in it and we have a blank header okay i just want to take one second to make sure everyone got the data and everyone is able to run this app and if so we should be good for the rest of the exercises right i'm not hearing anything so i'm gonna take that as a okay to continue so i do want to note here that if we are writing a standalone app we would need to load the libraries and any data we need within the app so this is our app code here this our basic app would be we would need to load any data and libraries in this so since we already loaded them in the setup part i didn't copy the code chunk into each code um just because we don't need to keep loading it let's just give people a minute or so i think some people are still struggling to load the data so let's just give them a minute or so so they can follow along thank you you i think for anyone who's struggling to load the data just make sure that this the path that's highlighted leads to the directory where the data is in so you may need to add a slash before it otherwise it'll just point to your to the director it's the home directory that you're in which currently on the screen that's shown here is download slash our ladies shiny dashboards main so just make sure that there's a folder in there called data otherwise you may need to change the directory yeah and i've added in the console down here so if you get the working directory as long as you're in this shiny dashboard's main which is what it would be called if you downloaded it um and then you just paste the line of code in here it should work right i believe yeah it looks like we um it looks like it works now for several people but do speak up if it doesn't i think we can we can continue okay okay so yeah i i think where i was was i was just mentioning that if we were writing a standalone map again we would need to load all of the the data and the libraries within the app and not you know just have it set in a code chunk up here so we need to include that with the app and then for your reference i have also included a standalone version of both this basic app and the exercises folder and then also the more advanced app the final product that that we're creating i've included an app advanced in the solutions folder so just so you can see what a standalone app would look like that's not in a markdown file it's it's mainly the same just again it's mostly the libraries and data loading okay so let's move on to the first exercise the first thing we're going to do is give our app a title and set up a grid layout for our plots to do this we will use the fluid page to create a fluid page layout and this just means one that's going to resize to the width of our screen and a fluid page layout is going to consist of these fluid rows created with the appley name fluid row and then we're going to put some columns within those rows using the column function and then finally we can create a box for our app to eventually go in within the column again right now we're pretty we're pretty much making a blank box for the app so we're not putting any graphs or tables in yet but we're just getting the call the grid structure down so for now let's just create a dashboard with one row and one column with space for one plot and this layout is going to be specified in the user interface section of the app so let's try filling in the blanks um so okay so we have within our body again we have the fluid page that contains the fluid row that contains this column so the column width should be between 1 and 12 this is like a shiny dashboard specification so let's just make it 12 because we only have one row and one column then we're going to specify a box here so notice that we have a placeholder for plot output this is going to be important later so we're going to say plot output and we're gonna call this this this id is gonna be plot one so this id is gonna be for us and we're gonna need it later on when we start coding in our server section and then we can just add a title this title is going to be visible to the user so it should be informative right now we still don't know exactly what we're doing for the lyrics so we'll just put a placeholder title okay and then so down here it's a little little tricky this width is actually has a default value and we want to override that and just um because we have a column based layout so we're just going to use what the column with this so we're just going to set this to null for now okay so what we want to do is we just can save with control command save and we're going to try to run this notice again we don't have anything in our server section we're pretty much just making the ui at this point and we can run it and here we can see the fluid page is reacting to how i'm dragging the window and again we have just this box here that will eventually hold our plot and a placeholder title and our song lyrics title up here okay so hopefully um hopefully you have gotten this to work as well if you were able to get the basic app and now we're going to start populating this with our charts so the first thing we want to do is let's say we make a bar chart that displays the top 10 most frequent words summed across all the albums for our artist um the plot is going to be rendered well it's going to be specified in the server section of our app using the following code so this is the little code chunk here basically what this is saying is we have our output and we have the component plot 1 which if you remember is what we called our our plot output in the server and then we're using this render plot function which is a reactive function and this is where uh we would put our plot code so if you use ggplot this is where the gdplot code will go so we have already added the plot output function in the ui section which we saw before and we called it plot one and now we're going to refer to this and using the same id as we did in the in our plot output okay so i have a little note here that yeah there's a lot of other types of output you can have table data table plotly text output we're going to look at some of these later and then i have a little hint here which is the code to create a regular gg plot with the top 10 frequent words some across all albums now we're not going to be going too far into the gg plot code because this isn't a gg plot workshop but basically what we have here is our data frame that we read in we have some summarization steps here so we're grouping by word and summing all occurrences of word across the albums across the whole discography or selected discography for artists that had too many albums for me to date a clean and then we wanted the top 10 so this is where we're using this top 10 function and we're just going to say we want 10 here and then down here is where we start plotting with ggplot and i say you can uncomment to make some aesthetic changes to this basic plot and i am now saying you definitely need to uncomment the last one or alternatively remove this plus sign i got a little overzealous with the comments and i'm just gonna uncomment all of them for now and you can run this code to see hopefully this pops up in your plots pane so this is basically what we're going to be putting into our dashboard right now notice it's still static at this time so okay what we need to do we need to fill in the blanks here so what what is different here so this is basically the same as we had last time right the first part in the ui we had the box with the plot output labeled plot one we've changed our title to most common words across albums and now in our server function here's what's different we need to create the output dollar plot one and then we need to stick our gg plot inside of this render plot function so let's just go up and copy and paste the code we have df already so let's just get from the second line down and we'll paste it in this blank okay and save see and then we can run this and now hopefully what you see is that bar chart inside your plot pane okay i mean just oops i don't know if i should take a look at the chat are we are we good in the chat all good for now okay great okay so now the part that is really the meat and potatoes of this workshop is making it reactive and i think we're probably let's see okay let's yeah let's talk about reactivity now this probably will be the last exercise we do and then we'll take a short break but yeah so this is the meat and potatoes we want to make this plot reactive right so we can use one of the control widgets that we saw earlier and our ui and this will allow the user to select the number of words to display so they don't have to view the top 10 they can view any number they want within limits which we'll show below so what we're going to do is fill in the blanks to create a numeric input and this is going to go in our box and i have i have outlined the parameters that it uses so similarly to how plot the plot output sorry just one second okay so similarly to how we gave the plot output an id called plot 1 we need to give the input a a unique id and we'll just call this select top n for right now then we also need to set a label in this input and this is what's going to be displayed on the widget that the user can see so we want this to be informative to the user so we'll put select number of words to display here and then we can also set min max and default values that we want the user to be able to select and we'll go with 320 and 10 here you can choose other options and see what works for you since it makes sense to only select whole numbers here we don't want a user to select to display 5.5 words we also want to set this step value equals 1. okay so once we have this numeric input set up in our ui we're gonna need to extract the variable that the input store in and we're gonna need to refer to it in our server function when we render the plot right so i have here the hint is that we can extract the user value using the input id which is input dollar select top end okay for me i feel this is personally you feel it's it's confusing until you start doing it so let's just go into it here and we'll show where the things go so again we have our box with our plot that we already have and then we're also going to have our numeric input now so let's just [Applause] input our input id which we said would be select top end okay and our label that's a lot of text so i'm just going to copy and paste it and our value our default value to display 10 words by default we want the lowest they can select is 3 and the highest they can select is 20 and then the step will be 1 so that they can only select whole numbers let's see okay hopefully that worked i don't think i accidentally deleted a parenthesis all right so now we have in our ui we have our plot output our numeric input and let's see what's going on in the server again we have our render plot so there's two places we would need to use the user to find value here right the first is obviously the the number of bars to display and where that was before was this top end here right we were selecting the top n bars so we want the variable to be now input dollar select top end instead of the number 10. so then the other place that we want to make a change is down here in this title section before we set the top 10 frequently used words let's delete it and use the same variable here so now hopefully when we run the app we'll be able to select a different number and then this will react to that and it will display the number that the user selects okay let's try to run this app okay so hopefully this worked for you and you see the same thing that that i'm i'm showing right now which is a bar chart and then below it we have this input user input which is stuck number four's display and we can click through and our chart will change based on what we've selected we can see that we can't click any higher than 20 and we can't click any lower than 3 based on the min and max we set before okay so let's take a second to just make sure that everyone was able to get a reactive plot on the dashboard and a couple of questions too yeah so does the listening on http warning in red matter uh usually text in red is a warning um no that's that's not that's that's okay that just means it's it's running on a local host so yeah that's not an error or anything okay and then would the plot render faster if i transform the data frame outside of the server uh junk uh spoiler alert yes it will we're going to talk about that at the very end but yes you're absolutely correct and this is something that um yeah later on we and just in case we don't get to it but yeah later on we're going to talk a little bit about profiling quickly which just means you know making sure that we've optimized our app to run as fast as possible and you're correct that reducing the number of times that we're well right now we're just doing it once but yeah reducing the number of times that we need to summarize this is one way we can make it run faster that's awesome i see people are actively working some people are getting some errors someone said they can type in one and get one bar okay that's yeah that is another another spoiler alert wow you guys are too advanced for those exercises you know we're just trying to break everything yeah that is something we're also gonna look at um we're gonna later on we're gonna show how to completely prevent a user from being able to do that and instead display an error message um by validating our input yeah so you can override that that minute max that we set okay and then someone's asking if the records can be shown in ascending or descending order um yes i think that well i'm not sure if there's a certain any trick that i'm not aware of i think you kind of have to do that within ggplot maybe someone can correct me if i'm wrong but that's you you would have to kind of add that code in there yeah that would be in ggplot you could probably include an option if you want your user to select changing it to ascending and descending you you would need to include an input for that and then build that into the code yeah okay i think that's all the questions that i can see oh can you use shiny with data bricks um i am not too familiar with databricks i'm sorry yeah i'm not sure maybe someone in the chat can can answer that question yeah i don't know i don't know that either so if if we have experts in the chat please feel free to chime in okay i think that's all the questions that i'm seeing in the chat okay let's i think now is a good time for a five minute break zone okay so i think our five minute break is up i don't know if we need to wait any longer for people to trickle in nope i think i think five minutes was good and i think we can keep going we have a lot to cover so i think this will be good yeah um one thing i did see a question about the well not a question but an observation that it was the axis was reverse alphabetical order i think that's actually because we used a coordinate flip in the code okay so now moving on so we finally have our reactive dashboard now let's try to show the same information that we showed before in the plot but we're going to add a table as well and to do this we can use shiny shiny's data table output function for this and we're going to put the table in its own column so that the dashboard has now two columns that each contain one box within our row okay so if we're making a production ready dashboard i just need to note that we probably or might not want to have multiple graphs and tables that show the exact same information but here we're just using it as a proof of concept so i'm trying to fill in the blanks below to add well i've already done the widths actually but we can add the data frame that should be displayed as a table so the hint here is that we've divided the width of our boxes by two so we want to give both the apps equal billing so you can see down here we have our old ui function with the plot output now we've made this column with equals six and we've also added a second column now within this same fluid row and with equals six as well we've included a box here and now instead of plot output we want to use data table output and again we need to give this a unique identifier here so we'll call it table1 and then again we'll need to refer to this down in the uh server so we have again we have our output dollar plot one from before and now we have our output dollar table one and instead of rendering plot now we are rendering a data table and we can this data table is basically going to be our summarized table that we use to plot um so again we have you know grouped here uh we have our top n so our n is going to be the variable we want and we're actually going to use the same n for for the the bar plot so we can copy and paste the same exact input value here and then we'll just save it and run okay so hopefully now you have a dashboard with two apps a bar and a table um anastasia we can't see the output we can't see the app i don't know let's try again thank you for letting me know sure um there we go okay great um okay so now hopefully we have this this output one with a bar chart and one with a table you can see here i use data table this is a pretty pretty basic default data table that has some nice functionality here you can sort by words sort by occurrences search um if we had if we were displaying more entries we could you know flip through the pages and again we see we move our our user input and it's updating both the plot and the table so okay so this is this is great we have uh this one input value that updates both apps and then i have an additional i have a note down here similarly we could add additional fluid rows with different number of columns to create more complicated layouts um we could kind of set the width and heights for each of the boxes differently we could add additional widgets control widgets besides just the one that we use to make them update different things for this one we just needed one that updates the whole dashboard so that worked but it actually created a problem for our users that some of you may have picked up on so what happened was it wasn't obvious that the input widget controlled both the chart and the table so one thing that it might be more apparent if we move the input control widget to somewhere else on the dashboard so that's not attached to the plot so in this example we're just going to move it to the sidebar so this is a pretty pretty simple code change we're only changing the ui here i've already removed it from this column with our plot and we'll just go back up and copy that numeric input and we'll just copy and paste it now in the sidebar instead okay so we're really just changing the layout at this point the user interface we don't need to change anything in the server it's the the number is still being held in the same variable so that all looks good and we'll try to run this one hopefully you guys see it this time okay and now yeah it's a little more obvious we have the select number of words to display over here it's a little more obvious that it controls the entire dashboard right okay um let's move on a bit so is everyone able to make both of the the data table and the bar plot seems like it yeah it looks like some people may have some issues with different versions of the package um if you can scroll up to road 281 someone just wanted to double check i think um the input this one i guess and some oh yep someone else the the row numbers are different for different people um okay and some other people are struggling to get a sidebar okay um yeah make sure that make sure that you have you didn't accidentally delete this part here so we want the numeric input inside this side dashboard sidebar so we should have the header first then a call to dashboard sidebar and then we want the numeric input in there and then the dashboard body yeah make sure you close all the parentheses although you should get an error if you didn't yeah i think sometimes i i was trying this and i think at one point i i didn't close the parenthesis and it actually didn't give an error like it would if i was making a standalone app it might be a kind of like a weird markdown thing with putting a dashboard inside of markdown okay okay okay let's go on to this second part okay so i'm going to note here that we can yeah also add separate boxes for the control widgets and we can put them inside the body so they can have their own boxes um you can basically just play around a lot with the different layouts so i think for the sake of time we can skip this exercise it kind of goes along with this was mostly just to change the type of of input you can do it on your own later on if you if you want to so basically i was i was saying that we could change the text input right now yeah it's a little it's a little arduous to kind of click the whole way up to 20 from 10 our default value and yeah i was basically showing like text input might be a better option for this but then we also have to make sure that we're taking the text value and converting it to an integer um different things like that if someone tries to type the number you know a text number 10 t n um we're going to get this kind of really ugly red r error that's you know really obscure and we all know you know looking at our errors are not always the most informative and when these errors are kind of going to the user they're going to have even less of an idea than we do so um that was kind of just an example of what a kind of error could look like there and then the next thing we're going to do is talk about the validation which someone asked about and i mentioned so let's instead of running this one let's just go to the exercises folder again uh click on the advanced exercises and in this one we i am adding two additional packages which were on the install list as well so dashboard themes and plotly so if you want to just rerun the setup we can you probably don't need to rerun these other packages but we'll just do it anyway the data should already be read in so we don't need to to worry about this and then yeah so let's let's go to adding error messages using validate as as someone as someone brought up before we set our numeric input so the user could select between 3 and 20 words but as we saw if the user typed in the input box it can override our defaults so let's say we want to restrict our app so the user will get an error message if they display fewer than 2 or more than 50. so we want them to not be able to get that at all so let's uh we can do this using the validate function which tests the condition and returns an error if the test fails and then need which consists of an expression that evaluates to true or false and then the error message you want to send to the user so i have created a little hint here with the code to create a validation function and so we're naming this function v and it's a reactive function that's it's reacting based on our user input we're saying if the input is greater than or equal to two and um i'm sorry we're making sure that the input is greater than equal to 2 and that the input is less than or equal to 50 otherwise we're going to tell the user please select a number between 2 and 50. and then after we set this function up we're going to need to place this validation function within each of the render functions that we want it to affect right so this is actually all in the server part the ui is looking basically the same we don't need to change any layouts for this in the server we just want to create our validation function be careful with this bracket parentheses that you're not copying paste so just copy and paste uh down to the validate parentheses here and don't grab the last one okay so fill in the blank here and don't make two v's either that's not necessary so yeah just make sure that your parentheses line up here and you have your validate in here okay and then what do we say we need to do we need to validate each of our charts so we're going to call our validation function which is v in our plot and we're also going to call it here in our data table and let's try to save and run okay great so it looks the same in the default it's functioning the same we see there's a limit at 20 but we're being a really devious user we're trying to break the dashboard oh well yeah we were we prevented that from happening so we have this error popping up here um if we didn't yeah so if we instead of this validation function if we just said you know here if if we put a condition here that said if input dash or top select top n is you know greater than 50 print you know do something don't output the plot we would probably get some kind of like red error that makes no sense to a user so this is this validation function is really handy for that okay are there too many pressing issues or hopefully i see a few messages in chat so far so good okay it looks like okay great so this kind of bonus here which was see if you can restrict the plot to display between two and fifty words but the table to display between one and two fifty so uh what's what's different here is before we had well let me just scroll up to what we had before so before we we defined this function this validation function then we had our our two outputs that was what was in our server so instead of defining that function and then calling it within the plots we can actually just validate directly before we plot so how that would look is let's just copy and paste this oops i guess we only need the really need the need row so let's copy and paste the need and place it inside of our validation for the bar chart we still want that to be between actually it shouldn't be 50. i think 50 is a bit much for that chart so let's say 30. um 30 and then we can paste again down here in our table the table looks pretty good even if we have a large number so let's just say 250. we want to change our error message so that our user knows and we'll save and run again and yeah so it looks again the same if we clicked we would get a limit at 20 but we can again try to break the chart and say we want to do 200 and now we get an error on the bar chart and our data table is still able to go okay i think there's um probably maybe people have noticed it doesn't completely match up i think it's because of ties i was looking at that earlier okay okay now on to some of the stuff that i think is a little more fun some of the aesthetic changes so now let's try we have an idea of how to keep adding apps it's basically you know it's similar to what we did before we just add more output and we add additional columns and additional boxes up here and we render them in our server so on and so forth until we have all the apps we want so now for the aesthetic changes we can change the theme of our dashboard a couple different ways i think personally the easiest was using this dashboard themes package so you can add basically a call to dashboard themes trying dashboard themes in our dashboard body and then we can look and see all the themes this package has available to us using our's kind of help documentation syntax which is this question mark so let's run that in our console and hopefully it pops up in your help uh viewer here and we see the available themes down here so i like the one note theme so uh yeah so again this can be helpful if you don't want to change the css manually and i typically don't honestly i'd rather just use the themes if they're there and if they work and you can see also down here they have the diy theme which has a lot more you have a lot more control over over the colors and the style choices so yeah so as i said this theme will go in the body this is where we change the theme and let's just use onenote for now you can use uh you'll have to use quotes around this i believe so this is again only changing the ui we don't need to do anything in the server and we'll run this and we should have a different theme so yeah that's just something to play around with probably to see what you like and so yeah i did provide a little disclaimer that i'm pretty sure this package is still in an active development and has a few limitations but the diy theme is there for you and then another kind of important topic here is how will we make this plot interactive so yeah these dashboards are really great there we showed a lot of reactivity so far now we want to try interactivity so we can use plotly or some of the shiny also has click hover arguments for plot output to create our interactive charts since we're already using ggplot there's a really nice plotly function called ggplotley and we literally just wrap our ggplot code in that function and it automatically converts our ggplot to blotly object so i have this little example you can see what it would look like on its own yeah you can see here this is some you know this is the typical plotly look and then the controls up here so we have zoom in um my my window is a little big for my screen today it's just okay and um so we can zoom in and out um it has where is the zoom out there we go you can hover over the bar it shows the exact you know our x and y value which would be the exact number of occurrences of the word and yeah that's it's basic plotly interactive chart for for a bar chart you know it's the utility is is a little limited for this chart exactly but once you start getting to some more complex charts you can add some really nice things with plotly so anyway enough applaudly let's see how we integrate this into our dashboard so we need the the main thing here aside from wrapping our code is to tell our dashboard that it should be a plotly object instead of a static chart and this just means we need to change plot output to plotly output and render plot to render plotly so let's do that now here let's do our plotly output okay and we will need to change this to render plotly and here these blanks um are just our gigiplotly call so we need just one parentheses here and one parentheses at the end of the code and save this and if we run this code chunk hopefully we see that we have a now plot that is both interactive and reactive we have the best of both worlds we are miley cyrus circa 2006 and yeah we have a pretty pretty nice plot for for our dashboard okay and all the plotly functions work within this as well all right and i think this is probably the last the last thing we're going to talk about and i kind of already briefly discussed it which was trying to make our app a bit more efficient someone um pointed out that if we summarize our data outside of this the reactive function but actually we can do even better than that we can we can summarize it outside of the app entirely so uh at least up until the point that we need to get our user value right so our summary function basically was this part here the df group by summarize and arrange and then we also piped it through top n well top end is the the variable part here right so we we can only go up until one line before that which is the arrangement occurrences so let's run just run this code chunk so we have that in our environment and now in our dashboard we can replace the data frame um summarization step with just this df sum object again if we're making a standalone app we would need to read in a file of df sum and then we still need to grab the top end values dependent on the user selection however to make our code even cleaner since our table and bar chart are both depending on the same user input value we really only need to do this filter step once there's not a lot of utility to putting it inside each render function so we're going to do it outside of the render function inside the server and we still need to create a reactive function for this data frame so basically we're creating a reactive function here in this pin 4 that is selecting the top end occurrences based on our user value from our df summarized our summarized data frame and this is again it's reactive so it's going to react based on this variable here which is the input dollar select top end okay so what we need to do then is we need to go down here and we fill in the blanks this is all happening on the server side as well so there's no ui changes here so we're going to need to copy and paste this function here into our blank so df-filtered will now be this reactive function and we'll save and now instead of df-filtered here we have to remember that filtered is actually a function a reactive function so it needs the parentheses so we're gonna do that in our bar chart and we're also gonna put that in our table and we're gonna remove the leading underscore and save and we run hopefully it works and we see it does again the app looks exactly the same this change is only happening on the back end um i have a little explanation that we could compare the performance of this code to our previous version there's a couple ways you can profile code in r you can use this profiz can use our studio profile i think it actually uses profis unless i'm mistaken um basically here the difference is probably going to be maybe negligible but it would have a big impact if we were filtering millions of rows at a time so um the way basically the way that i profile my app was i would run i would i would have a standalone version of the app i click start profiling i run the app i kind of do my filtering as as if i'm a user and then i close my app i stop profiling and then what pops up basically is this graph of time everything takes it breaks it down into the lines of code how much time your code is taking to run and you can really see where you have a speed bottleneck um this is really important because you know users don't like to kind of a slow dashboard can really turn off your users i know for example when i was making a dashboard and we kind of needed a minimum working example and um we were kind of talking about you know how is this too slow is it not too slow and we said we'll just put it out there and see what people say and i think i think it was within 10 minutes so someone just emailed us back they're like it's not working and it was working it was just a little took like 10 15 seconds to load and that was yeah that was a performance issue so that's definitely something to think about at the beginning um i know it's at the end of this exercise but it's good to start thinking about even at the beginning and then uh pretty quickly i have a list of other things to try there's additional control widgets additional plots um you can have multiple user inputs um it might be and then here's some examples you know you might start by asking questions saying what is the top end words per album and then try to make a dashboard or an app that displays that or you might want to display the songs with the most unique words whatever you think your user is going to be interested in then i've mentioned a few times but similar to shiny you can provide additional customization using cascading style sheets there are some resources for those on shiny r studio websites and then there's there's a couple other appearance things you can change you can include different icons in your app you can change the appearance of your boxes make them collapsible you can also add you know different tabs to your dashboard so instead of we had just one page there so you can the user could click different tabs um so i have a small example of making a collapsible a collapsible um box we'll just maybe run that really quickly so instead of we actually only need these lines right here the rest of it's the same as we've been doing before so we only need the status collapsible and solid header lines we'll just go to the last example we used and we'll say let's make our our plot collapsible our bar chart collapsible rather and we'll just add in a status label how tell it we want a solid header and make it collapsible and just run this again okay see you can see there's a slightly different appearance now and we can collapse and expand this as we please otherwise you know that the app looks the same yeah and then you know lastly we could also add some improvements to the plots and try and get a december data visualization workshop so we can get some ideas from there and basically anything else you could think of that would help the user get the maximum amount of information out of your dashboard because that's you know that's really the whole the whole point of making a dashboard is so your user can gain insights from your data so i don't have any other exercises planned i figured people could hang around and ask questions or kind of play around with some of the other options or some of the suggestions some other things to try so i'm gonna probably stop sharing my screen just for a minute to look at the chat and then if need be i can share again um yeah i think that's that's a great idea let's do that and maybe we can unmute everybody and people can tinker around with the code and ask questions uh directly verbally if they want to but you know obviously the chat will remain open i'm seeing some people who are saying their letters are their occurrences are letters not numbers i just allowed everyone to unmute themselves so maybe someone who had this issue wants to talk a little bit about it i wasn't able to follow it in depth so unmute yourself and if you want and share some of uh your share what the issue is and and it looks like you guys figured it out oh i also see one thing about the unexpected number of bars like some people had extra bars showing up i'm not entirely sure i know there sometimes is a little bit of lag so if you're clicking pretty quickly but i have not had that exact issue come up i have to say so what happened was that we would i would put in like 11 and there would be 11 bars however on the data table rendering there would be 12 rows and i think that i wasn't the person to see that i think kyra found it first and alice got the same issue um but amy pointed out that it's because there are ties in the data table and so yeah so there was like at the bottom it just kind of show everything yeah actually if you just plot that code chunk not even in the dashboard or anything rendering anything if you just go like top top 30 um and tidy well i guess it's deep plier but yeah it'll get it'll output 11 rows so i think there's some kind of weird things with that yeah i guess the the answer i guess the it's not really a bug but top end in gg or in d flyers just kind of um export yeah all the yeah all the observations that are tied so yeah that's all i wanted to add sorry there's a lot of commotion going on here um all right i'm gonna go ahead and mute myself so one of the questions is how much of shiny programming knowledge is needed um same with d plier and ggplot i think i think when you say same as deploying gt plot you mean you don't need to know a lot of of that programming knowledge as well i would say um you don't need to know ggplot to do a shiny dashboard you can use any graphic graphical library to generate your plots you should be able to as far as i know and um yeah if you if you don't have any plots i suppose you don't even need any graphical libraries you could always just have data tables there's different types of text output you can have um you know and then d plier as well dplyr is more of just an something that i a lot of people use that for summarization and tidying data you don't strictly need to know dplyr you can you can do all of your summarization using base r or other packages um yeah that would be my answer for that okay um my background is from sas where in which we produce tables and listings right i mean table systems graphs so i'm trying to get into the r side and basically trying to pick up the shiny shiny stuff so do you think that that way you know like which would be the best way or how much of knowledge is needed for getting onto the speed of the graphs uh you know the latest stuff yeah well i i used sas many many years ago so um i would say i would say if you're looking to do graphs i would definitely recommend ggplot i think that's probably the standard that people are using and i think it does it's a little tricky to get started with like i mentioned trying to have a workshop so you might want to look through that material as well but um you know once you get started with ggplot there is a lot you can do so i would i would personally recommend that and then again similar with d plier a lot of people a lot of people do use deep plier and it does make it i think a bit easier over base r maybe other i'm sure other people have other opinions on that it might just be a personal preference but i do see a lot of people starting with those two packages in terms of tidying data and plotting data so so i mean like you answered a couple of questions that i had all these days so when you're saying that you know like i clean up the whole data like in in the clinical world you have an adam dataset where completely everything is ready and then you bring it on to the plotting side which has the least amount of derivations is that the way that i need to understand that that would be better and speed up the app loading or getting the dashboard ready right the level of control you have with those tools um yeah are the main you will have some conf the more you go into coding right so the more you go into coding the more you can customize in general so shiny dashboard there's even you can even go deeper if perhaps you're you're trying to use d3 or some other type of of language which gives you like ultimate control um so that's kind of my answer to that which is potentially a non-answer but yeah cost is is the number one advantage i would say but again the caveat was cost sorry the caveat was cost then is if your data is sensitive you might end up having to pay for the for the hosting so yeah i would agree that the customization part is really the why one would go with r over some of these some of the other visualization tools if you just need fairly simple visualization and you don't need to write complex functions to do processing behind the scenes before you run that visualization i think the tools that are out there are perfectly fine what r brings is you can really you can you can write any kind of function to process the data before you show it to the user and you can do that reactively if you really want to um in the in the shiny app and then one i had one additional comment in terms of the speed so i think when you have a shiny app you want to process your data set as much as possible uh before you actually uh pull it into the ggplot code or any of the code that is going to be used for visualization so you can load your data and then you can write you can write a couple of functions to handle that data not necessarily reactively but just process it into as clean of smaller data sets that you can have before you use it for plotting that's going to speed things up a little bit and it's not necessarily going to rerun the entire code for cleaning the data every time the user types in a different value because that's going to slow things down significantly so i think if there are no other questions that brings us to the end of our workshop here thank you so much anastasia this has been hugely helpful and it's just wonderful that you walked us through um all the different components and i think this really will help a lot of people set up their own dashboards so thank you so much and thank you to everyone for attending uh thank you again for very lively discussion this is always the highlight um of our meetups so we have really good workshops and then very lively discussions it's always a pleasure so that said thank you very much for attending uh we will be closing the zoom soon uh before you before you go don't forget if you want to join our mentor directory or check out our other videos on youtube or join us on slack please feel free to follow these links they're also on our website and we will make them available on on our blog as well so don't hesitate to reach out if you have any questions and that's it have a great evening everyone or day or rest of your week wherever you are in the world thank you

Channel: R-Ladies Philly

Views: 3,240

Rating: 4.9365077 out of 5

Keywords:

Id: wSYt4IYIsdI

Length: 89min 1sec (5341 seconds)

Published: Thu Jan 28 2021