Interested in showing information upon hovering over a logo plot created with ggplot, much like: https://i.sstatic.net/j8eX5.png The images are saved locally on my computer. The issue is that Plotly doesn't yet support annotations_custom, annotation_raster, ggdraw, etc.
Attempted to generate the graph directly using Plotly, but it appears reading stored images without going through a Shiny app is not feasible (Is there a way to read images stored locally into Plotly?).
The sole recourse seems to involve JavaScript, hence adapting code from:
library(tidyverse)
library(plotly)
g <- ggplot(iris, aes(x = Sepal.Length,
y = Petal.Length,
color = Species,
text = Species)) + geom_point()
p <- ggplotly(g, tooltip = "text")
p %>% htmlwidgets::onRender("
function(el, x) {
// when hovering over an element, do something
el.on('plotly_hover', function(d) {
// extract tooltip text
txt = d.points[0].data.text;
// image is stored locally
image_location = '1.png';
// define image to be shown
var img = {
// location of image
source: image_location,
// top-left corner
x: 0,
y: 1,
sizex: 0.2,
sizey: 0.2,
xref: 'paper',
yref: 'paper'
};
// show image and annotation
Plotly.relayout(el.id, {
images: [img]
});
})
}
")
Managed to display an online image by reusing the code as is, however, encountering difficulties with displaying a locally stored image, whether via relative or absolute path (working directory set to source file location). The graph displays but the image does not appear upon hovering over points.
If displaying locally stored images becomes achievable, assistance on adjusting the code to position the image over the dots for a logo plot reconstruction would be highly appreciated.
Many thanks!