Change position of select widget in jupyter notebook

HoloViews
1

is there a way to change the position of the selection widget coming with Holomaps ? The default position on the right does not work well when charts are taking most of the cell width as the widget ends up behind the plot.

EDIT: just upgraded Holoviews to version 1.13.2 and I see that now the cell is enlarged to make room for the widget so that it does not end up behind the plot. Definitely an improvement but I would still like to know if there is a way to control the positioning of the widget.

2

You can use the Panel library to separate the plot from the widgets, then layout the parts in any way you want using Panel’s layout capabilities.

Code example

import numpy as np
import holoviews as hv
import panel as pn
from holoviews import opts

hv.extension('bokeh')

opts.defaults(opts.Curve(line_width=1))

# Create dummy data
def fm_modulation(f_carrier=220, f_mod=220, mod_index=1, length=0.1, sampleRate=2000):
    sampleInc = 1.0/sampleRate
    x = np.arange(0,length, sampleInc)
    y = np.sin(2*np.pi*f_carrier*x + mod_index*np.sin(2*np.pi*f_mod*x))
    return hv.Curve((x, y), 'Time', 'Amplitude')

f_carrier = np.linspace(20, 60, 3)
f_mod = np.linspace(20, 100, 5)

curve_dict = {(fc, fm): fm_modulation(fc, fm) for fc in f_carrier for fm in f_mod}

kdims = [hv.Dimension(('f_carrier', 'Carrier frequency'), default=40),
         hv.Dimension(('f_mod', 'Modulation frequency'), default=60)]
holomap = hv.HoloMap(curve_dict, kdims=kdims)

# At this point you can just plot the holomap to get the widgets to the right of the plot

# Convert the holomap into a panel
holomap_panel = pn.panel(holomap)

# You can inspect this object to see that it can be accessed by index, where the object at index 0 is the plot while the object at index 1 is the widget panel

plot = holomap_panel[0]
widgets = holomap_panel[1]

# Create a new layout in any way you want, for example in a column with the widgets below the plot
new_layout_panel = pn.Column(plot, widgets)

# Visualize
new_layout_panel.servable()

# You can even see that the widgets object can be split up into the two range sliders, and you could split those up and position in any way you want as well using Panel
3

thanks for your answer, this is helpful and I will do as you suggest. Unless I hear otherwise I will then assume that there is no native method to do this in holoviews without using panel.

4

Hi @aleave!

I think that you can achieve that with the Holoviews pane of panel. You’d just pass your Holomap to that pane and the widget_location attribute with the value of your choice (“bottom”, “left”, etc.).

bottom example:
image
top_left example:
image

panel being a dependency of Holoviews, you should have it installed already.

See the docs for more info (there are other useful attributes): https://panel.holoviz.org/reference/panes/HoloViews.html#panes-gallery-holoviews.

EDIT: I started to write this answer before yours @mmorys, still posting it as it mentions the Holoviews pane directly :slight_smile:

5

thanks @maximlt , another neat example on how to do it with panel. I will use your and @mmorys suggestions and consider this closed now.

6

There actually is, we just need to document it better. You should be able to change the widget location with:

hv.output(widget_location='top_left')

Valid locations include:

['left', 'bottom', 'right', 'top', 'top_left', 'top_right', 'bottom_left', 'bottom_right', 'left_top', 'left_bottom', 'right_top', 'right_bottom']
1 Like
7

thanks @philippjfr, well noted

8

Thanks for your helpful responses Phil.
I was wondering if it is possible to display the widgets over a Dynamic Plot , as in overlaying widgets. I have seen apps with plotly backend doing this but I don’t know how to do it.

Thanks!