Ggplotly scatterplot: User clicks one point and all other points become gray

Plotly R, MATLAB, Julia, Net Plotly R
1

I am trying to create an interactive scatterplot using ggplotly() and the onRender() function from htmlwidgets R package. All points in the scatterplot are black, but when a user clicks on one point, then I would like all other points to become gray. I have been trouble-shooting by running the below code in RStudio, and then opening it in Chrome Developer tools.

library(plotly)
library(htmlwidgets)

set.seed(1)
data <- data.frame(ID = paste0(“ID”,1:20), x = runif(20), y = runif(20))
data$ID <- as.character(data$ID)

p <- ggplot(data = data, aes(x=x,y=y)) + geom_point(size=0.5)

ggplotly§ %>%
onRender('
function(el, x) {
var graphDiv = document.getElementById(el.id);
// reduce the opacity of every trace except for the hover one
el.on(“plotly_click”, function(e) {
Plotly.restyle(graphDiv, “opacity”, 1)
var traces = [];
for (var i = 0; i < x.data[0].text.length; i++) {
if (i !== e.points[0].pointNumber){
traces.push(i);
}
}

       console.log(traces)
       Plotly.restyle(graphDiv, "opacity", 0.2, traces);
       })
       }
       ')

When I look at the traces object, it indeed lists 19 integers, showing that it successfully stored all but one point. However, my Plotly.restyle leads to an error: “Uncaught bad container” at plotly-latest.min.js:51.

I am very unsure how to trouble-shoot this. I would be very interested to know what is causing this error, how I can fix it, and maybe what resources would be good for me to view as I am trying to add more to this type of interactive plot. Thank you for any ideas you may have!