i2Dash Example R Flexdashboard

welcome back to cradle to grave r my name is mark gengrass and i'm going to teach you how to use interactive maps using rnr studio and a package called i2 dash along with a few other packages we have to install like leaflet and plotly however that being said this is going to be a very simple tutorial for anybody to be able to accomplish within you know whatever amount of time that it takes them but this tutorial will be about approximately 25 minutes at the most so that being said i want to tailor this to those that are kind of just jumping into r so it might be a little slow for some but i still think you can get some value out of it and it might also be a little complicated for some that don't have any r skills whatsoever so i'll try to find that medium balance where i can teach both audiences at the same time so right now i have my r studio open so you should have r installed and r studio installed already and what we're going to do is create a whole new project so file new project i'm not going to save anything new directory new project and i'm going to call this my i2 dash test whatever you want to call it right so that's what i'm going to call it so we're going to start brand spanking new so that we're all on the same page all right so we have our console area here our environments upward behind where i'm at so that's your environment uh global environment section and then down below you have your basically your file plots packages etc etc we're going to be using that so let's go ahead and do a new script so file new file our script and in this script we're going to want to add our dashboard basically so it's going to be as simple as this what we want to do is first go to packages here and install if you don't already have it installed i2 dash i2 dash and you can see it auto populate here or pop up here click on install and when you install that i've already got it installed so it might look slightly different on my end there might be some dependencies that it also has to install like it might see that it needs to install flex dashboard or something like that and i'll show you this in just a moment too but at the very top when you actually run into um code that you don't have the packages installed with rstudio it should have a little thing up there that says hey this code requires this package would you like to install it so you go ahead and install it then all right so we've got that installed no problem so what we want to do is we want to load that library so library i2 dash and do control enter to actually load it and that runs the code and there we go so we have our library i2 dash we can use all that functionality now now let's create a dashboard it's so simple so we'll say hey we're going to create a dashboard called dashboard that's what i'm going to call it and i'm going to say i2 dash if you hit the first couple letters then hit tab it'll auto populate so i2 dashboard here's your parentheses and you want to add things so i'm going to add a title i'm going to say my title is equal to cradle to grave r comma uh i'm the author auth author i don't know why it's not doing equals i feel like i'm doing something wrong already author equals me margin grass and interactivity or interactive equals true uh we'll just do true like that and we can set a theme and i'll show you where the themes are in a moment theme equals i'm going to use spacelab space lab because that's the one i like and that's it so it looks like oh i might have an extra parenthesis that's where probably the problem was okay so i had an extra parenthesis that's what the problem was so run that so now our dashboard is loaded you can't see it because i'm in the way but now i'm out of the way so let's see um to the right i have my dashboard it's not much it's just an object it's a object that has a bunch of parameters and things that are stored in there let's not focus on that quite yet but so now that we've created our object we have a dashboard we can use we can start playing with that dashboard we can say hey what do i want my dashboard to look like ahead of time so we're going to use this new notation that you probably don't know is i'm going to say dashboard and then you know you've seen maybe the pipe operator which is ctrl shift m it'll give you this but it's not this it's going to be less than and greater than symbol in between these parentheses and what that means is it's going to say hey do something to the right hand side of this equation update it do its thing and then store that result into the left hand side it's it's not much to remember but just that's what it's basically doing so we're going to say add page we want to keep our dashboard but we want to add to it and modify it and store that back into our dashboard that's what it's doing so add page and what kind of page do we want to add well we're going to add a page called home i want a home page i want a title of that i'm going to call that home page and then i'm going to pick a layout which i don't know all the different layouts but we can try to do some searches for it but vocal left focal right are basically a couple layouts you can use it's basically focal left means the left-hand side is going to be the main portion of your of your website page and then the right-hand side is going to be a little bit smaller now you can adjust all that and i'll show you how to adjust all that manually in just a moment once we get this started again and then there's menu items you can do i can add this page to a menu if i wanted to in fact we could do that but i'm not going to i'm going to say no i don't want to add the homepage to the menu because the homepage will be just there okay so that's it we've added now let's go back up to line 10 and do control enter on that no errors we're good to go so in our dashboard object we've just added a page in fact i can show you by typing in dashboard anywhere and hit ctrl enter on that and you can see at the bottom it says a flex board with the title cradle to grave r that's what we wanted containing two pages the page default with the title default page contains zero components and home with the title homepage contains zero components so there's no components yeah we have a page but there's nothing on it right that's what they're saying so that's how you can keep track of what's in your dashboard if you want so before we get too crazy let's add another page um we can do that in two ways we can just do dashboard again and do the um less standard grade and then symbol images in between parentheses and we can do add page again so add page and we're going to call this one about well i'll do lowercase so i'll call it about now that's not what's displaying that's the name of the page that r sees so they can do its work right so we'll say the title now this is what's visible is about me right whatever you want to call it and then of course we can do the layout again is equal to um vocal left sounds good to me now this time i'll put it in a menu though i will put it in a menu called we'll just call it uh menu capital m sounds good to me okay now if we want to add another page we can actually just do the pipe operator control shift m or parenthesis greater than percentile so it's basically saying hey pipe this into another ad page which you don't have to do the pipe you can do another dashboard add page if you'd like but this works just as well so i just want to show you that so we'll do page equals and then we'll wrap it up with these three pages because i think that's plenty we'll just do a contact page cool and then title equals contact me whatever you want to call it layout i'm going to continue doing the same focal left and menu we will put this in the menu called menu so we have two things in the menu now cool and then that's it so let's run line 18 by control command enter or control enter whichever one if you're on a mac or pc or windows okay we've created now if we do our dashboard we've created you know a default page a home page about page a contact page all with zero elements in it done deal all right so now let's do some other stuff that's kind of cool let's create that map that i want to talk about so we're going to do install and then under packages we're going to use this package called leaf l-e-a-f-l-e-t leaflet cool little package it's an html widget you install that and it'll allow you to have basically uh interactive maps within your page all right so now that that's installed we're going to create a leaflet object but first we have to load the library so library leaflet so load that library it should be good because you just installed it now we'll create a leaflet object so leaflet open parenthesis i'm going to create the object but i'm also going to pipe it into we want to add titles and things like that so this is just the format of leaflet so you just have to get used to it so add title this would be add oh tiles i'm sorry add tiles yes pipe that over to add markers we want to add a marker because i want to show my hometown which is silver spring maryland right so i know there's a lot of latitude and longitude for that so we can do longitude equals and i don't know what that is yet and latitude equals i don't know what that is yet comma i'm going to do uh pop up equals i want it to say my hometown my hometown cool and what we want to do is we want to store that into another object called leaflet map we can store that into there right so that object that we're going to create with that latitude and longitude is going to be a map that we store into an object called leaflet map now how do we get the launch longitude and latitude i'm going to go to a website right here and i just went to latlong.net you could find this probably anywhere on the internet i hope um you guys can see it yeah you should be able to see it pretty clearly here i put in silver spring maryland and it gives me the latitude and longitude so my latitude is 38.997 you can just control c control v that so latitude was that let me go back to it and my longitude was negative and there we go you might wonder why i'm always looking like this i have a microphone here and i can't see my keys okay so we've got the hat let's see if it works the whole point is let's go to line 34 and hit command enter and no errors that's always a bonus when there's no errors let's keep this simple and um well let's do plotly as well i i know you haven't seen what this does yet but since it didn't give us an error i'm going to show you that all in one step so so the next thing we want to do is install plotly and i think you guys will be really happy with these these new little packages so because they're pretty interactive plotly install that and this is going to allow you to have interactive plots more interaction is nice for your uh your customer so to speak right so with plotly we can just do something simple as well we're going to load the library because we just installed it we want to use it so load plotly we're going to do plot underscore lee and our favorite empty cars data set which is mine x is equal to uh weight and y is equal to uh miles per gallon and again plotly has its own oh we'll have to create an object too so we'll say plotly object now again what i'm naming these is arbitrary i i pick these names plotley object is i'm calling this particular thing my plotly object command enter should work okay so basically um your x and y is your axes and this little tilde thing is just something that plotly requires because it's just the syntax that that function takes in so it's saying hey x is going to equal to the weight of the car and y is equal to the miles per gallon now mt cars comes with the um r studio and r so it's a data set that's already there so you can play with it right off the bat and if you want to see what that what's in there you can come down to the console and you can just do view empty cars now typically if you've seen some of my other tutorials i'm always talking about empty cars and you should be very familiar with this by now so this is what the data set looks like okay so it's got all this different data we're going to plot that no problem all right cool we've got that so we've got two things we've got objects we've got our leaflet map object we've got our plotly plotly mtcars data set object right so we're gonna put those objects into our dashboard that's what we're gonna do so let's see if we can figure that out um well let's do one more because a lot of people know ggplot so we'll do library ggplot2 and if you don't have it by now click on install ggplot2 install and you should be good to go and then run the library here boom and we're just going to add another simple plot empty cars i'm going to pipe that over to ggplot aesthetic x equals mpg and we're going to add a geom density plot fill equals dark gray and again that's another object i want to store so i'm going to save that as ggplot2 object now i'm only calling that object because it makes it easier for me to understand hey i want to place these objects into my dashboard okay and you don't have to understand all of this right here so the point is you can create objects doesn't matter if you understand ggplot or plotly or leaflet once you understand how to make those these interactive objects you can add the objects to the dashboard right so this pg plot just maps basically miles per gallon and it does a density plot of it okay all right so now let's actually fill our dashboard with these objects so it's simple as this we're going to do dashboard and we'll do our special character i don't know the shortcut key for that but ctrl shift m will give you halfway there so there's that so the dashboard is going to be equal to whatever the dashboard is now plus what we're about to add and we're going to add component so add component co mp you should auto populate if you hit the tab button after you start typing a couple letters well we're going to add let's add our ggplot object so ggplot 2 object right here we're going to add that and where we're going to add it we're going to say page is equal to we're just going to add it to our contact page because we created three pages we added contact about and home i think so we're going to add that to the contact page and we can also give that a title contact me ggplot doesn't matter what it is you we can play with it afterwards so we've added the component so we can just literally hit command enter on that and it should work i think it looks like it's doing something down there because it's it's still kind of thinking see this little stop sign right here oop maybe not you might have missed it let's let's type in our dashboard again just type in dashboard and let's see what it says now it says at the bottom the page contact with the title contact me contains one components so we're we're doing good we're doing good now let's add to our dashboard again we can do it two different ways we can pipe we can pipe this in using this notation or we can just redo this entire thing again so let's just copy lines 48 through 51 and we'll paste it here right below it and we'll say we're not going to do our ggplot object we want our mapley object so it was a was it leaf leaflet map i think what did i call it let's go up just a tad yeah leaflet map that's what we call it i should have called it leaflet map object honestly but that's okay all right leaflet map i want to put that on the home page and notice remember this page home has already been created up here let's take another look so up here i created add page called home so they can talk to each other by saying hey go to the homepage which has a title called the home page which is different than the name of it home okay so we're going to add the leaflet to home contact me we don't need that anymore we can just say this is my home and let's just go ahead and see if this pipe thing works let's do ctrl shift m or parenthesis greater than parenthesis and we'll do add component again and we'll add that last component that we have which i think we created a plotly object yeah yeah so we're going to add the plotly object plotly object comma well that to our about page yeah well why not why not and we'll just add another title equals plotly example command enter on that we can do dashboard again you can do that up here down there it doesn't matter looks like everything contains one component except for the default let's go ahead and run this as in let's create oh so we're going to create an rmd file out of this which is basically the flex dashboard file that it needs that it needs to compile into an html file sounds complicated but really we didn't do much work here yet so we're going to do a dashboard and we're going to say pipe that dashboard into an assemble function so when i say our entire dashboard we're going to pipe that into and assemble which is basically going to create our rmd file i'm going to create a file called um my dashboard.rmd sounds good to me and we're going to tell it what pages to put in there so we're going to say pages equals it's a column vector so a list basically a column of things we're going to say we want our home page we want our contact page and we want our about page so those are the pages we created you can create multiple pages and put them on different dashboards you can have multiple dashboards you can have dashboards linking to other dashboards the possibilities are endless so this is what's going to assemble our actual dashboard into an rmd file i know it's getting it's getting crazy so let's do command enter could not find function assemble i knew there was something wrong with that there's no m in there e m e m assemble there we go now that i've done that click over to files over here and you'll see something called my dashboard.rmd that's what we're looking for click on that and you can see that it actually created this rmd file for us based on this other file that we haven't even saved yet which you probably should save it it's a script there's our script that creates this if you run that assemble it creates the rmd file it puts the yaml code up top i know you probably don't know what that is but there's other tutorials that teaches you what yaml is what flex dashboard is so this is a flex dashboard layout and all we have to do so you don't need to know about flex dashboard you can keep this the way it is if you'd like but all you have to do is click on run document now and this will give you an example a taste test so to speak of what it will look like when it's rendered into html so we have our map there's my little marker if i click on it it says my hometown that's that pop-up and we can scroll in and out and i think as far as as far as the earth goes really right so it's pretty cool it's pretty interactive and then up here we have our homepage which will bring you basically right here menu contact me we've got our ggplot and our contact me ggplot up there was our title i know it doesn't make sense but i'm just showing you the basics about me we have our actual plotly so plotlet you can you can interact you can actually zoom in you can see what that point is you can do all sorts of different things up here export just play around with it this is what plotly does so it's pretty interactive and you um and then we have plotly example up here as a title we can go back to our homepage clicking here and we're good to go that's what we're building in fact we just built it but what we can do to create the html file which is as far as we'll go and then i'll show you a couple ways to modify this down here in the console i think we can do our markdown render yeah this is what we can do then in parenthesis we would type in the name of that dashboard so my dashboard.rmd that's all we're going to do so our markdown colon colon render and look over to the right we don't have any html files here yet i'm going to hit enter on here now for those of you that haven't been following along with other tutorials down here you just hit enter up here you can hit ctrl enter to run the actual code so boom it's doing its thing it's churning it's doing this it's doing that but so you can see here i have a my dashboard.html i can click on that and say open in web browser boom so this is the actual web browser this is um on the web right now right not on the web it's local but but you see it's it's it's a web browser it's not my r studio so menu contact me everything is still there it looks just fine and it's working great so that's it that's how you do it now if you want to modify your actual dashboard that's perfectly fine you can come back here and you can rerun this all day long you know imagine you're pulling in a whole bunch of data you churn in the data and then you create these little maps based on certain latitude and longitudes that you programmatically got maybe you want to find all the schools in the area to figure out you know what are the code rates or something you know near schools you could you could do all that and then every single day you'd run this it would create the dashboard and then you'd run the dashboard and would create the html file but you can also modify this html file or this rmd file to your likings now so like in that contact page if you do a quick control f uh contact contact me right here everything is important all of these little equal signs are important because that's part of flex dashboard so don't mess with it too much you want to go research about flex dashboard and how that works uh the column data widths you can mess with those you can make them uh make them always equal a thousand though so if the data width is 600 you'll see another one that's that goes with it that's for 400 i believe let me double check um so column data with equal 600 it might be automatically but but the entire span of your screen will be 1 000. so 600 is is basically the amount if you can just do oh there it is column width data with 400 and you can put stuff in there so i could put stuff in here saying hey uh contact me now at this number and then just type in your number ctrl s rerun the rmark r markdown render my dashboard boom and let's go back to my dashboard in the web browser and i don't okay so it's right here contact me now this number now it's not the best format in fact i'm in the way so it's not the best format maybe but it's there so you can add all of that in there you have control over all of that so it's pretty cool that you can do all that all within r studio and r now again you can modify all of these things but you probably end up breaking it a few times um it's going to happen this is a little bit the whole point of the i2 dash is to kind of abstract you away from the flex dashboard figuring out all this stuff but you can actually start with flex dashboard and do tutorials on that and skip this part but this is i2 dash i hope that this kind of will get you started and i and i hope that you enjoyed the leaflet map and the plotly interactive plots pretty cool so that being said i appreciate you guys watching this tutorial and i will talk to you guys next time [Music]

Channel: CradleToGraveR

Views: 939

Rating: 5 out of 5

Keywords: i2dash, r dashboards, flexdashboards, R websites, sites with R, how to create blog with R, r sites, i2dashboard, i2dash R, rstats, rstudio, rmarkdown, rmd files, sites with rmd file, cradletograver

Id: yywc0weC2GU

Length: 24min 46sec (1486 seconds)

Published: Sat Jul 25 2020