How to make interactive scatter plot with pop-up picture by using R and/or Python

Question

I want to make an interactive scatter plot.

Specifically, when I click or place my mouse pointer on a point, the corresponding picture should be visualized.

Data structure is composed of x, y, and file-path (picture).

I tried following code but it didn't work.

library(plotly);library(png)

tmp=data.frame(x=c(1,2,3),y=c(1,2,3),
file_path=c('C:/Users/osj118/Pictures/brain_illustrator.png',
        'C:/Users/osj118/Pictures/Cap 2021-05-17 12-32-24-509.png',
        'C:/Users/osj118/Pictures/brain_illustrator.png')
)
tmp %>% plot_ly() %>% add_trace(x=~x,y=~y,z=readPNG(~file_path))

Error in path.expand(source) : invalid 'path' argument

The below figure is what I want to make.

It is ok for me to use python code.

Answer 1

A related question has been asked before. Answer in this question and other sources such as this suggest that there is no easy way to do this just with plotly. However, you can use it with shiny to create the custom hover images, see this for example.

If you are open to using python as stated in the question, there is a simpler way to do this as below (Source):

from bokeh.plotting import ColumnDataSource, figure, output_file, show

output_file("toolbar.html")

source = ColumnDataSource(data=dict(
    x=[1, 2, 3],
    y=[1, 2, 3],
    imgs=[
        'C:\\Users\\username\\Downloads\\pic.png',
        'C:\\Users\\username\\Downloads\\pic.png',
        'C:\\Users\\username\\Downloads\\pic.png',
    ],
))

TOOLTIPS = """
    <div>
        <div>
            <img
                src="@imgs" height="200" alt="@imgs" width="200"
                style="float: left; margin: 0px 15px 15px 0px;"
                border="2"
            ></img>
        </div>
    </div>
"""

p = figure(plot_width=400, plot_height=400, tooltips=TOOLTIPS,
           title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

show(p)

Here pic.png could be the brain image you like to be using.