Select/copy hover text in R plotly graph

Question

I would like to be able to select and copy the hover text in plotly graphs. Is that possible with the R API? For example, in this heatmap, upon mousing over coordinates (X=a, Y=d), one can see the hover text displaying:

x=a,

y=d,

z=0.71886

However, the text is not selectable. The goal would be to e.g. display this text inside a box (perhaps by right-clicking on the corresponding cell) to be able to copy the text contents into the clipboard. Any help would be greatly appreciated.

Telamon

One way would involve using Shiny. See plot.ly/r/shiny-coupled-hover-events. event_data() will allow you to retrieve values and then you can do things like show it inside a box or do some other computations etc – Shush

thank you so much for your reply. I will look into this – Telamon

Answer 1

I have been able to extract the values with the following code :

library(plotly)
m <- matrix(rnorm(9), nrow = 3, ncol = 3)
fig <- plot_ly(x = c("a", "b", "c"),
               y = c("d", "e", "f"),
               z = m, type = "heatmap")

x <- fig$x$attrs[[1]][[1]]
y <- fig$x$attrs[[1]][[2]]
z <- fig$x$attrs[[1]][[3]]

mat <- matrix(nrow = 9, ncol = 3)
counter <- 1

for(i in 1 : 3)
{
  for(j in 1 : 3)
  {
    mat[counter, ] <- c(x[i], y[j], z[j, i])
    counter <- counter + 1
  }
}

mat
     [,1] [,2] [,3]                 
 [1,] "a"  "d"  "-1.24626999077972"  
 [2,] "a"  "e"  "-0.0513546366077807"
 [3,] "a"  "f"  "0.131577832947162"  
 [4,] "b"  "d"  "0.36052924344838"   
 [5,] "b"  "e"  "-2.01674679871447"  
 [6,] "b"  "f"  "-0.0783806771351291"
 [7,] "c"  "d"  "-1.3994093901524"   
 [8,] "c"  "e"  "-0.443892523865165" 
 [9,] "c"  "f"  "0.620093087480776"  

Bench

Answer 2

Here is another approach that can be considered :

library(stringr)
library(rmarkdown)

vec_Text <- c('```{r fig}',
              'library(plotly)',
              'set.seed(123454)',
              'm <- matrix(rnorm(9), nrow = 3, ncol = 3)',
              'fig <- plot_ly(x = c("a", "b", "c"),',
              '               y = c("d", "e", "f"),',
              '               z = m, type = "heatmap")',
              'fig',
              '```')

temp_Dir <- tempdir()
dir.create(temp_Dir)
file <- rpois(n = 1, lambda = 500)
temp_Rmd <- paste0(temp_Dir, "\\", file, ".Rmd")
temp_Html <- paste0(temp_Dir, "\\", file, ".html")
writeLines(text = vec_Text, con = temp_Rmd)
setwd(temp_Dir)
file_Rmd <- paste0(file, ".Rmd")
rmarkdown::render(input = file_Rmd,
                  output_format = "html_document",
                  output_file = temp_Html)

html_Text <- readLines(temp_Html)
html_Text <- paste0(html_Text, collapse = "")
text_With_Values <- unlist(stringr::str_extract_all(html_Text, "<script type=.{1,4000}<script>"))

text_With_Values
[1] "<script type=\"application/json\" data-for=\"htmlwidget-24b21bb57a3b5a28e228\">{\"x\":{\"visdat\":{\"2ea8298f79c2\":[\"function () \",\"plotlyVisDat\"]},\"cur_data\":\"2ea8298f79c2\",\"attrs\":{\"2ea8298f79c2\":{\"x\":[\"a\",\"b\",\"c\"],\"y\":[\"d\",\"e\",\"f\"],\"z\":[[-1.2462699907797248,0.36052924344838017,-1.399409390152403],[-0.051354636607780689,-2.0167467987144692,-0.44389252386516453],[0.13157783294716205,-0.078380677135129126,0.62009308748077607]],\"alpha_stroke\":1,\"sizes\":[10,100],\"spans\":[1,20],\"type\":\"heatmap\"}},\"layout\":{\"margin\":{\"b\":40,\"l\":60,\"t\":25,\"r\":10},\"xaxis\":{\"domain\":[0,1],\"automargin\":true,\"title\":[]},\"yaxis\":{\"domain\":[0,1],\"automargin\":true,\"title\":[]},\"scene\":{\"zaxis\":{\"title\":[]}},\"hovermode\":\"closest\",\"showlegend\":false,\"legend\":{\"yanchor\":\"top\",\"y\":0.5}},\"source\":\"A\",\"config\":{\"modeBarButtonsToAdd\":[\"hoverclosest\",\"hovercompare\"],\"showSendToCloud\":false},\"data\":[{\"colorbar\":{\"title\":\"\",\"ticklen\":2,\"len\":0.5,\"lenmode\":\"fraction\",\"y\":1,\"yanchor\":\"top\"},\"colorscale\":[[\"0\",\"rgba(68,1,84,1)\"],[\"0.0416666666666667\",\"rgba(70,19,97,1)\"],[\"0.0833333333333333\",\"rgba(72,32,111,1)\"],[\"0.125\",\"rgba(71,45,122,1)\"],[\"0.166666666666667\",\"rgba(68,58,128,1)\"],[\"0.208333333333333\",\"rgba(64,70,135,1)\"],[\"0.25\",\"rgba(60,82,138,1)\"],[\"0.291666666666667\",\"rgba(56,93,140,1)\"],[\"0.333333333333333\",\"rgba(49,104,142,1)\"],[\"0.375\",\"rgba(46,114,142,1)\"],[\"0.416666666666667\",\"rgba(42,123,142,1)\"],[\"0.458333333333333\",\"rgba(38,133,141,1)\"],[\"0.5\",\"rgba(37,144,140,1)\"],[\"0.541666666666667\",\"rgba(33,154,138,1)\"],[\"0.583333333333333\",\"rgba(39,164,133,1)\"],[\"0.625\",\"rgba(47,174,127,1)\"],[\"0.666666666666667\",\"rgba(53,183,121,1)\"],[\"0.708333333333333\",\"rgba(79,191,110,1)\"],[\"0.75\",\"rgba(98,199,98,1)\"],[\"0.791666666666667\",\"rgba(119,207,85,1)\"],[\"0.833333333333333\",\"rgba(147,214,70,1)\"],[\"0.875\",\"rgba(172,220,52,1)\"],[\"0.916666666666667\",\"rgba(199,225,42,1)\"],[\"0.958333333333333\",\"rgba(226,228,40,1)\"],[\"1\",\"rgba(253,231,37,1)\"]],\"showscale\":true,\"x\":[\"a\",\"b\",\"c\"],\"y\":[\"d\",\"e\",\"f\"],\"z\":[[-1.2462699907797248,0.36052924344838017,-1.399409390152403],[-0.051354636607780689,-2.0167467987144692,-0.44389252386516453],[0.13157783294716205,-0.078380677135129126,0.62009308748077607]],\"type\":\"heatmap\",\"xaxis\":\"x\",\"yaxis\":\"y\",\"frame\":null}],\"highlight\":{\"on\":\"plotly_click\",\"persistent\":false,\"dynamic\":false,\"selectize\":false,\"opacityDim\":0.20000000000000001,\"selected\":{\"opacity\":1},\"debounce\":0},\"shinyEvents\":[\"plotly_hover\",\"plotly_click\",\"plotly_selected\",\"plotly_relayout\",\"plotly_brushed\",\"plotly_brushing\",\"plotly_clickannotation\",\"plotly_doubleclick\",\"plotly_deselect\",\"plotly_afterplot\",\"plotly_sunburstclick\"],\"base_url\":\"https://plot.ly\"},\"evals\":[],\"jsHooks\":[]}</script></div><script>// add bootstrap table styles to pandoc tablesfunction bootstrapStylePandocTables() {  $('tr.odd').parent('tbody').parent('table').addClass('table table-condensed');}$(document).ready(function () {  bootstrapStylePandocTables();});</script><!-- tabsets --><script>$(document).ready(function () {  window.buildTabsets(\"TOC\");});$(document).ready(function () {  $('.tabset-dropdown > .nav-tabs > li').click(function () {    $(this).parent().toggleClass('nav-tabs-open');  });});</script><!-- code folding --><!-- dynamically load mathjax for compatibility with self-contained --><script>"

You have all the info in the variable text_With_Values. For example, you have

{\"x\":[\"a\",\"b\",\"c\"],\"y\":[\"d\",\"e\",\"f\"],\"z\":[[-1.2462699907797248,0.36052924344838017,-1.399409390152403],[-0.051354636607780689,-2.0167467987144692,-0.44389252386516453],[0.13157783294716205,-0.078380677135129126,0.62009308748077607]]

Bench