<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/building-shiny-app-exercises-part-6/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2017/02/07/building-shiny-app-exercises-part-6/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-6"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><strong><a target="_blank" rel="nofollow" href="http://r-exercises.com/wp-content/uploads/2017/02/screenshot-127.0.0.1-6525-2017-02-06-21-12-26.png?x61433"><img sizes="(max-width: 300px) 100vw, 300px" alt="" class="wp-image-4466" src="https://i2.wp.com/r-exercises.com/wp-content/uploads/2017/02/screenshot-127.0.0.1-6525-2017-02-06-21-12-26-300x190.png?resize=300%2C190" data-recalc-dims="1"></a>RENDER FUNCTIONS</strong></p>
<p>In the sixth part of our series we will talk about the <code>renderPlot</code> and the <code>renderUI</code> function and then we will be ready to create our first visualization. (Find part 1-5 <a target="_blank" rel="nofollow" href="http://r-exercises.com/tag/shiny-apps/">here</a>).<br>
We are going to create a simple interactive scatterplot that will help us see the clusters that are created when we run the k-means algorithm on our dataset. Read the examples below to understand how to activate a <code>renderPlot</code> function and the 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/02/07/building-shiny-app-solutions-part-6/">here</a>.</p>
<p>If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.</p>
<p><strong>DESCRIPTIVE STATISTICS</strong></p>
<p>As in every statistical application it is wise to apply descriptive statistics on your dataset and also provide this information to user in an easy-readable way. So, first of all we will place a Data Table inside the “SUMMARY” <code>tabPanel</code>. The example below can be your guide.</p>
<p>#ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
sidebarLayout(<br>
sidebarPanel(<br>
),<br>
mainPanel(<br>
dataTableOutput(&quot;Table&quot;)<br>
)<br>
)))</code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {<br>
sum&lt;-as.data.frame.array(summary(iris))<br>
output$Table &lt;- renderDataTable(sum)<br>
})</code></p>
<div>
<aside><img src="http://r-exercises.com/2017/02/07/building-shiny-app-exercises-part-6/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-6"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a target="_blank" rel="nofollow" href="http://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 1</strong></p>
<p>Create a Data Table(“Table2”) with the descriptive statistics of your dataset. HINT: Use <code>summary</code>, <code>as.data.frame.array</code> and <code>renderDataTable</code>.</p>
<p><strong>renderPlot</strong></p>
<p>The <code>renderPlot</code> function enders a reactive plot that is suitable for assigning to an output slot. The general form of the function that generates the plot is below:</p>
<p><code>renderPlot(expr, width = &quot;auto&quot;, height = &quot;auto&quot;, res = 72, ...,<br>
env = parent.frame(), quoted = FALSE, execOnResize = FALSE,<br>
outputArgs = list())</code></p>
<p>The example below shows you how to create a simple scatterplot between two variables of the iris dataset(“Sepal Length” and “Sepal Width”).</p>
<p># ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
sidebarLayout(<br>
sidebarPanel(<br>
),<br>
mainPanel(<br>
plotOutput(&quot;plot1&quot;)<br>
)<br>
)))</code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {<br>
output$plot1 &lt;- renderPlot({<br>
plot(iris$Sepal.Length,iris$Sepal.Width)<br>
})<br>
})</code></p>
<p>Initially remove <code>renderImage</code> and <code>radioButtons</code> from the <code>tabPanel</code> “K means”.</p>
<p><strong>Exercise 2</strong></p>
<p>Add a scatterplot inside the <code>tabPanel</code> “K Means” between two variables of the iris dataset.</p>
<p><strong>INTERACTIVE PLOTS</strong></p>
<p>Shiny has built-in support for interacting with static plots generated by R’s base graphics functions,this makes it easy to add features like selecting points and regions, as well as zooming in and out of images.<br>
To get the position of the mouse when a plot is clicked, you simply need to use the click option with the <code>plotOutput</code>. For example, this app will print out the x and y coordinate position of the mouse cursor when a click occurs.</p>
<p>#ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
sidebarLayout(<br>
sidebarPanel(),<br>
mainPanel(<br>
plotOutput(&quot;plot1&quot;, click = &quot;plot_click&quot;),<br>
verbatimTextOutput(&quot;info&quot;)<br>
)<br>
)))</code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {<br>
output$plot1 &lt;- renderPlot({<br>
plot(iris$Sepal.Length,iris$Sepal.Width)<br>
})<br>
output$info &lt;- renderText({<br>
paste0(&quot;x=&quot;, input$plot_click$x, &quot;\ny=&quot;, input$plot_click$y)<br>
})<br>
})</code></p>
<p><strong>Exercise 3</strong></p>
<p>Add click inside the <code>plotOutput</code> you just created. Name it “mouse”.</p>
<p><strong>Exercise 4</strong></p>
<p>Add a <code>verbatimTextOutput</code> inside the “K Means” <code>tabPanel</code>,under the <code>plotOutput</code> you created before. Name it “coord”.</p>
<p><strong>Exercise 5</strong></p>
<p>Make “x” and “y” coordinates appear in the pre-tag you just created. HINT : Use <code>renderText</code> and <code>paste0</code> and do not forget to activate it with the <code>submitButton</code>.</p>
<p><strong>Exercise 6</strong></p>
<p>Set <code>height</code> = “auto” and <code>width</code> = “auto”.</p>
<p><strong>PLOT ANNOTATION</strong></p>
<p>This function can be used to add labels to a plot. Its first four principal arguments can also be used as arguments in most high-level plotting functions. They must be of type character or expression. In the latter case, quite a bit of mathematical notation is available such as sub- and superscripts, greek letters, fraction, etc.<br>
<code>title(main = NULL, sub = NULL, xlab = NULL, ylab = NULL,<br>
line = NA, outer = FALSE, ...)</code><br>
Look at the example below:<br>
# ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
sidebarLayout(<br>
sidebarPanel(),<br>
mainPanel(<br>
plotOutput(&quot;plot1&quot;, click = &quot;plot_click&quot;),<br>
verbatimTextOutput(&quot;info&quot;)<br>
)<br>
))) </code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {<br>
output$plot1 &lt;- renderPlot({<br>
plot(iris$Sepal.Length,iris$Sepal.Width,main = &quot;SCATTER PLOT&quot;,sub = &quot;K Means&quot;,xlab=&quot;Sepal Length&quot;,ylab = &quot;Sepal Width&quot;)<br>
})<br>
output$info &lt;- renderText({<br>
paste0(&quot;x=&quot;, input$plot_click$x, &quot;\ny=&quot;, input$plot_click$y)<br>
})<br>
})</code></p>
<p><strong>Exercise 7</strong></p>
<p>Set scatterplot title to “K-Means”, the X-axis label to “Petal Length” and the Y-axis label to “Petal Width”. HINT: Use <code>main</code>,<code>xlab</code>,<code>ylab</code>.</p>
<p>You can also modify and set other graphical parameters related to the title and subtitle like the example below:</p>
<p># ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
sidebarLayout(<br>
sidebarPanel(),<br>
mainPanel(<br>
plotOutput(&quot;plot1&quot;, click = &quot;plot_click&quot;),<br>
verbatimTextOutput(&quot;info&quot;)<br>
)<br>
))) </code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {<br>
output$plot1 &lt;- renderPlot({<br>
plot(iris$Sepal.Length,iris$Sepal.Width,main = &quot;SCATTER PLOT&quot;,sub = &quot;K Means&quot;,xlab=&quot;Sepal Length&quot;,ylab = &quot;Sepal Width&quot;,<br>
cex.main = 3, font.main= 5, col.main= &quot;green&quot;,<br>
cex.sub = 0.65, font.sub = 4, col.sub = &quot;orange&quot;)<br>
})<br>
output$info &lt;- renderText({<br>
paste0(&quot;x=&quot;, input$plot_click$x, &quot;\ny=&quot;, input$plot_click$y)<br>
})<br>
})</code></p>
<p><strong>Exercise 8</strong></p>
<p>Give values to the rest of the graphical parameters of the title like the example above and get used to them. HINT: Use <code>cex.main</code>, <code>font.main</code> and <code>col.main</code>.</p>
<p><strong>renderUI</strong></p>
<p><code>renderUI(expr, env = parent.frame(), quoted = FALSE, outputArgs = list())</code></p>
<p>Makes a reactive version of a function that generates HTML using the Shiny UI library. As you can see in the example below this expression returns a tag object.</p>
<p># ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
sidebarLayout(<br>
sidebarPanel( uiOutput(&quot;Controls&quot;)),<br>
mainPanel(<br>
plotOutput(&quot;plot1&quot;, click = &quot;plot_click&quot;),<br>
verbatimTextOutput(&quot;info&quot;)<br>
)<br>
))) </code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {<br>
output$plot1 &lt;- renderPlot({<br>
plot(iris$Sepal.Length,iris$Sepal.Width,main = &quot;SCATTER PLOT&quot;,sub = &quot;K Means&quot;,xlab=&quot;Sepal Length&quot;,ylab = &quot;Sepal Width&quot;,<br>
cex.main = 2, font.main= 4, col.main= &quot;blue&quot;,<br>
cex.sub = 0.75, font.sub = 3, col.sub = &quot;red&quot;)<br>
})<br>
output$info &lt;- renderText({<br>
paste0(&quot;x=&quot;, input$plot_click$x, &quot;\ny=&quot;, input$plot_click$y)<br>
})<br>
output$Controls &lt;- renderUI({<br>
tagList(<br>
sliderInput(&quot;n&quot;, &quot;N&quot;, 1, 1000, 500),<br>
textInput(&quot;label&quot;, &quot;Label&quot;)<br>
)<br>
})<br>
})</code></p>
<p><strong>Exercise 9</strong></p>
<p>Put a <code>uiOutput</code> inside <code>tabPanel </code>“K-Means” and name it “All”. Then create its output in server.R with a <code>tagList</code> into it. HINT: Use <code>uiOutput</code>, <code>renderUI</code> and <code>tagList</code>.</p>
<p><strong>Exercise 10</strong></p>
<p>Remove the <code>submitButton</code> and move the <code>sliderInput</code> and the <code>textOutput</code> from the ui.R into the <code>tagList</code>.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a title="Building Shiny App exercises part 1" target="_blank" rel="nofollow" href="http://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 2" target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/18/building-shiny-app-exercises-part-2/">Building Shiny App exercises part 2 </a></li>
<li><a title="Building Shiny App exercises part 3" target="_blank" rel="nofollow" href="http://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://r-exercises.com/start-here-to-learn-r/">Explore all our (>1000) R exercises</a></li>
<li><a target="_blank" rel="nofollow" href="http://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://r-exercises.com/2017/02/07/building-shiny-app-exercises-part-6/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-6"> 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/CFfBmUMdoos"></a></div>