I am working with the R programming language. I am trying to replicate the following tutorial with some fake data that I generated: https://plotly.com/r/dropdowns/.

That is, I generated some fake data and made 4 scatter plots. Using the "plotly" library, I then want to "attach" these 4 plots together and let the user "toggle" (switch, shuffle) between these graphs.

I have attached the code below:

#load libraries 

library(plotly)
library(MASS)
library(dplyr)


# create data

x <- sample( LETTERS[1:4], 731, replace=TRUE, prob=c(0.25, 0.25, 0.25, 0.25) )
y <- rnorm(731,10,10)
z <- rnorm(731,5,5)

    df <- data.frame(x,y, z)
df$x = as.factor(df$x)




fig = plot_ly()

fig = fig %>%  add_trace( data = df[which(df$x == "A"),], 
                          type = "scatter", mode = "markers", x = ~ y, y = ~z, 
                          name= "graph1")  %>% layout(title = list(text = "graph 1"))

fig = fig %>%  add_trace( data = df[which(df$x == "B"),], 
                          type = "scatter", mode = "markers", x = ~ y, y = ~z, 
                          name= "graph2") %>% layout(title = list(text = "graph 2"))


fig = fig %>%  add_trace( data = df[which(df$x == "C"),], 
                          type = "scatter", mode = "markers", x = ~ y, y = ~z, 
                          name= "graph2") %>% layout(title = list(text = "graph 3"))


fig = fig %>%  add_trace( data = df[which(df$x == "D"),], 
                          type = "scatter", mode = "markers", x = ~ y, y = ~z, 
                          name= "graph2") %>% layout(title = list(text = "graph 4"))



final = fig %>% layout(xaxis = list(domain = c(0.1, 1)),
               yaxis = list(title = "y"),
               updatemenus = list(
                 list(
                   y = 0.7,
                   buttons = list(
                     
                     list(method = "restyle",
                          args = list("visible", list(FALSE, FALSE, TRUE, FALSE)),
                          label = "A"),
 list(method = "restyle",
                          args = list("visible", list(FALSE, FALSE, TRUE, FALSE)),
                          label = "B"),

 list(method = "restyle",
                          args = list("visible", list(FALSE, FALSE, TRUE, FALSE)),
                          label = "C"),
                     list(method = "restyle",
                          args = list("visible", list(FALSE, FALSE, FALSE, TRUE)),
                          label = "D")))))

#view final file
final

#save
library(htmlwidgets)
saveWidget( final, "file.html")

The code seems to run successfully. However, there seems to be a few problems.

Problem 1) When the user "views" the plotly object for the first time:

#view final file
final

Even though the drop down menu is selected as "A", observations corresponding to all 4 groups (4 different colors) all appear on the graph. Also, the title "graph 4" appears instead of "graph 1".

Problem 2) When you try to toggle between all 4 graphs:

None of the titles change at all. Also, the first three graphs appear to be identical.

Can someone please show me what am I doing wrong? Is there a way to fix this?

Thanks

I think this tutorial from plotly explains some of the issues in your code. Probably worth having a look!

The title is an attribute of the whole plot and not of each individual trace of the plot. So when you are setting layout(title='graph #') when you add each trace to the plot, you are setting it for the whole plot and overriding the value set in the previous trace. Since the last one you set is layout(title='graph 4'), this is the one you see when the plot is created.

You need to set the initial value of the visible attribute when you create each trace, so when the plot is created you see only one trace. In this case, when you create the traces, you need to set visible=TRUE for A and visible=FALSE for the rest.

Because you want to update the title of the plot, you cannot use the restyle method (take a look at the tutorial link above). You have to use the update method, which is used to change both the attributes of each trace and also to change the layout of the plot. With the update method, the value of arg is a list of lists. The first element of the main list is a list with the named values for updating the traces (just as you did before with restyle). The second element of the main list is another list with the named values for changing the layout.

Here is my code.

fig = plot_ly() %>%  
  # for each trace set the initial visibility  
  add_trace(data = df[which(df$x == "A"),], 
            type = "scatter", mode = "markers", x = ~ y, y = ~z, 
            name= "graph1", visible=T) %>%
  add_trace(data = df[which(df$x == "B"),], 
            type = "scatter", mode = "markers", x = ~ y, y = ~z, 
            name= "graph2", visible=F) %>%  
  add_trace(data = df[which(df$x == "C"),], 
            type = "scatter", mode = "markers", x = ~ y, y = ~z, 
            name= "graph3", visible=F) %>%  
  add_trace(data = df[which(df$x == "D"),], 
            type = "scatter", mode = "markers", x = ~ y, y = ~z, 
            name= "graph4", visible=F) %>%
  # set initial value of title in the layout
  layout(title="Graph 1",
         xaxis = list(domain = c(0.1, 1)),
         yaxis = list(title = "y"),
         updatemenus = list(
           list(y = 0.7,
                buttons = list(
                  list(method = "update",
                       args = list(list(visible =c(TRUE, FALSE, FALSE, FALSE)),
                                   list(title='Graph 1')),
                       label = "A"),
                  list(method = "update",
                       args = list(list(visible =c(FALSE, TRUE, FALSE, FALSE)),
                                   list(title='Graph 2')),
                       label = "B"),
                  list(method = "update",
                       args = list(list(visible =c(FALSE, FALSE, TRUE, FALSE)),
                                   list(title='Graph 3')),
                       label = "C"),
                  list(method = "update",
                       args = list(list(visible =c(FALSE, FALSE, FALSE, TRUE)),
                                   list(title='Graph 4')),
                       label = "D")))))

#view final file
fig

There were other issues that iI fixed like all traces had the same name ('graph2') and the value of visible was always list(FALSE, FALSE, TRUE, FALSE) (which would result in always the same trace being shown). But I believe these were typos.