Shiny: How to change the shape and/or size of the clicked point?

Question

I would like to change the shape and size of the clicked point in the below plot. How to achieve it? For this toy plot, I have reduced the number of points from original 100k to 2k. So, the expected solution should be highly scalable and do not deviate from the original plot i.e., all the colors before and after the update of the click point should be the same.

library(shiny)
library(plotly)

df <- data.frame(X=runif(2000,0,2), Y=runif(2000,0,20), 
                 Type=c(rep(c('Type1','Type2'),600),
                        rep(c('Type3','Type4'),400)),
                 Val=sample(LETTERS,2000,replace=TRUE))

# table(df$Type, df$Val)

ui <- fluidPage(
  title = 'Select experiment',
  sidebarLayout(
    sidebarPanel(
      checkboxGroupInput("SelType", "Select Types to plot:",
                  choices = unique(df$Type),
                  selected = NA)
    ),
    mainPanel(
      plotlyOutput("plot", width = "400px"),
      verbatimTextOutput("click")
    )
  )
)

server <- function(input, output, session) {

  output$plot <- renderPlotly({
    if(length(input$SelType) != 0){
      df <- subset(df, Type %in% input$SelType)
      p <- ggplot(df, aes(X, Y, col = as.factor(Val))) + 
        geom_point()
    }else{
      p <- ggplot(df, aes(X, Y, col = as.factor(Val))) +
        geom_point()
    }
    ggplotly(p)  %>% layout(height = 800, width = 800)

  })

  output$click <- renderPrint({
    d <- event_data("plotly_click")
    if (is.null(d)) "Click events appear here (double-click to clear)" 
    else cat("Selected point associated with value: ", d$Val)
  })

}

shinyApp(ui, server)

A related question has been asked here, but that approach of highlighting the point with a color does not work(when the number of levels of a variable is high, it is difficult to hard code a color which might be already present in the plot).

Maximilian Peters · Accepted Answer · 2017-09-01T12:04:36.637

Plotly's restyle function won't help us here but we can still use the onclick event together with a little bit of JavaScript. The code has acceptable performance for 10,000 points.

We can get the point which was clicked on in JavaScript using:

var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[data.points[0].curveNumber].getElementsByClassName('point')[data.points[0].pointNumber];

(scatterlayer is the layer where all the scatterplot elements are located, scatter[n] is the n-th scatter plot and point[p] is the p-th point in it)

Now we just make this point a lot bigger (or whatever other shape/transformation you want):

point.setAttribute('d', 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z');

In order to get the possibility to revert everything, we store the unaltered info about the point together with the rest of the Plotly information:

var plotly_div = document.getElementsByClassName('plotly')[0];
plotly_div.backup = {curveNumber: data.points[0].curveNumber,
                     pointNumber: data.points[0].pointNumber,
                     d: point.attributes['d'].value
                    }

and later we can restore the point:

var old_point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[plotly_div.backup.curveNumber].getElementsByClassName('point')[plotly_div.backup.pointNumber]
old_point.setAttribute('d', plotly_div.backup.d);

Now we can add all the code to the plotly widget.

javascript <- "
function(el, x){
  el.on('plotly_click', function(data) {
    var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[data.points[0].curveNumber].getElementsByClassName('point')[data.points[0].pointNumber];
    var plotly_div = document.getElementsByClassName('plotly')[0];
    if (plotly_div.backup !== undefined) {
      var old_point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[plotly_div.backup.curveNumber].getElementsByClassName('point')[plotly_div.backup.pointNumber]
      if (old_point !== undefined) {
        old_point.setAttribute('d', plotly_div.backup.d);
      }
    }
    plotly_div.backup = {curveNumber: data.points[0].curveNumber,
                         pointNumber: data.points[0].pointNumber,
                         d: point.attributes['d'].value,
                         style: point.attributes['style'].value
                        }

    point.setAttribute('d', 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z');
  });
}"

[...]

ggplotly(p) %>% onRender(javascript)

Alternatively you could make a new SVG element based on the location of the clicked point but in the color and shape you would like.

You can try it here without R/Shiny.

//create some random data
var data = [];
for (var i = 0; i < 10; i += 1) {
  data.push({x: [],
             y: [],
             mode: 'markers',
             type: 'scatter'});
  for (var p = 0; p < 200; p += 1) {
    data[i].x.push(Math.random());
    data[i].y.push(Math.random());
  }
}
//create the plot
var myDiv = document.getElementById('myDiv');
Plotly.newPlot(myDiv, data, layout = { hovermode:'closest'});

//add the same click event as the snippet above
myDiv.on('plotly_click', function(data) {
    //let's check if some traces are hidden

    var traces = document.getElementsByClassName('legend')[0].getElementsByClassName('traces');
    var realCurveNumber = data.points[0].curveNumber;
    for (var i = 0; i < data.points[0].curveNumber; i += 1) {
        if (traces[i].style['opacity'] < 1) {
            realCurveNumber -= 1
        }
    }

    data.points[0].curveNumber = realCurveNumber;
    var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[data.points[0].curveNumber].getElementsByClassName('point')[data.points[0].pointNumber];
    var plotly_div = document.getElementsByClassName('plotly')[0];
    if (plotly_div.backup !== undefined) {
      var old_point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[plotly_div.backup.curveNumber].getElementsByClassName('point')[plotly_div.backup.pointNumber]
      if (old_point !== undefined) {
        old_point.setAttribute('d', plotly_div.backup.d);
      }
    }
    plotly_div.backup = {curveNumber: data.points[0].curveNumber,
                         pointNumber: data.points[0].pointNumber,
                         d: point.attributes['d'].value,
                         style: point.attributes['style'].value
                        }

    point.setAttribute('d', 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z');
  });

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv">

After incorporating the solution into the posted scenario, I have noticed a weird behavior(I'm not sure if it is expected). When none of the `Types` are selected and a point is clicked, the clicked point increases in size with the same color. Though the shape is not changed, it is scalable and clearly distinguishes itself from other nearby points. Now, when you select a `Type`, a new plot is generated in the same area. Surprisingly, the above effect is not available when a point is clicked. I assume there should be a little tweak to fix this. — Prradep, Sep 01 '17 at 07:55
Another observation is that if we deselect the selected Type and go back to the original plot, the above feature will be restored. — Prradep, Sep 01 '17 at 07:57
@Prradep: Thanks for catching this one! If the plot is redrawn the stored information points to a point no longer existing, a simple `if` block solves the issue. — Maximilian Peters, Sep 01 '17 at 08:09

Shiny: How to change the shape and/or size of the clicked point?

1 Answers1

Linked