🏥 🏭 Working on the COVID-19 response in Canada? Plotly & the Canadian government can help you and your organization. Learn more and get in touch.

Different logo image for each frame

Hi,

Let’s say I have this kind of data and I want to plot it using frames. I would also like to add to each frame a product photo, so it’s known hot it looks. I’m trying to use logo solution, but that is static over all frames. Here in example see apple image at top left corner, I would like to be different for each frame.

Do you know a way how to make it dynamic as frame changes?

data <- data.frame(product = c(rep("product_1", 10), 
                               rep("product_2", 10), 
                               rep("product_3", 10)),
                 size = c(rep(1:10, 3)),
                 scenario_1 = c(runif(30, 0, 1)), 
                 scenario_2 = c(runif(30, 0, 1)), 
                 scenario_3 = c(runif(30, 0, 1)))

cols_to_plot <- c("scenario_1", 
                  "scenario_2", 
                  "scenario_3")


plot <- plotly::plot_ly()

for(k in 1:length(cols_to_plot)) {
  data_k <- data.frame(scenario = data[[cols_to_plot[k]]],
                       size = data$size,
                       product = data$product) %>%
    dplyr::mutate(scenario = tidyr::replace_na(scenario, 0))
  
  plot <- plotly::add_trace(plot, 
                            y = ~scenario, 
                            x = ~size,
                            frame =~product,
                            data = data_k, 
                            type="scatter",
                            mode="lines",
                            name = cols_to_plot[k]) 
}

plot %>%
  plotly::animation_opts(1000,
                         easing = "elastic",
                         redraw = TRUE) %>%
  plotly::layout(
    title = paste(title), 
    images = list(
      source = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ0gg14eWlJdTfMs27Ec2JqnnE8lI4I40-XJ_1dQoxv498Oq_Nh",
      xref = "paper",
      yref = "paper",
      x= 0,
      y= 1,
      sizex = 0.2,
      sizey = 0.2,
      opacity = 0.8))