Holoviews: custom hover for bokeh

Created on 23 Jun 2017  路  8Comments  路  Source: holoviz/holoviews

Is there a way to do something similar to what is described here:
http://bokeh.pydata.org/en/latest/docs/user_guide/tools.html#hovertool

This documentation describes how you can use the @ symbol to reference columns in a bokeh ColumnDataSource object. Is there something similar to reference columns in a dataframe that is being supplied to a holoviews Element object?

Most helpful comment

@BielStela Try supplying log_value as an additional index (i.e. index=['N_Barri', 'log_value']). This is a bit of a hack and will no longer be required once https://github.com/ioam/holoviews/pull/1514 is merged and fully integrated.

All 8 comments

You can create a custom HoverTool instance, which will let you specify custom tooltips and supply that as a tool:

from bokeh.models import HoverTool
hover = HoverTool(
        tooltips=[
            ("index", "$index"),
            ("(x,y)", "(x=$x{0[.]00000}, y=$y{0[.]00000})"),
        ]
    )

points = hv.Points(np.random.rand(100,2)).opts(plot=dict(tools=[hover]))

Yes but about when you want to add custom information to the tooltip like below?

df = DataFrame({'x': [1, 2, 3, 4, 5], 'y': [2, 5, 8, 2, 7], 'desc': ['A', 'b', 'C', 'd', 'E'],})

hover = HoverTool(tooltips=[
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("desc", "@desc"),
])

points = hv.Points(df).opts(plot=dict(tools=[hover]))

In the bokeh documentation is says - "Field names that begin with @ are associated with columns in a ColumnDataSource. For instance the field name "@price" will display values from the "price" column whenever a hover is triggered. If the hover is for the 17th glyph, then the hover tooltip will correspondingly display the 17th price value." I'm wondering if there is someway to achieve the same functionality in holoviews.

Maybe I'm still not quite clear on what you want to do, any dimensions that you declare on your hv.Points will become part of the ColumnDataSource and you can declare as many value dimensions (vdims) as you want, so your example above works as is.

I think what I was missing was the need to specify the dims like below.

df = DataFrame({'x': [1, 2, 3, 4, 5], 'y': [2, 5, 8, 2, 7], 'desc': ['A', 'b', 'C', 'd', 'E']})

hover = HoverTool(tooltips=[
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("desc", "@desc"),
])

points = hv.Points(df, kdims=['x', 'y'], vdims=['desc']).opts(plot=dict(tools=[hover]))

I have a similar problem with a choropleth map. I have a dataframe as follows:

| indx | N_Barri | value | log_value | path |
| ------ | ------ | ------ | ------ | ------ |
| 0 | Bar贸 de Viver | 0.000449 | -7.707512 | gent_charts/58_ Bar贸 de Viver_evolucio_poblacio.png |
| 1 | Can Bar贸 | 1.383090 | 0.324320 | gent_charts/34_ Can Bar贸_evolucio_poblacio.png |

and I build the map using geoviews.

shapefile = "datasets/divisiones_administrativas/barris/shape/barris_geo.shp"
shapes = cartopy.io.shapereader.Reader(shapefile)
density_hv = hv.Dataset(density)
density_hv.data.dropna(inplace=True)

%%opts Overlay [width=800 height=800 xaxis=None yaxis=None] 

hover = HoverTool(tooltips=[
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("Value", "@log_value"),
])

#%%output filename="holoviews"
gv.Shape.from_records(shapes.records(), density_hv, on='N_Barri', value='value',
                      index='N_Barri', crs=ccrs.PlateCarree(), group="Densitat Airbnb Barcelona per nombre d'hogars",
                      drop_missing=False)
%%opts Shape (cmap='Reds') [tools=['hover'] width=800 height=800 colorbar=True toolbar='above' xaxis=None yaxis=None]

This way the map shows but the hover tool shows '???' whre log_value should be.

@BielStela Try supplying log_value as an additional index (i.e. index=['N_Barri', 'log_value']). This is a bit of a hack and will no longer be required once https://github.com/ioam/holoviews/pull/1514 is merged and fully integrated.

Cool! now it shows log_value if I use tools=['hover']. But If I declare a custom hover tool

myhover = HoverTool(tooltips = """
            <div>
                <img src=@path width="170" height="170"></img>
            </div> 
            <div>
                <span style="font-size: 12px; font-weight: bold;">@log_value</span>
            </div>        
                """

and then I use it with tools = [myhover] it shows the HTML structure but keeps showing '???' in log_value and doesn't show the image. So I'll wait until the merge and try it again.

Thanks for the answer!

Although this issue is older I'll close it as a duplicate of https://github.com/ioam/holoviews/issues/1816 since that has more recent discussion.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bstadlbauer picture bstadlbauer  路  3Comments

hojo0590 picture hojo0590  路  4Comments

Forander picture Forander  路  6Comments

nbren12 picture nbren12  路  5Comments

asmith26 picture asmith26  路  4Comments