Tutorial Create and Customize a Simple Shiny Dashboard

hi my name is Jack and I'm here if Dominic who's the tech lead of our open source hello and welcome to our first shiny dashboards tutorial together we work at epsilon where among other things we are passionate about creating data science solutions for big and small companies and support them with data visualizations over the years we learned how crucial it is to have an understandable and interactive representation of data to achieve that we frequently use dashboards dashboards are the perfect tools for creating neat visualizations of data for business and scientific applications they combine complex layout with simple navigation options to allow you to browse easily through various plots tables or other widgets in this tutorial we are going to teach you how to build and customize your shiny dashboard I always believed that the best way to learn is by doing so let's get to the business of making our first simple shiny dashboard we start by importing libraries in shiny and obviously shiny dashboard then we build a skeleton of our first application by creating a server function that takes input and output variables as the argument we can also create at the end of the script a call to our server and UI we type shiny up here yep and then we finally for the first time are taking advantage of shiny dashboard components so we create a dashboard page and we fill it in with content there is head header that goes on the top there is sidebar that will on the left and finally the body of the application let me interrupt you here as some people might ask at this point how do we know all of that syntax well that's pretty good question for those of you familiar with our studio I invite you to go into console and put a question mark at the beginning then type the name of the function you want to learn about it will show you at the right hand side this help page with a lot of examples on how to get started ok let's run the app now and as we can see the dashboard is empty for now so let's start filling it up with content first we're gonna add a title to that output header and we can simply make it my delporte and run the app to see it great now we can proceed with adding more content to the dashboard body so first component we want to add is going to be plot we can add to a correlation plot on the data from iris data set so what we're gonna do is first we have to add a box to the dashboard body which can store our plot output let's call the plot output correlation plot and also we can set the width of the box to 8 to live someplace let's now jump to the server function here what we want to do is to render plot to our correlation plot output and the plot function is going to be taught in Sapa length from the iris data set against petal length let's run the app and see our plot okay the correlation plot is there so now we can add some interactivity to it for that we're gonna place another box and we're gonna fill it with a sex input component also we want to set the width to 4 so we have 12 for the full dashboard body width and you know set ID features on our circle input at label features to it and also we need to provide a vector with possible choices for the drop down of the widget so let's take three cones from our data set and fill them in okay that's great so the last step we have to make is to provide our input into the plot function so let's type input dollar features inside the plot function in server and also maybe we want to add some labels for the x and y axis so on X we have sepal length and we're gonna simply put features for the y after we type in all the code we can run our app and check if everything works correctly let's see the result it looks like it does now we have interactive plot on our dashboard but we don't really make any use of shiny features here our app looks like a standard one-page shiny up with a menu on the side not too much is happening here that shall change in a second let's see how to introduce the dashboard navigation and again instead of giving you a quick solution I invite you to go with me to the documentation of dashboard sidebar so the dashboard sidebar gives us some clues on how to use the sidebar menu function together with menu items so let's add sidebar menu to our dashboard sidebar and simply copy one of the menu items from the example twice and we're gonna adjust it to our case so I wish for the first menu item and we're gonna use empty cars data set so let's call it cars let's also set the icons and the same for page gives us some clues on how to hook up the menu of our dashboard with the content displayed on the dashboard body so we're going to copy this fragment with tab items and we will use it in our dashboard body so we can paste it now we have to adjust we're gonna remove unnecessary line and also this deep change the names to Irish some cars and now we can move our correlation plot to the first stop item and let's create a Tammie page for the second type item let's make it simply say cars and wrap it into fluid page so it has proper leaf on our dashboard body we can see that we have two menu items and can switch between them now it's time to make a use of empty cars data set I could create some simple plot here again but that's something that you could easily do by yourself now actually as an exercise you could try to create a third page with a histogram showing the distribution of miles-per-gallon values of empty cars instead here we will show you how nice the shiny dashboard can be integrated with other packages offering interactive tools for data visualization to mention some of them there is plotly for easy interactive plots there is leaflet for building maps and we also have data tables that offer interactive table presentation that is highly extendable and at the same time easy to get started so in our second page we'll create a table that offers a detailed view into our empty cars data set let's import the data table package at the beginning of our script now we navigate to the cars top item and just below the cars header we our data table output with a pointer called cars table now we need to render our table so we move down to the server we use the same title name to render our data table and we simply put inside the name of the variable that stores our data here you can see like how part of the data looks like in the console and now let's run the application let's navigate to the second website and voila we have pretty nice representation of our data and we can do a lot of interactive stuff with it also I just see one problem with this app even though we have all the functionalities that we wanted it doesn't really catch an eye but there is a way to fix it if we take a look at shiny dashboard website we'll notice that the standard shiny dashboard package offers some color themes that sort of fix it so let's try to use it they're called skins so we have to add a skin parameter to our dashboard page and let's set it to red and see the result there's other way to make your shiny dashboard look awesome quite a while ago we implemented at epsilon the package called semantic dashboard it takes advantage of semantic UI libraries with CSS and JavaScript code our wrapper is quite compatible with shiny dashboard syntax so it's pretty easy to get started let's see how it works in practice so the only thing we do is we exchange the import of shiny dashboard by semantic dashboards we try to run it and but we are getting some error though the error message says that skin parameter is not understood we can easily fix it and when we run it we are getting quite neat minimalistic white layout but does it mean that semantic dashboard doesn't offer any way to customize the look of your app once again let's follow to the documentation website of dashboard page as you can see we have two options now one coming from semantic dashboard the other one from shine dashboard let's pick the top one and we can learn from it that instead of skins parameter semantic dashboard offers so-called themes now the question arises what are our options here so for that you can go to semantic UI forest website we'll put a link to that in the description below and in the themes section of the website you can find some different layouts to customize your app I pick the one that offers a dark mode and as you can see with just one line of code I'm getting this black theme of my app remember though that semantic dashboard package is still in a rapid development phase the stable release is on cron but the most recent version is on our github repository if you have any problems or questions we invite you to post it on the issues section we have one more tip for you as you're up cross and you want to keep the style of your code in check we recommend you to use the well known in our package that quickly iterates over all lines of your code and gives you suggestions about what to change in order to stick with our programming style standard ok so that's all for today we really hope that you like this short video and we promise to prepare some more tutorials soon that will cover even more details on how to customize your shiny dashboards and make them shine [Music]