I am generating some scatter plots with numerical features extracted from images.
I created a custom tooltip with html/css, such that the actual image from which the features were extracted is shown in the tooltip when I hover over a data point.
The image url is taken from a data frame column named “img”.
This is how I create the custom tooltip:
def generateCustomTooltip(columnnames=[‘treatment’, ‘date’]):
""" for col in columnnames: tooltip += """<div> <span style="font-size: 13px;">""" + col + ": @"+col+"""</span> </div>""" tooltip += """ <div> <span style="font-size: 15px;">Location</span> <span style="font-size: 10px; color: #696;">($x, $y)</span> </div> </div> """ return(tooltip)
This works fine, however, displaying the image in a tooltip can be a bit crammed.
I would prefer to add a html widget displayed next to the plot that is updated in the same way the hovertool is.
I have looked at the example “CustomJS for User Interaction Events” on page http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html and tried to modify
the example code by including an but the image doesn’t get rendered in the “Div” widget.
I also don’t know whether replacement of placeholders such as @img with values from the data source column “img” works in CustomJS widgets.
Any help would be appreciated.