Plotly in R: Piechart subplot changing domains when linked to choropleth with crosstalk

Question

Is there a way to keep a piechart subplot from changing its domain with Plotly in R using crosstalk?

The idea here is to have a choropleth map on the left side and a piechart on the right side. When I click on one country on the map, the piechart shows data from that country. I use a SharedData object and the link between both subplots works fine.

The problem is: The piechart subplot stays where it should for the first location Code in my dataframe (AUS in this case), but when I click on another country, the piechart moves to the center of the plot.

Maybe this is a bug or it's not implemented yet?

Here is my code:

library(plotly)
library(crosstalk)

df <- data.frame(Code = rep(c("AUS", "BRA", "CAN", "USA"),each = 4),
             Category = rep(c("A","B","C","D"),4),
             Values = rep(c(10,15,5,20),each=4),
             Perc = c(10, 20, 20, 50,
                      35, 5, 15, 45,
                      5, 75, 5, 15,
                      60, 30, 10, 0))

shared_data <- SharedData$new(df, key = ~Code)

p1 <- shared_data %>%
  plot_geo(z = ~Values,
           zmin=0,
           zmax=20,
           color = ~Values,
           locations = ~Code,
           visible=T)

p2 <- shared_data %>%
  plot_ly(type = "pie",
          visible = T,
          showlegend = F,
          values = ~Perc,
          labels = ~Category,
          domain = list(x = c(0.5, 1),
                        y = c(0,1)),
          hole = 0.8,
          sort = F) %>%
  layout(autosize = T, geo = list(domain = list(x = c(0.5, 1),
                                                y = c(0,1)
                                                ))
         )

sp1 <- subplot(p1, p2) %>%
  hide_legend() %>%
  hide_colorbar() %>%
 layout(xaxis = list(domain=c(0,0.5)), #adding this does not work either
         xaxis2 = list(domain=c(0.5,1)))

Answer 1

I seem to have found a workaround that answers the question.

• I removed the domain of the piechart.
• I had to plot the piechart first in the subplot (piechart goes to the left). (Explanation after the code)
• I defined the width of each subplot (smaller pie chart, larger choropleth).

Then when defining the layout of the subplot it was important to define the number of rows and columns of the subplot grid. This by itself already solves the problem, as you can play with the number of columns. For further tinkering with the pie chart size, one can then use the domain list.

Here is the code:

    g <- list(
  showframe = FALSE,
  showcoastlines = TRUE,
  coastlinecolor = toRGB("black"),
  projection = list(type = 'Mercator')
)

p1 <- shared_data %>%
  plot_geo(z = ~Values,
           zmin=0,
           zmax=20,
           color = ~Values,
           locations = ~Code,
           visible=T) %>%
  layout(autosize = T, geo = g)

 

p2 <- shared_data %>%
  plot_ly(type = "pie",
          visible = T,
          showlegend = F,
          values = ~Perc,
          labels = ~Category,
          #domain = list(x = c(0, 0.3),
          #              y = c(0,1)),
          hole = 0,
          sort = F) %>%
  layout(autosize = T, geo = g)  # I have to set up 'geo' here, otherwise I get a warning in the subplot. Probably to match 'geo' from the choropleth?

sp1 <- subplot(p2, p1, # notice I plot the piechart (p2) first
             widths=c(0.25, 0.75)) %>% # here I set up the size of each subplot
  hide_legend() %>%
  hide_colorbar() %>%
 layout(grid = list(rows = 1, 
               columns = 3#, #setting columns as 2 and changing the domain also works 
               #domain = list(x = c(0,1),
               #              y = c(0,1))
               )
   )

sp1

I could not plot the piechart on the right like I wanted because I could not find a way to set up the domain right.

On the reference to layout.grid (https://plotly.com/r/reference/layout/#layout-grid), the 'roworder' entry refers to the way grid columns are enumerated: "Note that columns are always enumerated from left to right."

I think that if they could be enumerated from right to left I would be able to put the piechart on the right and set up its domain properly.

So probably "layout.grid.columnorder" should be implemented?