TutteInstitute / datamapplot

Creating beautiful plots of data maps
MIT License
449 stars 29 forks source link

Feature Request: Links and images on hover #15

Closed dhruv-anand-aintech closed 3 months ago

dhruv-anand-aintech commented 3 months ago

Hi there, thank you for building this great library!

I'd love to be able link to documents/images/videos that are represented in the plot, via a url, making it clickable when the user hovers on a particular dot.

Can this be added to the library? I'd greatly appreciate it.

lmcinnes commented 3 months ago

At least in principle you can do this with the hover_text_html_template keyword argument. It's in the documentation, but buried in the API documentation. It allows:

An html template allowing fine grained control of what is displayed in the hover tooltip. This should be HTML with placeholders of the form {hover_text} for the supplied hover text and {column_name} for columns from extra_point_data (see below).

So if you have an image you want displayed in the tooltip you could have something like:

hover_text_html_template="""
<div>
<img src="{hover_text}" width=20% height=20% />
</div>

where you provide urls to the images as the hover text argument. If you want something more complicated you can provide extra data accessible to the tooltip via the extra_point_data argument which takes a pandas dataframe. For an example of this kind of thing in action see https://datamapplot.readthedocs.io/en/latest/auto_examples/plot_interactive_custom_cord19.html where a custom tooltip making use of extra data is used.

dhruv-anand-aintech commented 3 months ago

That's great! I will try these out

dhruv-anand-aintech commented 3 months ago

couple of things:

  1. Adding on_click makes every place in the window clickable, and clicking it opens a window with hover_text replaced with "undefined"
  2. I'm passing
    hover_text_html_template="""
    <div>
    <img src="/Users/dhruvanand/Code/{hover_text}/{hover_text}.jpg" width=20% height=20% />
    </div>""",

    at the end of the create_interactive_plot call but I'm not seeing the images in the final html file when I inspect it in a browser

lmcinnes commented 3 months ago

I think you may need to have "file:///Users" and also work around local loading of information that browsers prevent (so use relative paths and run a local webserver for the html file).

As to the on_click I believe I had fixed that, but perhaps that got lost somewhere. I'll see if I can fix it.

lmcinnes commented 3 months ago

Shoukld be fixed in main now if you want to try.

lmcinnes commented 3 months ago

Actually having a few issues ... this may take a little longer to get right.