Shiny Application Layouts part 1

Welcome to the first part of our new series “Shiny Application Layouts”. As you can understand from the title we will see how to organize the output of our application in various ways. For this reason we will build together 10 simple apps that will help you understand what kind of interfaces shiny provides.

In this part we will see tabsets which is one of the simplest ways to organize our app. This part can be useful for you in two ways.
First of all, as already mentioned, you can see different ways to enhance the appearance and the utility of your shiny app.
Secondly you can make a revision on what you learnt in Shiny Apps series as we will build basic shiny staff in order to present it in the proper way.

In part 1 we will use the dataset data which is loaded in R by default and we will create three tabPanel. Each one of them with its own utility.

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!

Answers to the exercises are available here.

Tabsets

We use tabset in our application application to organize output. Firstly install the shiny package and then call it in a new r script of your working directory.
You can use install.packages() and library() for these.

Exercise 1

Install and load the shiny package.

Tab Panels

Tabsets can be created by calling the tabsetPanel function. Each tab panel includes a list of output elements.

In this case we will create a histogram, a summary and table view of the data, each rendered on their own tab.

Let’s start by creating the basic interface like the example below: As we know the UI includes three basic parts (headerPanel, sidebarPanel, mainPanel).
#ui.R
library(shiny) shinyUI(pageWithSidebar( headerPanel("Example"), sidebarPanel(), mainPanel() ))
#server.R
shinyServer(function(input, output) {})

Exercise 2

Create the basic interface, name it “APP 1”.

Secondly let’s fill our sidebar with some widgets. We will create radioButtons and sliderInput to control the random distribution and the number of observations. Look at the example.
#ui.R
library(shiny) shinyUI(pageWithSidebar( headerPanel("Example"), sidebarPanel( radioButtons("cho", "Choice:", list("One" = "one", "Two" = "two", "Three" = "three", "Four" = "four" br(), sliderInput("n", "Number of observations:", value = 50, min = 1, max = 100) ), mainPanel() ))
#server.R
shinyServer(function(input, output) {})

Exercise 3

Put radioButtons inside sidebarPanel.The four choices will be “Normal”, “Uniform”, “Log-Normal”, “Exponential” and the name of it “Distributions”.

Exercise 4

Put sliderInput under radioButtons. Its values should be from 1 to 1000 and the selected value should be 500. Name it “Number of observations”.

It is time to create three tabsets in order to place there a plot, summary, and table view of our dataset. More specifically we will use a plotOutput, a verbatimTextOutput and a tableOutput. Look at the code and the build your own.
#ui.R
tabsetPanel( tabPanel("Plot", plotOutput("plot")), tabPanel("Summary", verbatimTextOutput("summary")), tabPanel("Table", tableOutput("table")) )

Exercise 5

Create your tabsetPanel which will include the tabPanel.

Exercise 6

Create the first tabPanel for your Plot.Use plotOutput.
Create the second tabPanel for your Summary Statistics.Use verbatimTextOutput.
Create the third tabPanel for your Table.Use tableOutput.

Tabs and Reactive Data

Working with tabs into our user-interface magnifies the importance of creating reactive expressions for our data. In this example each tab provides its own view of the dataset. We have to mention that the bigger the dataset the slower our app will be.
We should use a Reactive expression to generate the requested distribution. This is called whenever the inputs change. The renderers are defined below then all use the value computed from this expression.
#server.R
data <- reactive({ dist <- switch(input$dist, norm = rnorm, unif = runif, lnorm = rlnorm, exp = rexp, rnorm) dist(input$n) })

Exercise 7

Put data() in the correct place of your code in order to activate it.

Now we should generate a plot of the data. Note that the dependencies on the data are both tracked by the dependency graph.

As you can see from the code below we use the renderPlot function to create the reactive plot and inside there we use the hist function in order to create the histogram.
#server.R
output$plot <- renderPlot({ dist <- input$dist n <- input$n hist(data()) })

Exercise 8

Create a reactive histogram inside the tabPanel “Plot”

Let’s print a summary of the data in the tabPanel “Summary”. As you can see below we will use renderPrint for our case and the function summary.
#server.R
output$summary <- renderPrint({ summary(data()) })

Exercise 9

Print tha dataset’s summary in the tabPanel “Summary”.

Last but not least we will create an HTML table view of the data. For this we will use renderTable and data.frame function.
#server.R
output$table <- renderTable({ data.frame(x=data()) })

Exercise 10

Create a data table in the tabPanel “Table”.