Using plotly with onRender

In plotly: Create Interactive Web Graphics via 'plotly.js'

library(plotly)
library(htmlwidgets)

set.seed(1056)

nPatients <- 50
nVisits <- 10

df <- data.frame(
  fev1_perc = rnorm(n = nPatients * nVisits, mean = 100, sd = 10),
  uin = rep(seq(nPatients), each = nVisits),
  visit = rep(seq(nVisits), nPatients)
)
c1 <- list(color = toRGB("steelblue", 0.5))
c2 <- list(color = toRGB("orange", 0.5))

# The color mapping is used only to generate multiple traces 
# (which makes it easier to highlight lines on the JS side)
df %>%
  plot_ly(
    x = ~visit, y = ~fev1_perc, split = ~factor(uin), marker = c1, line = c2
  ) %>% 
  layout(hovermode = "closest", showlegend = FALSE) %>%
  onRender('
    function(el, x) { 
      var graphDiv = document.getElementById(el.id);
      // reduce the opacity of every trace except for the hover one
      el.on("plotly_hover", function(e) { 
        var traces = [];
        for (var i = 0; i < x.data.length; i++) {
          if (i !== e.points[0].curveNumber) traces.push(i);
        }
        Plotly.restyle(graphDiv, "opacity", 0.2, traces);
      })
     el.on("plotly_unhover", function(e) { 
       var traces = [];
       for (var i = 0; i < x.data.length; i++) traces.push(i);
       Plotly.restyle(graphDiv, "opacity", 1, traces);
     })
    } 
  ')

plotly documentation built on May 29, 2024, 2:23 a.m.