This guide shows you how to use the HoloViz ecosystem with Quarto {python} code blocks to create live and interactive documents.

Configuration

Note

For hvPlot, HoloViews or Panel to work with Quarto, you must remember to run the the .extension function to include the relevant css and javascript files.

Code 
import holoviews as hv
import panel as pn

hv.extension("bokeh") # same as hvplot.extension("bokeh")
pn.extension(design="material")

Examples

hvPlot

This is a hvPlot plot embedded in a Quarto document.

Code 
import hvplot.pandas
import pandas as pd

df=pd.DataFrame({"x": [1,2,3], "y": [1,3,2]})

df.hvplot.line(x='x', y='y', height=400, responsive=True)

You can make widgets created with a groupby argument interactive, if you add the dynamic=False arguments

Code 
import hvplot.pandas
import numpy as np
import pandas as pd

frequencies = [0.5, 0.75, 1.0, 1.25]

def sine_curve(phase, freq):
    xvals = np.arange(100)
    yvals = np.sin(phase+freq*xvals)
    return pd.DataFrame({'x': xvals, 'y': yvals, 'phase': phase, 'freq': freq}, columns=['x', 'y', 'phase', 'freq'])

df = pd.concat([sine_curve(0, f) for f in frequencies])

df.hvplot.line('x', 'y', groupby='freq', dynamic=False, responsive=True, height=400)
Warning

Please note that changing the widget_location currently does not work. See hvPlot #1241.

HoloViews

Code 
import holoviews as hv
import pandas as pd

df=pd.DataFrame({"x": [1,2,3], "y": [1,3,2]})

hv.Curve(df, kdims="x", vdims="y").opts(height=400, responsive=True)

You can browse through a collection (dictionary) of plots via HoloMap.

Code 
import numpy as np
import holoviews as hv

# hv.output(widget_location="top_left")

def sine_curve(phase, freq):
    xvals = [0.1* i for i in range(100)]
    return hv.Curve((xvals, [np.sin(phase+freq*x) for x in xvals]))

frequencies = [0.5, 0.75, 1.0, 1.25]
phases      = [0, np.pi/2, np.pi, 3*np.pi/2]

curve_dict_2D = {(p,f):sine_curve(p,f) for p in phases for f in frequencies}

hv.HoloMap(curve_dict_2D, kdims=['phase', 'frequency']).opts(responsive=True, height=300)

You can change the default widget_location via hv.output(widget_location="top_left")

Note

You may display HoloMaps as gif or mp4. See hv.output settings.

Panel

Code 
import panel as pn

slider = pn.widgets.IntSlider(name="Select a value", value=2, start=0, end=10)
pn.Column(
    pn.rx("You selected: {}").format(slider),
)

Please note that the output above is not live and interactive. When you drag the slider nothing happens.

For simple apps with a limited amount of state it is possible to embed the state. See the Panel how-to embed state guide.

Code 
import panel as pn

slider = pn.widgets.IntSlider(name="Select a value", value=2, start=0, end=10)
pn.Column(
    pn.rx("You selected: {}").format(slider),
).embed(max_states=11, max_opts=11)

Now the text updates when you drag the slider above.

You may also Link Plot Parameters in Javascript.

Code 
import hvplot.pandas
import pandas as pd
import panel as pn

df=pd.DataFrame({"x": [1,2,3], "y": [1,3,2]})
plot = df.hvplot.line(x='x', y='y', height=400, responsive=True)

width_slider = pn.widgets.FloatSlider(name="Line Width", start=3, end=10, step=0.1)
width_slider.jslink(plot, value="glyph.line_width")
pn.Column(width_slider, plot)

For more on Javascript linking check out the Link Parameters Guides.

Warning

Please note that hvPlot and HoloViews plots like HoloMaps with widgets currently do not work inside Panel Layouts in Quarto documents. See Panel #6131.

Back to top