Better onRender hover example

Author: cpsievert

inst/examples/onRenderHover/index.Rmd

@@ -8,27 +8,43 @@ output: html_document
 ```{r, message = FALSE, warning = FALSE}
 library(plotly)
 library(htmlwidgets)
-plot_ly(x = 1:10, y = rnorm(10), marker = list(color = rep("black", 10))) %>% 
-  as.widget() %>% 
+
+set.seed(1056)
+
+nPatients <- 100
+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))
+# `color=factor(uin)`` is here just to ensure we get one trace
+# for each value of uin
+p <- plot_ly(
+  df, x = visit, y = fev1_perc, color = factor(uin), 
+  mode = "markers+lines", marker = c1, line = c2
+) %>% layout(hovermode = "closest", showlegend = FALSE)
+
+as.widget(p) %>%
   onRender('
-  function(el, x) { 
-    var graphDiv = document.getElementById(el.id);
-    // color this point red on hover
-    el.on("plotly_hover", function(data) { 
-      var trace = data.points[0].curveNumber;
-      var pt = data.points[0].pointNumber;
-      var marker = x.data[trace].marker;
-      marker.color[pt] = "red";
-      Plotly.restyle(graphDiv, marker, trace)
-    })
-   // color this point black on unhover
-   el.on("plotly_unhover", function(data) { 
-      var trace = data.points[0].curveNumber;
-      var pt = data.points[0].pointNumber;
-      var marker = x.data[trace].marker;
-      marker.color[pt] = "black";
-      Plotly.restyle(graphDiv, marker, trace)
-    })
-  }
-')
+    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);
+     })
+    } 
+  ')
 ```