If you can, download and run the code and data from github.com/ChrisBeeley/gapminder (the data goes in the same folder as the code) so you can get an idea of what everything does. If you want to run the program without copying the actual data and code to your computer (copying data and code is preferable so that you can play with it), just use another function to share and run applications (we will discuss this in Chapter 5, Easy JavaScript and Custom JavaScript Functions), as shown in the following code:

runGitHub("gapminder", "ChrisBeeley")

As in many Shiny applications, ui.R is by far the simpler of the two code files, and is as follows:

library(shiny)
library(leaflet)

fluidPage(
 
  titlePanel("Gapminder"),

The first thing that we do is load the leaflet() package. The leaflet() package is used for drawing interactive maps. We'll discuss it in detail later. For now, just note that it is necessary to load it in the UI in order to access a special output function that doesn't exist within Shiny—leafletOutput(). The whole interface is wrapped in fluidPage(). This is true of most, but not all, Shiny applications. We will look in detail at the basic types of Shiny page and setup in Chapter 4, Mastering Shiny's UI Functions. It performs the basic setup of the page, making it responsive and ensuring that it looks good on differently sized browsers. There is more detail on this function in Chapter 4, Mastering Shiny's UI Functions. The titlePanel() function is used to give the application a nice big title.

The next section shows the setup of the standard layout of a Shiny application. Simplified, it looks like the following code, with sidebarPanel() defining the inputs on the left and mainPanel() the inputs on the right, all wrapped in sidebarLayout():

sidebarLayout(
  sidebarPanel(
    # input controls in here
  ),
 
mainPanel(
    # outputs here
  )

Do note that keeping the inputs on the left and the outputs on the right is the typical layout, but Shiny is totally flexible. You can keep some inputs on the right if you wish, or even outputs on the left. This is just the usual setup that you will see in a simple Shiny application.

Within sidebarPanel(), we find two inputs, sliderInput() and checkboxInput(), as shown in the following code:

sliderInput(inputId = "year",
  label = "Years included",
  min = 1952,
  max = 2007,
  value = c(1952, 2007),
  sep = "",
  step = 5
),
 
checkboxInput("linear", label = "Add trend line?", value = FALSE)

The sliderInput() function allows your user to select a number, or a range, using a slider. In this case, they will be selecting a range, the range of years that they are interested in for the text summary and the time series graph. We have already seen the first two arguments, and they will become very familiar to you—inputId giving the input a name so it can be referred to as input$name (input$year in this case) and label, which gives the control a nice friendly label for the user to read so they can understand the application. You can see the other arguments, giving a minimum, a maximum, and an initial value (in this case, two, to define a range). We can optionally define the separator to separate the thousands in the numbers—in this case, setting it to nothing in order to stop the years appearing as 1,952, 2,007, and so on. Note the use of step = 5. This gives the numeric gap between each notch on the slider. If it is left as NULL, then Shiny will pick something sensible. We use 5 here because the Gapminder data is split into five-year chunks.

 The checkboxInput() function very simply gives you a tickbox that returns TRUE when ticked and FALSE when unticked. This example includes all the possible arguments, which gives it a name and label and selects the initial value.

This concludes the inputs. Let's look at the output panel, as shown in the following code:

    ), # end of sidebarPanel()
    
    mainPanel(
      tabsetPanel(
        tabPanel("Summary", textOutput("summary")),
        tabPanel("Trend", plotOutput("trend")),
        tabPanel("Map", leafletOutput("map"), 
                 p("Map data is from the most recent year in the selected range; 
                     radius of circles is scaled to life expectancy"))
      )
    )

Probably the most unfamiliar part of this code is the use of tabsetPanel(). This allows multiple frames of output to be shown on the screen and selected by the user, as is common in GUIs that support tabbed frames. Note that processing is only carried out for the currently selected tab; invisible tabs are not updated behind the scenes, but rather when they are made active. This is useful to know where some or all tabs require significant data processing. The setup is very simple, with a call to tabsetPanel() containing several calls to tabPanel() in which each of the tabs is defined with a heading and a piece of output as defined in server.R. As you can see, there are three types of output given by three different output functions—text, shown by textOutput(); a plot, shown by plotOutput(); and a map produced with the leaflet package and shown with leafletOutput() (more on which later).