Hi,
I'm making a 2D scatter plot in which every point corresponds to an image in a dataset. Is it possible to make a HoverTool display the image (preferably colormapped)?
Thanks!
Juan.
Archived discussions · Captured October 28, 2026
HoverTool displaying image
Hi Juan,
Can you elaborate, are the images available via a URL (e.g png's or jpg's)? If so, there is an example already in the user's guide:
https://docs.bokeh.org/en/latest/docs/user_guide/interaction/tools.html#custom-tooltip
Or are you asking about rendering image *plots* inside tooltips? If so, that might be possible, although I am not aware of it ever being demonstrated.
Hi Bryan!
Thanks for the (as always) prompt response! The images are numpy arrays in-memory, but it would not be too terrible to colormap them, save them to disk, and then use file:/// URLs.
A general solution with image plots (or even any plot!) would be welcome, but for now I will use the file-save workaround. Thank you!
Juan.
···
On Tuesday, May 3, 2016 at 7:38:21 PM UTC+10, Bryan Van de ven wrote:
Hi Juan,
Can you elaborate, are the images available via a URL (e.g png’s or jpg’s)? If so, there is an example already in the user’s guide:
[http://bokeh.pydata.org/en/0.11.1/docs/user_guide/tools.html#custom-tooltip](http://bokeh.pydata.org/en/0.11.1/docs/user_guide/tools.html#custom-tooltip)Or are you asking about rendering image plots inside tooltips? If so, that might be possible, although I am not aware of it ever being demonstrated.
Bryan
On May 3, 2016, at 1:58 AM, Juan Nunez-Iglesias jni....@gmail.com wrote:
Hi,
I’m making a 2D scatter plot in which every point corresponds to an image in a dataset. Is it possible to make a HoverTool display the image (preferably colormapped)?
Thanks!
Juan.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/etPan.57284c0c.3e483177.6231%40jni-lscc-mbp.local.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Hi,
···
On Wed, May 4, 2016 at 3:00 AM, Juan Nunez-Iglesias jni.soma@gmail.com wrote:
Hi Bryan!
Thanks for the (as always) prompt response! The images are numpy arrays in-memory, but it would not be too terrible to colormap them, save them to disk, and then use file:/// URLs.
you can skip saving to disk part by base64 encoding images. See [1] as an example, just instead of creating ImageURL glyph, you will be using appropriate data source’s field name (urls in this example) in tooltips. Still you have to do color mapping on your own. Alternatively, you could display images on a separate plot and use HoverTools’ callback to change image(s) when inspected data points change. Then you wouldn’t have to do color mapping, but I think you don’t want to have to plots on-screen. Technically it should be possible to embed plot in a tooltip, but I think we didn’t attempt to do this yet.
Mateusz
A general solution with image plots (or even any plot!) would be welcome, but for now I will use the file-save workaround. Thank you!
Juan.
On Tuesday, May 3, 2016 at 7:38:21 PM UTC+10, Bryan Van de ven wrote:
Hi Juan,
Can you elaborate, are the images available via a URL (e.g png’s or jpg’s)? If so, there is an example already in the user’s guide:
[http://bokeh.pydata.org/en/0.11.1/docs/user_guide/tools.html#custom-tooltip](http://bokeh.pydata.org/en/0.11.1/docs/user_guide/tools.html#custom-tooltip)Or are you asking about rendering image plots inside tooltips? If so, that might be possible, although I am not aware of it ever being demonstrated.
Bryan
On May 3, 2016, at 1:58 AM, Juan Nunez-Iglesias jni....@gmail.com wrote:
Hi,
I’m making a 2D scatter plot in which every point corresponds to an image in a dataset. Is it possible to make a HoverTool display the image (preferably colormapped)?
Thanks!
Juan.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/etPan.57284c0c.3e483177.6231%40jni-lscc-mbp.local.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/64f3d270-990d-498e-9935-e9706c8295da%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Hi,
Hi Bryan!
Thanks for the (as always) prompt response! The images are numpy arrays
in-memory, but it would not be too terrible to colormap them, save them to
disk, and then use file:/// URLs.you can skip saving to disk part by base64 encoding images. See [1] as an
example, just instead of creating ImageURL glyph, you will be using
appropriate data source's field name (`urls` in this example) in tooltips.
Still you have to do color mapping on your own. Alternatively, you could
display images on a separate plot and use HoverTools' callback to change
image(s) when inspected data points change. Then you wouldn't have to do
color mapping, but I think you don't want to have to plots on-screen.
Technically it should be possible to embed plot in a tooltip, but I think
we didn't attempt to do this yet.
[1] https://github.com/bokeh/bokeh/blob/master/examples/models/donut.py#L95
···
On Wed, May 4, 2016 at 11:02 AM, Mateusz Paprocki < mateusz.paprocki@continuum.io> wrote:
On Wed, May 4, 2016 at 3:00 AM, Juan Nunez-Iglesias <jni.soma@gmail.com> > wrote:
Mateusz
A general solution with image plots (or even *any* plot!) would be
welcome, but for now I will use the file-save workaround. Thank you!Juan.
On Tuesday, May 3, 2016 at 7:38:21 PM UTC+10, Bryan Van de ven wrote:
Hi Juan,
Can you elaborate, are the images available via a URL (e.g png's or
jpg's)? If so, there is an example already in the user's guide:Or are you asking about rendering image *plots* inside tooltips? If so,
that might be possible, although I am not aware of it ever being
demonstrated.Bryan
> On May 3, 2016, at 1:58 AM, Juan Nunez-Iglesias <jni....@gmail.com> >>> wrote:
>
> Hi,
>
> I'm making a 2D scatter plot in which every point corresponds to an
image in a dataset. Is it possible to make a HoverTool display the image
(preferably colormapped)?
>
> Thanks!
>
> Juan.
>
>
> --
> You received this message because you are subscribed to the Google
Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send
an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit
https://groups.google.com/a/continuum.io/d/msgid/bokeh/etPan.57284c0c.3e483177.6231%40jni-lscc-mbp.local\.> For more options, visit
https://groups.google.com/a/continuum.io/d/optout\.--
You received this message because you are subscribed to the Google Groups
"Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit
https://groups.google.com/a/continuum.io/d/msgid/bokeh/64f3d270-990d-498e-9935-e9706c8295da%40continuum.io
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/64f3d270-990d-498e-9935-e9706c8295da%40continuum.io?utm_medium=email&utm_source=footer>
.For more options, visit https://groups.google.com/a/continuum.io/d/optout
.
Hi,
Hi Bryan!
Thanks for the (as always) prompt response! The images are numpy arrays
in-memory, but it would not be too terrible to colormap them, save them to
disk, and then use file:/// URLs.you can skip saving to disk part by base64 encoding images. See [1] as an
example, just instead of creating ImageURL glyph, you will be using
appropriate data source's field name (`urls` in this example) in tooltips.
Still you have to do color mapping on your own. Alternatively, you could
display images on a separate plot and use HoverTools' callback to change
image(s) when inspected data points change.
Show how to connect two bokeh plots with hover tool · GitHub shows how
to link two plots with hover tool.
Then you wouldn't have to do color mapping, but I think you don't want to
have to plots on-screen. Technically it should be possible to embed plot in
a tooltip, but I think we didn't attempt to do this yet.
After some investigation, this is not trivial to implement currently.
Mateusz
···
On Wed, May 4, 2016 at 11:02 AM, Mateusz Paprocki < mateusz.paprocki@continuum.io> wrote:
On Wed, May 4, 2016 at 3:00 AM, Juan Nunez-Iglesias <jni.soma@gmail.com> > wrote:
Mateusz
A general solution with image plots (or even *any* plot!) would be
welcome, but for now I will use the file-save workaround. Thank you!Juan.
On Tuesday, May 3, 2016 at 7:38:21 PM UTC+10, Bryan Van de ven wrote:
Hi Juan,
Can you elaborate, are the images available via a URL (e.g png's or
jpg's)? If so, there is an example already in the user's guide:Or are you asking about rendering image *plots* inside tooltips? If so,
that might be possible, although I am not aware of it ever being
demonstrated.Bryan
> On May 3, 2016, at 1:58 AM, Juan Nunez-Iglesias <jni....@gmail.com> >>> wrote:
>
> Hi,
>
> I'm making a 2D scatter plot in which every point corresponds to an
image in a dataset. Is it possible to make a HoverTool display the image
(preferably colormapped)?
>
> Thanks!
>
> Juan.
>
>
> --
> You received this message because you are subscribed to the Google
Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send
an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit
https://groups.google.com/a/continuum.io/d/msgid/bokeh/etPan.57284c0c.3e483177.6231%40jni-lscc-mbp.local\.> For more options, visit
https://groups.google.com/a/continuum.io/d/optout\.--
You received this message because you are subscribed to the Google Groups
"Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit
https://groups.google.com/a/continuum.io/d/msgid/bokeh/64f3d270-990d-498e-9935-e9706c8295da%40continuum.io
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/64f3d270-990d-498e-9935-e9706c8295da%40continuum.io?utm_medium=email&utm_source=footer>
.For more options, visit https://groups.google.com/a/continuum.io/d/optout
.
Thanks, Mateusz! The b64 encoding works great and is definitely cleaner than the temporary directory approach! I have the code working here:
It’s a bit messy, but after some cleanup and with some sample data it could make a good example plot! Here’s a teaser screenshot:
Thank you both for your help and for all the work that’s led to this!
Juan.
···
On Wednesday, May 4, 2016 at 10:14:27 PM UTC+10, mateusz.paprocki wrote:
On Wed, May 4, 2016 at 11:02 AM, Mateusz Paprocki mateusz....@continuum.io wrote:
Hi,
On Wed, May 4, 2016 at 3:00 AM, Juan Nunez-Iglesias jni....@gmail.com wrote:
Hi Bryan!
Thanks for the (as always) prompt response! The images are numpy arrays in-memory, but it would not be too terrible to colormap them, save them to disk, and then use file:/// URLs.
you can skip saving to disk part by base64 encoding images. See [1] as an example, just instead of creating ImageURL glyph, you will be using appropriate data source’s field name (
urlsin this example) in tooltips. Still you have to do color mapping on your own. Alternatively, you could display images on a separate plot and use HoverTools’ callback to change image(s) when inspected data points change.
https://gist.github.com/mattpap/eb15e406be17de249a8b7b6e30cf93ab shows how to link two plots with hover tool.
Then you wouldn’t have to do color mapping, but I think you don’t want to have to plots on-screen. Technically it should be possible to embed plot in a tooltip, but I think we didn’t attempt to do this yet.
After some investigation, this is not trivial to implement currently.
Mateusz
Mateusz
A general solution with image plots (or even any plot!) would be welcome, but for now I will use the file-save workaround. Thank you!
Juan.
On Tuesday, May 3, 2016 at 7:38:21 PM UTC+10, Bryan Van de ven wrote:
Hi Juan,
Can you elaborate, are the images available via a URL (e.g png’s or jpg’s)? If so, there is an example already in the user’s guide:
[http://bokeh.pydata.org/en/0.11.1/docs/user_guide/tools.html#custom-tooltip](http://bokeh.pydata.org/en/0.11.1/docs/user_guide/tools.html#custom-tooltip)Or are you asking about rendering image plots inside tooltips? If so, that might be possible, although I am not aware of it ever being demonstrated.
Bryan
On May 3, 2016, at 1:58 AM, Juan Nunez-Iglesias jni....@gmail.com wrote:
Hi,
I’m making a 2D scatter plot in which every point corresponds to an image in a dataset. Is it possible to make a HoverTool display the image (preferably colormapped)?
Thanks!
Juan.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/etPan.57284c0c.3e483177.6231%40jni-lscc-mbp.local.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/64f3d270-990d-498e-9935-e9706c8295da%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
@Juan_Nunez-Iglesias I happened upon this yesterday and it was exactly what I needed. Funny coincidence. Thanks for the github repo too!
Hey what’s the purpose of
blob-explorer/picker.py at bd9fa676a2a23317e2ea84bdf48b19e71b9e75d4 · jni/blob-explorer · GitHub
Why can’t you achieve that with .tobytes() method in PIL package.
The answer is generally “I didn’t know any better”, but in the tobytes() documentation, it says:
This method returns the raw image data from the internal storage. For compressed image data (e.g. PNG, JPEG) use
save(), with a BytesIO parameter for in-memory data.
Which is exactly what the linked line does?
def to_png(arr):
out = BytesIO()
im = Image.fromarray(arr, 'RGB')
im.save(out, format='png')
return out.getvalue()
def b64_image_files(chosen_indices):
urls = []
for i in range(len(np.take(train_set.data, chosen_indices, axis=0))):
png = to_png(np.take(train_set.data, chosen_indices, axis=0)[i])
url = 'data:image/png;base64,' + base64.b64encode(png).decode('utf-8')
urls.append(url)
return urls@Bryan This answer needs to be in the documentation of image_url API. It will save a lot of human hours worth of work.
Hi @Coddy,
PRs with documentation updates + examples are always welcome! If you’re not comfortable submitting a PR yourself, please create a GH issue to track the documentation update request.
@Coddy OSS projects usually have limited resources relative to potential work, and so have to prioritize out of necessity. As best I can tell after nearly nine years of supporting Bokeh, very few people ever actually want to do what is described in this thread. As a result, it has not risen as a priority.
The best way to “move the needle” on things like this is just as @carolyn suggests: to add your contributions and priorities to the collaborative effort. Besides adding content to the narrative docs, another possibility with perhaps the lowest barrier to entry would be to contribute a simple, focused example to add to the examples/plotting/file directory of the repo. That could server as an immediate and easily linkable reference any time someone has a similar question.
End of archived discussion · Replies are disabled