<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/shiny-application-layouts-exercises-part-3/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.r-exercises.com/2017/04/30/shiny-application-layouts-exercises-part-3/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-3"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><a target="_blank" rel="nofollow" href="https://i2.wp.com/www.r-exercises.com/wp-content/uploads/2017/04/unnamed-chunk-2-2-1.png"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-5245" src="https://i0.wp.com/www.r-exercises.com/wp-content/uploads/2017/04/unnamed-chunk-2-2-1-150x150.png?resize=150%2C150" data-recalc-dims="1"></a><br>
<strong>Shiny Application Layouts-Navbar Page</strong></p>
<p>In the third part of our series we will build another small shiny app but use another UI.</p>
<p>Specifically we are going to create a Shiny application that includes more than one distinct sub-components each with its own characteristics. </p>
<p>For our case we are going to use the <code>cars</code> dataset to create a small app.</p>
<p>This part can be useful for you in two ways. </p>
<p>First of all, you can see different ways to enhance the appearance and the utility of your shiny app. </p>
<p>Secondly you can make a revision on what you learnt in <a target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">“Building Shiny App”</a> series as we will build basic shiny staff in order to present it in the proper way.</p>
<p>Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/04/30/shiny-application-layouts-solutions-part-3/">here</a>.</p>
<p><strong>Shiny Installation</strong></p>
<p>In order to create the app we have to install and load the package “shiny”.</p>
<p><strong>Exercise 1</strong></p>
<p>Install and load <code>shiny</code>.</p>
<p><strong>Navbar Pages</strong></p>
<p>The <code>navbarPage()</code> function creates an application with a standard Navbar at the top. For example:<br>
#ui.R<br>
<code>shinyUI(navbarPage(&quot;Application&quot;,<br>
  tabPanel(&quot;Panel 1&quot;),<br>
  tabPanel(&quot;Panel 2&quot;),<br>
  tabPanel(&quot;Panel 3&quot;)<br>
))</code><br>
#server.R<br>
<code>function(input, output, session) {}</code></p>
<p><strong>Exercise 2</strong></p>
<p>Create a Navbar page with three panels. Name the app “Cars” and the panels “Plot”, “Summary” and “Other” respectively.</p>
<p>Now we can work distinctly in each panel. First of all let’s put a sidebar in the first one, like the example below.<br>
#ui.R<br>
<code>library(shiny)<br>
library(markdown)
<p>shinyUI(navbarPage(&quot;App&quot;,<br>
tabPanel(&quot;Panel 1&quot;,<br>
sidebarLayout(<br>
sidebarPanel(<br>
),<br>
mainPanel(<br>
)<br>
)),<br>
tabPanel(&quot;Panel 2&quot;),<br>
tabPanel(&quot;Panel 3&quot;)<br>
))</p>
<p><strong>Exercise 3</strong></p>
<p>Add a sidebar in the <code>tabPanel</code> “Plot”.</p>
<p>Now we will add in the sidebar a radiobutton from which the user can choose to see either the scatter plot or the line chart. Look at the example below.<br>
#ui.R<br>
<code>radioButtons(&quot;plote&quot;, &quot;Plot &quot;,<br>
          c(&quot;Scatter&quot;=&quot;s&quot;, &quot;Line&quot;=&quot;l&quot;,&quot;Bar&quot;=&quot;b&quot;)<br>
        )</code></p>
<p><strong>Exercise 4</strong></p>
<p>Add <code>radioButtons()</code> with two buttons inside the sidebar. Name it “Plot”. The first will be a scatter chart and the second a line chart.</p>
<p>It is to time to create the two charts as the example:<br>
#ui.R<br>
<code>mainPanel(<br>
        plotOutput(&quot;plot&quot;)<br>
      )</code><br>
#server.R<br>
<code>output$plot &lt;- renderPlot({<br>
    plot(cars, type=input$plote)<br>
  })</code></p>
<div>
<aside><img src="http://www.r-exercises.com/2017/04/30/shiny-application-layouts-exercises-part-3/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-3"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a target="_blank" rel="nofollow" href="http://www.r-exercises.com/product/r-shiny-interactive-web-apps/">R Shiny Interactive Web Apps – Next Level Data Visualization</a>. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).</div>
</div>
<p><strong>Exercise 5</strong></p>
<p>In the <code>mainPanel()</code> create the two plots. <strong>HINT</strong>: Use <code>plotOutput()</code>.</p>
<p>In the <code>tabPanel()</code> “Summary” we will print the descriptive statistics of our dataset via <code>verbatimTextOutput()</code> like the example below.<br>
#ui.R<br>
<code>tabPanel(&quot;Summary&quot;,<br>
    verbatimTextOutput(&quot;summary&quot;)<br>
  )</code><br>
#server.R<br>
<code>output$summary &lt;- renderPrint({<br>
    summary(cars)<br>
  })</code></p>
<p><strong>Exercise 6</strong></p>
<p>Print the summary statistics of cars’ dataset in the <code>tabPanel()</code> “Summary”. <strong>HINT</strong>:Use <code>renderPrint()</code>.</p>
<p><strong>Sub-Components</strong></p>
<p>Sometimes upu may want to add “sub-components” in your <code>tabPanel()</code>. This can be done with <code>navbarMenu()</code> function. Look at the example.<br>
#ui.R<br>
<code>shinyUI(navbarPage(&quot;Application&quot;,<br>
  tabPanel(&quot;Panel 1&quot;),<br>
  tabPanel(&quot;Panel 2&quot;),<br>
  navbarMenu(&quot;More&quot;,<br>
    tabPanel(&quot;Sub-Panel A&quot;),<br>
    tabPanel(&quot;Sub-Panel B&quot;))<br>
))</code></p>
<p><strong>Exercise 7</strong></p>
<p>In the <code>tabPanel()</code> other create two additional <code>tabPanel()</code>. Name the first “Data Table” and the second “Description”.</p>
<p><strong>Exercise 8</strong></p>
<p>In the first additional <code>tabPanel()</code> “Data table” place the Data Table of your dataset. <strong>HINT</strong>: Use <code>datatableOutput()</code> and <code>renderDataTable()</code>.</p>
<p><strong>Exercise 9</strong></p>
<p>In the “Description” Panel describe your dataset.”The data give the speed of cars and the distances taken to stop. Note that the data were recorded in the 1920s.” </p>
<p><strong>Navlists</strong></p>
<p>The <code>navlistPanel()</code> may be a good alternative to <code>tabsetPanel()</code> when you have many panels. A navlist presents the menu itams as a sidebar list. Here’s an example of a navlistPanel():<br>
#ui.R<br>
<code>shinyUI(fluidPage(
<p> titlePanel(&quot;Application&quot;),</p>
<p> navlistPanel(<br>
&quot;Header A&quot;,<br>
tabPanel(&quot;Item 1&quot;),<br>
tabPanel(&quot;Item 2&quot;),<br>
&quot;Header B&quot;,<br>
tabPanel(&quot;Item 3&quot;),<br>
tabPanel(&quot;Item 4&quot;),<br>
&quot;-----&quot;,<br>
tabPanel(&quot;Item 5&quot;)<br>
)<br>
))</p>
<p><strong>Exercise 10</strong></p>
<p>Transform you app by using <code>navlistPanel()</code> instead of <code>navbarPage()</code>.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a title="Building Shiny App exercises part 4" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/">Building Shiny App exercises part 4 </a></li>
<li><a title="Building Shiny App exercises part 1" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">Building Shiny App exercises part 1 </a></li>
<li><a title="Data Science for Doctors – Part 3 : Distributions" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/02/13/data-science-for-doctors-part-3-distributions/">Data Science for Doctors – Part 3 : Distributions </a></li>
<li><a target="_blank" rel="nofollow" href="http://www.r-exercises.com/start-here-to-learn-r/">Explore all our (>1000) R exercises</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.r-exercises.com/r-courses/">Find an R course using our R Course Finder</a> directory</li>
</ol>
</div>

<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://www.r-exercises.com/2017/04/30/shiny-application-layouts-exercises-part-3/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-3"> R-exercises</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 title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/jEYDX5Wwosw"></a></div></code></code>