<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-2/"></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/26/shiny-application-layout-exercises-part-2/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layout-exercises-part-2"> 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://i1.wp.com/www.r-exercises.com/wp-content/uploads/2017/03/logit-exercises1-2.png"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-4787" src="https://i2.wp.com/www.r-exercises.com/wp-content/uploads/2017/03/logit-exercises1-2-150x150.png?resize=150%2C150" data-recalc-dims="1"></a><strong>SHINY APPLICATION LAYOUTS-PLOT PLUS COLUMNS</strong></p>
<p>In the second part of our series we will build another small shiny app but use another UI.</p>
<p>More specifically we will present the example of a UI with a plot at the top and columns at the bottom that contain the inputs that drive the plot. For our case we are going to use the <code>diamonds</code> dataset to create a Diamonds Analyzer 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 the <a target="_blank" rel="nofollow" href="http://www.r-exercises.com/tag/shiny-apps">“Building Shiny App”</a> series as we will build basic shiny stuff 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 your skills with the exercise set we prepared for you. Lets begin!</p>
<p>Answers to the are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/04/26/shiny-application-layouts-solutions-part-2/">here</a>.</p>
<p><strong>Shiny Installation</strong></p>
<p>In order to create the app we have to install and load the package <code>shiny</code>.</p>
<p><strong>Exercise 1</strong></p>
<p>Install and load <code>shiny</code>.</p>
<p><strong>Grid Layout</strong></p>
<p>The <code>sidebarLayout</code> uses Shiny’s grid layout functions. Rows are created by the <code>fluidRow</code> function and include columns defined by the <code>column</code> function. Column widths should add up to 12 within a <code>fluidRow</code>.<br>
The first parameter to the <code>column </code>function is it’s <code>width</code>. You can also change the position of columns to decide the location of UI elements. You can put columns to the right by adding the <code>offset</code> parameter to the <code>column</code> function. Each unit of offset increases the left-margin of a column by a whole column.</p>
<p>Now let’s begin to build our UI. First of all we will place the <code>fluidpage</code> with a <code>title</code> as below:</p>
<p>#ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
  title = &quot;Diamonds&quot;,<br>
h4(&quot;Diamonds Analyzer&quot;)
<p>))<br>
#server.R<br>
<code>library(shiny)<br>
function(input, output) {}</code></p>
<p><strong>Exercise 2</strong></p>
<p>Create the initial UI of your app and name it “Diamonds Analyzer”.</p>
<p>You can use the <code>fluidrow</code> function with the <code>column</code> function of <code>width</code> =2 inside of it like this:<br>
#ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
  title = &quot;Diamonds&quot;,<br>
h4(&quot;Diamonds Analyzer&quot;),<br>
  fluidRow(column(2),<br>
           column(2),<br>
           )
<p>))</p>
<p><strong>Exercise 3</strong></p>
<p>Create a <code>fluidrow</code> with two columns of <code>width</code> = 4 inside it. <strong>NOTE</strong>: Do not expect to see something yet.</p>
<p>Now it is time to fill these columns with some tools that will help us determine the variables that we are going to use for our plot.<br>
In the first 4 columns we will put a <code>selectInput</code> as the code below.<br>
#ui.R<br>
<code>fluidRow(column(4,<br>
                  h4(&quot;Variable X&quot;),<br>
                  selectInput('x', 'X', names(diamonds)))</code></p>
<p><strong>Exercise 4</strong></p>
<p>Put a <code>selectInput</code> in the first 4 columns of your UI. Name it “Variable X”. HINT:Use <code>names</code> to get the names of the dataset <code>diamonds</code> as inputs.</p>
<p>Now let’s move to the next four columns. We are going to put in there another <code>selectInput</code> and select the second of the dataset’s names as default. We are also going to see what <code>offset</code> does by setting it to 1 and then deactivating it again like the example below. You can use the code as it is or change the parameters given to understand the logic behind its use.<br>
#ui.R<br>
<code>offset = 1,<br>
      selectInput('y', 'Y', names(dataset), names(dataset)[[2]])</code></p>
<p><strong>Exercise 5</strong></p>
<p>Create a <code>selectInput</code> from <code>column</code> 5 to <code>column</code> 8. Choose the second of the dataset’s name as default. Name it “Variable Y”. HINT: Use <code>names</code> to get the names of the dataset <code>diamonds</code> as inputs. </p>
<p><strong>Exercise 6</strong></p>
<p>Set the <code>offset</code> parameter to 1 from columns 5 to 8.</p>
<p>Now let’s call our <code>plot</code> and put it on the top of our UI. Look at the example below.</p>
<p><strong>Exercise 7</strong></p>
<p>Place the <code>plot</code> on the top of your UI. <strong>HINT</strong>: Use <code>plotOutput</code> and <code>hr</code>. <strong>NOTE</strong>: You are not going to see the <code>plot</code> in your UI because you have not created the server side yet.</p>
<p>We are going to create a reactive expression in order to combine the selected variables into a new data frame.Look at the example:<br>
#server.R<br>
<code>selectedData &lt;- reactive({<br>
    diamonds[, c(input$x, input$y)]<br>
  })</code></p>
<p><strong>Exercise 8</strong></p>
<p>Create a reactive expression in order to combine the selected variables into a new data frame. <strong>HINT</strong>: Use <code>reactive</code>.</p>
<p>Now plot your new data frame like the example:<br>
#server.R<br>
<code>output$plot &lt;- renderPlot({<br>
    plot(selectedData())<br>
  })</code></p>
<p><strong>Exercise 9</strong></p>
<p>Plot your data frame. <strong>HINT</strong>: Use <code>renderPlot</code>.</p>
<p>As mentioned before the <code>width</code> of our UI is equal to 12 columns. So what is goint to happen if we a add a new column of <code>width</code> = 4 next to the other two? You have to find out in order to understand better how it works.</p>
<p><strong>Exercise 10</strong></p>
<p>Create a new <code>selectInput</code> and try to put it next to “Variable Y”. Try to explain the result. <strong>NOTE</strong>: You do not have to connect it with your <code>plot</code>.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<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="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 3" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/25/building-shiny-app-exercises-part-3/">Building Shiny App exercises part 3 </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/26/shiny-application-layout-exercises-part-2/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layout-exercises-part-2"> 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/dvS3VXDsXDw"></a></div></code></code>