<strong>Updated</strong>: April 26, 2022. <code class="highlighter-rouge">semantic.dashboard</code> is an R package used to improve the design of R Shiny dashboards. It's an alternative to <code class="highlighter-rouge">shinydashboard</code> and makes use of Semantic UI. The package allows developers to easily introduce Semantic UI components into R Shiny apps. The package is available on the Comprehensive R Archive Network (CRAN). You can make use of it simply by running <code>install.packages("semantic.dashboard")</code>. You might also be interested in this 2020 <a href="https://appsilon.com/video-tutorial-create-and-customize-a-simple-shiny-dashboard/">tutorial</a> on how to build a high-quality Shiny dashboard with the semantic.dashboard package. Table of contents: <ul><li><a href="#improve-design">Improve Design of R Shiny Dashboards with semantic.dashboard</a></li><li><a href="#get-started">How to Get Started with semantic.dashboard?</a></li><li><a href="#add-content">How to Add Content to semantic.dashboard Dashboards</a></li><li><a href="#interactive-terms">Add Interactive Items to R Shiny Dashboards</a></li><li><a href="#source-code">Source Code</a></li><li><a href="#conclusion">Conclusion</a></li></ul> <hr /> <h2 id="improve-design">Improve Design of R Shiny Dashboards with semantic.dashboard</h2> R Shiny is an excellent package for interactive data visualizations. However, fitting a large number of graphs onto just one Shiny page may prove to be a challenge. In our experience, virtually all projects with new KPIs being introduced along the way result in inadequate and not readable final reports.  Dashboards provide a solution. They allow the developer to intuitively structure their reports by breaking them down into sections, panels, and tabs. This makes it much easier for the final user to navigate through the data. <code class="highlighter-rouge">shinydashboard</code> is one available solution and provides decent features. The only problem is - all shinydashboard apps look virtually identical. In this article, we will show you how to take advantage of the semantic.dashboard package. It is an alternative to <code class="highlighter-rouge">shinydashboard</code> which makes use of <a href="https://semantic-ui.com/" target="_blank" rel="noopener noreferrer">Semantic UI</a>. The package allows developers to introduce attractive Semantic components into the app and select from many available themes. If you don’t have <code class="highlighter-rouge">semantic.dashboard</code> installed yet, visit <a href="https://github.com/Appsilon/semantic.dashboard" target="_blank" rel="noopener noreferrer">this GitHub page</a> for detailed instructions. As mentioned earlier, the package is available on CRAN, so you can install it directly in RStudio. <h2 id="get-started">How to Get Started with semantic.dashboard?</h2> Let's keep things simple and start by creating an empty dashboard: <script src="https://gist.github.com/darioappsilon/5d52de6ddb8bcbf18bb4f2687d6a80a6.js"></script> For comparison, you can check what happens if you change <code class="highlighter-rouge">library(semantic.dashboard)</code> to <code class="highlighter-rouge">library(shinydashboard)</code>. The dashboard should look similar to this: <img class="wp-image-8257 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023528879deb4ce647883_xfig1.png.pagespeed.ic_.N-b8yjZL6I.webp" alt="shiny development step 1: empty dashboard" width="593" height="271" /> Image 1 - Empty dashboard &nbsp; With almost no effort we have created the skeleton for our first <code class="highlighter-rouge">semantic.dashboard</code> app. Now it is time to discuss the basic components of a dashboard. Each <code class="highlighter-rouge">dashboardPage</code> consists of three elements: <ul><li>header</li><li>sidebar</li><li>body</li></ul> Currently, our header is quite boring, so let’s add a title and change its color: <script src="https://gist.github.com/darioappsilon/bfb6072fa98ad3d401c77df2a7fa3d5c.js"></script> We don’t need a sidebar to be this wide. We also would like to make it more functional, so let’s add two menu elements: <script src="https://gist.github.com/darioappsilon/3ed9100fa6a3e88084870e24a2141d31.js"></script> This is the result we should get: <img class="wp-image-8258 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0235227d7e18d9857868b_fig2.webp" alt="shiny development step 2: basic dashboard styling" width="383" height="274" /> Image 2 - Basic dashboard styling &nbsp; Not bad! We can do even better by adding some icons to our <code class="highlighter-rouge">menuItem</code>s. Can you do it yourself? (<em>Hint: Use <code class="highlighter-rouge">semantic.dashboard</code> documentation, eg. by typing <code class="highlighter-rouge">?menuItem</code> in RStudio console</em>). <h2 id="add-content">How to Add Content to semantic.dashboard Dashboards</h2> In this section, we will start filling our app with some content. We will use a popular dataset <a href="https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html" target="_blank" rel="noopener noreferrer">“mtcars”</a>, extracted from the 1974 Motor Trend US magazine, which comprises a range of parameters for 32 old-school automobiles. First, we'll need to change the content of the dashboard body using tabs. Look at the following code snippet: <script src="https://gist.github.com/darioappsilon/ba540b713c7dcab3a53b0c7977550303.js"></script> We created two <code class="highlighter-rouge">tabItem</code>s with <code class="highlighter-rouge">tabName</code>s exactly the same as <code class="highlighter-rouge">menuItem</code>s. The <code class="highlighter-rouge">selected</code> parameters of <code class="highlighter-rouge">tabItems</code> tell us which <code class="highlighter-rouge">tabItem</code> should be selected and displayed after running the app. Equipped with this knowledge, we can implement something functional. We'll start by creating a simple plot describing the relationship between the car’s gearbox type and their miles per gallon parameter. In the <code class="highlighter-rouge">shinyServer</code> function, we call: <script src="https://gist.github.com/darioappsilon/c0ac6d9056a569ab70168aac4cdbfc9f.js"></script> Since we are using <code class="highlighter-rouge">ggplot2</code> do not forget to import it at the beginning of the script. We are going to make another plot from this dataset, so let’s divide the main page into two sections. We can exchange content of <code class="highlighter-rouge">fluidRow</code> function of our first <code class="highlighter-rouge">tabItem</code> by: <script src="https://gist.github.com/darioappsilon/7e9a33a2210bc20ab2cac850493ffe5e.js"></script> This is a good moment to make sure that your app is running. If the answer is yes, proceed to the next section. In case it’s not, verify if you followed all the previous steps. <h2 id="interactive-terms">Add Interactive Items to R Shiny Dashboards</h2> To add a more interactive plot to our dashboards we can use <a href="https://plot.ly/" target="_blank" rel="noopener noreferrer">“plotly”</a> R package. In this example, we will use it to present the relation between the weight of a car and miles per gallon. We decided on a scatter plot since it can provide additional information. We marked the number of cylinders by color and the quarter-mile time by the size of the points: <script src="https://gist.github.com/darioappsilon/e51a42897da3a8faa2879c6dbbdc077d.js"></script> Note that we used <code class="highlighter-rouge">semantic_palette</code> here for graph colors in order to stay consistent with the SemanticUI layout of the app: <script src="https://gist.github.com/darioappsilon/945808531ae9dd9107cbd1c276e259b2.js"></script> Here's what the dashboard looks like after the change: <img class="wp-image-8259 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b02353a2c1792f3243219f_fig3.webp" alt="shiny development step 3: sample interactive plots" width="1100" height="547" /> Image 3 - Sample interactive plots We can now move on to the next tab to provide the user with additional information. For instance, we can add a complete list of cars properties in the “Extra” tab for the curious automobile enthusiast. To do so, we'll use the <code class="highlighter-rouge">DT</code> package to render the table on the server-side: <script src="https://gist.github.com/darioappsilon/510cf5a08394d380ce86a4f90993401b.js"></script> And now display it on the second tab: <script src="https://gist.github.com/darioappsilon/3dae53fa0684a3ee96c3237e837e52c3.js"></script> <img class="wp-image-8260 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023554a4af475c4356095_fig4.webp" alt="shiny development step 4: sample table view" width="947" height="454" /> Image 4 - Sample table view The dashboard looks pretty good by this point. But let's change the visuals by altering the dashboard theme. You can find a list of available themes on the <a href="http://semantic-ui-forest.com/themes/" target="_blank" rel="noopener noreferrer">Semantic Forest</a> website - the <code class="highlighter-rouge">cerulean</code> theme will do the trick. It is simple to change the theme now, as it requires changing just one parameter in the <code class="highlighter-rouge">dashboardPage</code> function. <script src="https://gist.github.com/darioappsilon/e0cdfe5b3be90d354336eb29eedc138f.js"></script> Here's what the dashboard looks like after the change. <img class="wp-image-8261 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0235798693685815f5207_fig_dash_demo.gif" alt="sample shiny dashboard demo" width="1302" height="619" /> Image 5 - Sample Shiny dashboard demo <h2 id="source-code">S0urce code</h2> If you missed a step or two, you can review the complete code for the dashboard below: <script src="https://gist.github.com/darioappsilon/9cf3a7b736acefbe143b48bee35d799d.js"></script> <hr /> <h2 id="conclusion">Summary of semantic.dashboard for Improving Design of R Shiny Dashboards</h2> Today you've learned how to improve the design of R Shiny dashboards with the semantic.dashboard package. It's really easy to use, as you had the chance to see, and it will enable you to produce great-looking visuals in less time.  For the homework, we encourage you to customize the dashboard by adding more tabs with new interactive plots. If you’re looking to build your first R Shiny dashboard, you can use <a href="https://appsilon.com/r-shiny-in-government-examples/templates.appsilon.com" rel="noopener noreferrer">Appsilon Shiny Dashboard Templates</a> to simplify the process. The bundle contains a ton of beautiful and easy-to-use templates. The best part – is it’s entirely free. In case you need something more advanced, we’re also here to help. <a href="https://appsilon.com/" rel="noopener noreferrer">Appsilon</a> is an <a href="https://appsilon.com/appsilon-is-an-rstudio-full-service-certified-partner/" rel="noopener noreferrer">RStudio Full Service Certified Partner</a>. We develop advanced R Shiny applications for Fortune 500 companies across the globe. We’d be happy to help you choose the right options for your use case. <h3 id="resources">Resources:</h3><ul><li><a href="https://github.com/Appsilon/semantic.dashboard" target="_blank" rel="noopener noreferrer">semantic.dashboard GitHub page</a></li><li><a href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">shiny.semantic GitHub page</a></li></ul>