Chapter 5 Advanced Plotly
(Computer Lab 4B)

Each of the data science computer labs which focus on data visualisation will contain guides on how to use the different components of the plotly package to produce engaging interactive graphs.

However, some of these data visualisations will require a bit more coding. Specifically, the process of adding buttons to your plotly graphs can be quite challenging, especially when we are just starting out.

Therefore, we provide a walkthrough of this process below, using code from previous computer labs.

We strongly recommend that you read through this section before starting Computer Lab 4B.

Note: If you have not already completed Computer Lab 3B, the following material might not make sense, so we suggest finishing that lab first, before reading any further.

5.1 Adding buttons to Plotly plots

By adding buttons to our plotly plots, we can offer an additional functionality to end users - by clicking on the buttons and selecting different options, users can dynamically shift between different presentations of our data.

In Computer Lab 4B, we add buttons to our graph that allow us to dynamically change how our penguins data is presented.

5.1.1 The updatemenus function

To add buttons to our plotly plot, we can use the updatemenus function. This is quite a complex function, and can take many arguments.

For the moment, let’s take a look at the following code chunks, and sequentially break down what is going on.

First, we specify our initial plot:

penguins_hist <- plot_ly(data = penguins, 
                         x = ~body_mass_g, 
                         color = ~sex, 
                         colors = "Set1", 
                         type = "histogram",
                         opacity = 0.6)

Next, we begin to adjust the layout to include buttons.

Note that the following individual code chunks are snippets of a larger piece of code, so won’t work by themselves.

penguins_plots <- penguins_hist %>% layout(

  updatemenus = list(
    list(y = 0.5, 
      type = "buttons", 

1. Because we are making significant modifications to our original penguins_hist plot, we assign the modified plot to a new object called penguins_plots.
2. We would like to modify our plotly plot, so we will use the pipe operator to chain a layout update to our penguin_hist histogram object.
3. We use the updatemenus function to begin making some changes - namely, we would like some button options to appear on the y-axis (with the y = 0.5 telling R the vertical location on the y-axis at which to place the buttons).

So far, hopefully not too much new information.

5.1.2 Adding a button

Next, we need to specify what the buttons we are adding will actually do! Let’s take a look at the next arguments we add to the updatemenus function.

Note that the following code chunk follows directly on from the previous code chunk.

        buttons = list(
          list(method = "restyle",
            args = list(
              list(type = list("histogram"), mode = list("markers"))),
              label = "Histogram")
    )))

1. Here, the buttons function allows us to begin specifying our buttons.
2. Because we are carrying out multiple operations, we need to include a few list() functions.
3. We use the method = "restyle" command to tell plotly we would like to make a button that modifies data or data attributes in our penguins_hist plot.
4. Specifically, we use the type = command to set the plot type to a histogram, and
5. We use the label = command to set the label used on our button.

5.1.3 Adding a second button

So far, you might be thinking, ‘well, we already had a histogram, so what’s the big deal?’. However, we have only added one button so far - we can add as many buttons as we would like! So, if we now would like a button that switches our data from being presented as a histogram, to being presented as box plots for example, we could add the following code within our buttons = list() function:

          list(method = "restyle",
            args = list(
              list(type = list("box"))),
              label = "Box Plots"))

5.1.4 Bringing it all together

If we now bring all these code chunks together, our code looks like this:

penguins_plots <- penguins_hist %>% layout(

  updatemenus = list(
    list(y = 0.5, type = "buttons", 
         buttons = list(
           
          list(method = "restyle",
            args = list(
              list(type = list("histogram"), mode = list("markers"))),
              label = "Histogram"),
      
          list(method = "restyle",
            args = list(
              list(type = list("box"))),
              label = "Box Plots"))
    )))

Note that the spacing in the code is not strictly necessary, but has been chosen with the aim of making the different arguments clearer.

If we run our new penguin_plots object, we can assess the results of our work! Try clicking the two buttons on the y-axis.

penguins_plots

In Computer Lab 4B, we will build an interactive plotly plot with multiple buttons - by reading through this content first, you should be well prepared to tackle this challenge.