<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://appsilondatascience.com/blog/rstats/2018/06/11/dashboard-tutorial.html"> Appsilon Data Science Blog</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>We all know that Shiny is great for interactive data visualisations. But, sometimes even the best attempts to fit all your graphs just in one Shiny page are not enough. From our experience, almost every project with growing amount of KPIs struggles with a problem of messy and not readable final reports. Here is where dashboards appear to be handy. Dashboards allow you to intuitively structure your reports by breaking them down into the sections, panels and tabs. Thanks to that it is much easier for a final user to navigate through your work.</p>
<p><code>shinydashboard</code> does a decent job here. However, when you create a bunch of apps using it, you quickly realize that they all look the same and are simply boring. In this tutorial, I will show you how to take advantage of <code>semantic.dashboard</code> <a rel="nofollow" href="https://appsilondatascience.com/blog/rstats/2018/04/23/semanticdashboard.html" target="_blank">package</a>. This is an alternative to <code>shinydashboard</code> which makes use of <a rel="nofollow" href="https://semantic-ui.com/" target="_blank">Semantic UI</a>. Thanks to that you can introduce beautiful Semantic components into your app and select from many available themes.</p>
<blockquote>
<p>Before we start: if you don’t have <code>semantic.dashboard</code> installed yet, visit <a rel="nofollow" href="https://github.com/Appsilon/semantic.dashboard" target="_blank">this GitHub page</a> for detailed instructions.</p>
</blockquote>
<h2>How to start?</h2>
<p>Let’s begin with creating an empty dashboard:</p>
<figure>
<pre><code data-lang="r"><span>library</span><span>(</span><span>shiny</span><span>)</span><span>
</span><span>library</span><span>(</span><span>semantic.dashboard</span><span>)</span><span>
</span><span>ui</span><span> </span><span>&lt;-</span><span> </span><span>dashboardPage</span><span>(</span><span>
</span><span>dashboardHeader</span><span>(),</span><span>
</span><span>dashboardSidebar</span><span>(),</span><span>
</span><span>dashboardBody</span><span>()</span><span>
</span><span>)</span><span>
</span><span>server</span><span> </span><span>&lt;-</span><span> </span><span>shinyServer</span><span>(</span><span>function</span><span>(</span><span>input</span><span>,</span><span> </span><span>output</span><span>,</span><span> </span><span>session</span><span>)</span><span> </span><span>{</span><span>
</span><span>})</span><span>
</span><span>shinyApp</span><span>(</span><span>ui</span><span>,</span><span> </span><span>server</span><span>)</span></code></pre>
</figure>
<blockquote>
<p>For comparison you might check what happens if you change <code>library(semantic.dashboard)</code> to <code>library(shinydashboard)</code>.</p>
</blockquote>
<p>What you should see is something like this:</p>
<p><img src="https://i1.wp.com/appsilondatascience.com/blog/assets/article_images/semdashboard-tutorial/fig1.png?w=456" data-recalc-dims="1"></p>
<p>With almost no effort we have created the skeleton for our first <code>semantic.dashboard</code> app.</p>
<p>Now it is time to discuss basic components of a dashboard. Each <code>dashboardPage</code> consists of three elements:</p>
<ul>
<li>header,</li>
<li>sidebar,</li>
<li>body.</li>
</ul>
<p>Currently our header is quite boring, so let’s add some title and change its colour:</p>
<figure>
<pre><code data-lang="r"><span>dashboardHeader</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;blue&quot;</span><span>,</span><span> </span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Dashboard Demo&quot;</span><span>,</span><span> </span><span>inverted</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>)</span></code></pre>
</figure>
<p>We don’t need a sidebar to be so wide and to make it more functional let’s add two menu elements:</p>
<figure>
<pre><code data-lang="r"><span>dashboardSidebar</span><span>(</span><span>
</span><span>size</span><span> </span><span>=</span><span> </span><span>&quot;thin&quot;</span><span>,</span><span> </span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;teal&quot;</span><span>,</span><span>
</span><span>sidebarMenu</span><span>(</span><span>
</span><span>menuItem</span><span>(</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;main&quot;</span><span>,</span><span> </span><span>&quot;Main&quot;</span><span>),</span><span>
</span><span>menuItem</span><span>(</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;extra&quot;</span><span>,</span><span> </span><span>&quot;Extra&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span></code></pre>
</figure>
<p>This is the result you should expect to see:</p>
<p><img src="https://i0.wp.com/appsilondatascience.com/blog/assets/article_images/semdashboard-tutorial/fig2.png?w=456" data-recalc-dims="1"></p>
<p>Not bad! We can do even better by adding some icons to our <code>menuItem</code>s. Can you do it yourself?</p>
<blockquote>
<p>Hint! Use <code>semantic.dashboard</code> documentation, eg. by typing <code>?menuItem</code> in RStudio console.</p>
</blockquote>
<h2>Adding content</h2>
<p>In this section we will start filling our app with some content. We will use popular dataset <a rel="nofollow" href="https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html" target="_blank">“mtcars”</a>, extracted from the 1974 Motor Trend US magazine, which comprises some parameters of 32 old-school automobiles. Before that, let’s make sure that we know how to change the content of our body using tabs. Look at the following piece of code:</p>
<figure>
<pre><code data-lang="r"><span>dashboardBody</span><span>(</span><span>
</span><span>tabItems</span><span>(</span><span>
</span><span>selected</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>tabItem</span><span>(</span><span>
</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;main&quot;</span><span>,</span><span>
</span><span>fluidRow</span><span>(</span><span>
</span><span>h</span><span>1</span><span>(</span><span>&quot;main&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>),</span><span>
</span><span>tabItem</span><span>(</span><span>
</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;extra&quot;</span><span>,</span><span>
</span><span>fluidRow</span><span>(</span><span>
</span><span>h</span><span>1</span><span>(</span><span>&quot;extra&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span></code></pre>
</figure>
<p>We created two <code>tabItem</code>s with <code>tabName</code>s exactly the same as <code>menuItem</code>s. The <code>selected</code> parameters of <code>tabItems</code> tell us which <code>tabItem</code> should be selected and displayed after running the app.</p>
<p>Equipped with that knowledge, we can finally implement something really functional. We start from creating a simple plot describing the relationship between the car’s gearbox type and their miles per gallon parameter. In the <code>shinyServer</code> function we call:</p>
<figure>
<pre><code data-lang="r"><span> </span><span>data</span><span>(</span><span>&quot;mtcars&quot;</span><span>)</span><span>
</span><span>mtcars</span><span>$</span><span>am</span><span> </span><span>&lt;-</span><span> </span><span>factor</span><span>(</span><span>mtcars</span><span>$</span><span>am</span><span>,</span><span>levels</span><span>=</span><span>c</span><span>(</span><span>0</span><span>,</span><span>1</span><span>),</span><span>
</span><span>labels</span><span>=</span><span>c</span><span>(</span><span>&quot;Automatic&quot;</span><span>,</span><span>&quot;Manual&quot;</span><span>))</span><span>
</span><span>output</span><span>$</span><span>boxplot1</span><span> </span><span>&lt;-</span><span> </span><span>renderPlot</span><span>({</span><span>
</span><span>ggplot</span><span>(</span><span>mtcars</span><span>,</span><span> </span><span>aes</span><span>(</span><span>x</span><span> </span><span>=</span><span> </span><span>am</span><span>,</span><span> </span><span>y</span><span> </span><span>=</span><span> </span><span>mpg</span><span>))</span><span> </span><span>+</span><span>
</span><span>geom_boxplot</span><span>(</span><span>fill</span><span> </span><span>=</span><span> </span><span>semantic_palette</span><span>[[</span><span>&quot;green&quot;</span><span>]])</span><span> </span><span>+</span><span> </span><span>xlab</span><span>(</span><span>&quot;gearbox&quot;</span><span>)</span><span> </span><span>+</span><span> </span><span>ylab</span><span>(</span><span>&quot;Miles per gallon&quot;</span><span>)</span><span>
</span><span>})</span></code></pre>
</figure>
<p>Since we are using <code>ggplot2</code> don’t forget to attach this package at the beginning of the script.</p>
<p>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>fluidRow</code> function of our first <code>tabItem</code> by:</p>
<figure>
<pre><code data-lang="r"><span>box</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Graph 1&quot;</span><span>,</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;green&quot;</span><span>,</span><span> </span><span>ribbon</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>title_side</span><span> </span><span>=</span><span> </span><span>&quot;top right&quot;</span><span>,</span><span>
</span><span>column</span><span>(</span><span>8</span><span>,</span><span>
</span><span>plotOutput</span><span>(</span><span>&quot;boxplot1&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>),</span><span>
</span><span>box</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Graph 2&quot;</span><span>,</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;red&quot;</span><span>,</span><span> </span><span>ribbon</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>title_side</span><span> </span><span>=</span><span> </span><span>&quot;top right&quot;</span><span>
</span><span>)</span></code></pre>
</figure>
<p>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.</p>
<h2>Interactive items</h2>
<p>What do you say about adding more interactive plot to our dashboard? Let’s use <a rel="nofollow" href="https://plot.ly/" target="_blank">“plotly”</a> to present the relation between the weight of a car and miles per gallon. I decided for a point plot here since I can include on it some extra information. By colour, I mark the number of cylinders and by the size of dots a quarter mile time. That’s the code to achieve it:</p>
<figure>
<pre><code data-lang="r"><span>colscale</span><span> </span><span>&lt;-</span><span> </span><span>c</span><span>(</span><span>semantic_palette</span><span>[[</span><span>&quot;red&quot;</span><span>]],</span><span> </span><span>semantic_palette</span><span>[[</span><span>&quot;green&quot;</span><span>]],</span><span> </span><span>semantic_palette</span><span>[[</span><span>&quot;blue&quot;</span><span>]])</span><span>
</span><span>output</span><span>$</span><span>dotplot1</span><span> </span><span>&lt;-</span><span> </span><span>renderPlotly</span><span>({</span><span>
</span><span>ggplotly</span><span>(</span><span>ggplot</span><span>(</span><span>mtcars</span><span>,</span><span> </span><span>aes</span><span>(</span><span>wt</span><span>,</span><span> </span><span>mpg</span><span>))</span><span>
</span><span>+</span><span> </span><span>geom_point</span><span>(</span><span>aes</span><span>(</span><span>colour</span><span>=</span><span>factor</span><span>(</span><span>cyl</span><span>),</span><span> </span><span>size</span><span> </span><span>=</span><span> </span><span>qsec</span><span>))</span><span>
</span><span>+</span><span> </span><span>scale_colour_manual</span><span>(</span><span>values</span><span> </span><span>=</span><span> </span><span>colscale</span><span>)</span><span>
</span><span>)</span><span>
</span><span>})</span></code></pre>
</figure>
<blockquote>
<p>Note that we used <code>semantic_palette</code> here for graph colors in order to stay consistent with SemnaticUI layout of the app.</p>
</blockquote>
<p>To insert it into the dashboard, we add by analogy to the second box:</p>
<figure>
<pre><code data-lang="r"><span>box</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Graph 2&quot;</span><span>,</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;red&quot;</span><span>,</span><span> </span><span>ribbon</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>title_side</span><span> </span><span>=</span><span> </span><span>&quot;top right&quot;</span><span>,</span><span>
</span><span>column</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>plotlyOutput</span><span>(</span><span>&quot;dotplot1&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span></code></pre>
</figure>
<p>That’s how our main page looks right now:</p>
<p><img src="https://i2.wp.com/appsilondatascience.com/blog/assets/article_images/semdashboard-tutorial/fig3.png?w=456" data-recalc-dims="1"></p>
<p>I would say that’s enough here. Let’s switch to another tab.</p>
<p>Probably, some curious user would like to see a complete list of cars properties in the “Extra” tab. Let’s give him that chance. For that we will use the <code>DT</code> package to render the table on the server side:</p>
<figure>
<pre><code data-lang="r"><span>output</span><span>$</span><span>gstatstable</span><span> </span><span>&lt;-</span><span> </span><span>DT</span><span>::</span><span>renderDataTable</span><span>(</span><span>github.data</span><span>)</span></code></pre>
</figure>
<p>and display it in the second tab:</p>
<figure>
<pre><code data-lang="r"><span> </span><span>tabItem</span><span>(</span><span>
</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;extra&quot;</span><span>,</span><span>
</span><span>fluidRow</span><span>(</span><span>
</span><span>dataTableOutput</span><span>(</span><span>&quot;carstable&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span></code></pre>
</figure>
<p><img src="https://i2.wp.com/appsilondatascience.com/blog/assets/article_images/semdashboard-tutorial/fig4.png?w=456" data-recalc-dims="1"></p>
<p>I’m pretty satisfied of what we have achieved so far…</p>
<p>But you know what? I changed my mind at this point and decided to modify the theme of this dashboard. I reviewed my options on <a rel="nofollow" href="http://semantic-ui-forest.com/themes/" target="_blank">Semantic Forest</a> website and decided for <code>cerulean</code>. It’s very easy to change the theme now, as it requires changing only one parameter in the <code>dashboardPage</code> function.</p>
<figure>
<pre><code data-lang="r"><span>dashboardPage</span><span>(</span><span>
</span><span>header</span><span>,</span><span> </span><span>sidebar</span><span>,</span><span> </span><span>body</span><span>,</span><span>
</span><span>theme</span><span> </span><span>=</span><span> </span><span>&quot;cerulean&quot;</span><span>)</span></code></pre>
</figure>
<p>Let’s see how this app works:</p>
<p><img src="https://i1.wp.com/appsilondatascience.com/blog/assets/article_images/semdashboard-tutorial/fig_dash_demo.gif?w=456" data-recalc-dims="1"></p>
<h2>Full code</h2>
<p>Okay, so that’s it! If you got to this point, it means that you created your first dashboard with <code>semantic.dashboard</code> <a rel="nofollow" href="https://appsilondatascience.com/blog/rstats/2018/04/23/semanticdashboard.html" target="_blank">package</a>. For training, I encourage you to customize it by adding more tabs with new fancy plots. If you missed some step, here you can check the complete code for the dashboard:</p>
<figure>
<pre><code data-lang="r"><span>library</span><span>(</span><span>shiny</span><span>)</span><span>
</span><span>library</span><span>(</span><span>semantic.dashboard</span><span>)</span><span>
</span><span>library</span><span>(</span><span>ggplot2</span><span>)</span><span>
</span><span>library</span><span>(</span><span>plotly</span><span>)</span><span>
</span><span>library</span><span>(</span><span>DT</span><span>)</span><span>
</span><span>ui</span><span> </span><span>&lt;-</span><span> </span><span>dashboardPage</span><span>(</span><span>
</span><span>dashboardHeader</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;blue&quot;</span><span>,</span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Dashboard Demo&quot;</span><span>,</span><span> </span><span>inverted</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>),</span><span>
</span><span>dashboardSidebar</span><span>(</span><span>
</span><span>size</span><span> </span><span>=</span><span> </span><span>&quot;thin&quot;</span><span>,</span><span> </span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;teal&quot;</span><span>,</span><span>
</span><span>sidebarMenu</span><span>(</span><span>
</span><span>menuItem</span><span>(</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;main&quot;</span><span>,</span><span> </span><span>&quot;Main&quot;</span><span>,</span><span> </span><span>icon</span><span> </span><span>=</span><span> </span><span>icon</span><span>(</span><span>&quot;car&quot;</span><span>)),</span><span>
</span><span>menuItem</span><span>(</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;extra&quot;</span><span>,</span><span> </span><span>&quot;Extra&quot;</span><span>,</span><span> </span><span>icon</span><span> </span><span>=</span><span> </span><span>icon</span><span>(</span><span>&quot;table&quot;</span><span>))</span><span>
</span><span>)</span><span>
</span><span>),</span><span>
</span><span>dashboardBody</span><span>(</span><span>
</span><span>tabItems</span><span>(</span><span>
</span><span>selected</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>tabItem</span><span>(</span><span>
</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;main&quot;</span><span>,</span><span>
</span><span>fluidRow</span><span>(</span><span>
</span><span>box</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Graph 1&quot;</span><span>,</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;green&quot;</span><span>,</span><span> </span><span>ribbon</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>title_side</span><span> </span><span>=</span><span> </span><span>&quot;top right&quot;</span><span>,</span><span>
</span><span>column</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>plotOutput</span><span>(</span><span>&quot;boxplot1&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>),</span><span>
</span><span>box</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>&quot;Graph 2&quot;</span><span>,</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;red&quot;</span><span>,</span><span> </span><span>ribbon</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>title_side</span><span> </span><span>=</span><span> </span><span>&quot;top right&quot;</span><span>,</span><span>
</span><span>column</span><span>(</span><span>width</span><span> </span><span>=</span><span> </span><span>8</span><span>,</span><span>
</span><span>plotlyOutput</span><span>(</span><span>&quot;dotplot1&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span><span>
</span><span>),</span><span>
</span><span>tabItem</span><span>(</span><span>
</span><span>tabName</span><span> </span><span>=</span><span> </span><span>&quot;extra&quot;</span><span>,</span><span>
</span><span>fluidRow</span><span>(</span><span>
</span><span>dataTableOutput</span><span>(</span><span>&quot;carstable&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span><span>
</span><span>)</span><span>
</span><span>),</span><span> </span><span>theme</span><span> </span><span>=</span><span> </span><span>&quot;cerulean&quot;</span><span>
</span><span>)</span><span>
</span><span>server</span><span> </span><span>&lt;-</span><span> </span><span>shinyServer</span><span>(</span><span>function</span><span>(</span><span>input</span><span>,</span><span> </span><span>output</span><span>,</span><span> </span><span>session</span><span>)</span><span> </span><span>{</span><span>
</span><span>data</span><span>(</span><span>&quot;mtcars&quot;</span><span>)</span><span>
</span><span>colscale</span><span> </span><span>&lt;-</span><span> </span><span>c</span><span>(</span><span>semantic_palette</span><span>[[</span><span>&quot;red&quot;</span><span>]],</span><span> </span><span>semantic_palette</span><span>[[</span><span>&quot;green&quot;</span><span>]],</span><span> </span><span>semantic_palette</span><span>[[</span><span>&quot;blue&quot;</span><span>]])</span><span>
</span><span>mtcars</span><span>$</span><span>am</span><span> </span><span>&lt;-</span><span> </span><span>factor</span><span>(</span><span>mtcars</span><span>$</span><span>am</span><span>,</span><span>levels</span><span>=</span><span>c</span><span>(</span><span>0</span><span>,</span><span>1</span><span>),</span><span>
</span><span>labels</span><span>=</span><span>c</span><span>(</span><span>&quot;Automatic&quot;</span><span>,</span><span>&quot;Manual&quot;</span><span>))</span><span>
</span><span>output</span><span>$</span><span>boxplot1</span><span> </span><span>&lt;-</span><span> </span><span>renderPlot</span><span>({</span><span>
</span><span>ggplot</span><span>(</span><span>mtcars</span><span>,</span><span> </span><span>aes</span><span>(</span><span>x</span><span> </span><span>=</span><span> </span><span>am</span><span>,</span><span> </span><span>y</span><span> </span><span>=</span><span> </span><span>mpg</span><span>))</span><span> </span><span>+</span><span>
</span><span>geom_boxplot</span><span>(</span><span>fill</span><span> </span><span>=</span><span> </span><span>semantic_palette</span><span>[[</span><span>&quot;green&quot;</span><span>]])</span><span> </span><span>+</span><span> </span><span>xlab</span><span>(</span><span>&quot;gearbox&quot;</span><span>)</span><span> </span><span>+</span><span> </span><span>ylab</span><span>(</span><span>&quot;Miles per gallon&quot;</span><span>)</span><span>
</span><span>})</span><span>
</span><span>output</span><span>$</span><span>dotplot1</span><span> </span><span>&lt;-</span><span> </span><span>renderPlotly</span><span>({</span><span>
</span><span>ggplotly</span><span>(</span><span>ggplot</span><span>(</span><span>mtcars</span><span>,</span><span> </span><span>aes</span><span>(</span><span>wt</span><span>,</span><span> </span><span>mpg</span><span>))</span><span>
</span><span>+</span><span> </span><span>geom_point</span><span>(</span><span>aes</span><span>(</span><span>colour</span><span>=</span><span>factor</span><span>(</span><span>cyl</span><span>),</span><span> </span><span>size</span><span> </span><span>=</span><span> </span><span>qsec</span><span>))</span><span>
</span><span>+</span><span> </span><span>scale_colour_manual</span><span>(</span><span>values</span><span> </span><span>=</span><span> </span><span>colscale</span><span>)</span><span>
</span><span>)</span><span>
</span><span>})</span><span>
</span><span>output</span><span>$</span><span>carstable</span><span> </span><span>&lt;-</span><span> </span><span>renderDataTable</span><span>(</span><span>mtcars</span><span>)</span><span>
</span><span>})</span><span>
</span><span>shinyApp</span><span>(</span><span>ui</span><span>,</span><span> </span><span>server</span><span>)</span></code></pre>
</figure>
<h3>Resources:</h3>
<ul>
<li><a rel="nofollow" href="https://github.com/Appsilon/semantic.dashboard" target="_blank">semantic.dashboard GitHub page</a></li>
<li><a rel="nofollow" href="https://github.com/Appsilon/shiny.semantic" target="_blank">shiny.semantic GitHub page</a></li>
<li><a rel="nofollow" href="https://demo.appsilondatascience.com/semdashboard-demo" target="_blank">CranDash demo</a></li>
</ul>
<p>Read the original post at<br>
<a rel="nofollow" href="http://appsilondatascience.com/blog/rstats/2018/06/11/dashboard-tutorial.html" target="_blank">Appsilon Data Science Blog</a>.</p>
<h3>Follow Appsilon Data Science</h3>
<ul>
<li><a rel="nofollow" href="https://twitter.com/appsilonds" target="_blank">Follow us</a> on Twitter!</li>
<li>Check us out on <a rel="nofollow" href="https://www.facebook.com/appsilon.poland/" target="_blank">Facebook page</a>!</li>
<li>Follow us on <a rel="nofollow" href="https://www.linkedin.com/company/3516349/" target="_blank">LinkedIn</a>!</li>
<li>Star our <a rel="nofollow" href="https://github.com/Appsilon/" target="_blank">GitHub packages</a>, including <code>shiny.semantic</code>, <code>shiny.router</code>, <code>shiny.collections</code>, <code>shiny.i18n</code> and <code>semantic.dashboard</code>!</li>
<li>Sign up for <a rel="nofollow" href="https://appsilondatascience.com/scrum-in-data-science" target="_blank">our newsletter</a> and get free e-book!</li>
</ul>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://appsilondatascience.com/blog/rstats/2018/06/11/dashboard-tutorial.html"> Appsilon Data Science Blog</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/3cemiN4aHlQ" height="1"></a></div>