example-python.qmd

---
title: Python
format: html
---

This guide shows you how to use the [HoloViz](https://holoviz.org/) ecosystem with [Quarto](https://quarto.org/) [`{python}` code blocks](https://quarto.org/docs/computations/python.html#code-blocks) to create live and interactive documents.

## Configuration

::: {.callout-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.
:::

```{python}
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](https://hvplot.holoviz.org/index.html) plot embedded in a Quarto
document.

```{python}
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

```{python}
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)
```

::: {.callout-warning}
Please note that changing the `widget_location` currently does not work. See
[hvPlot #1241](https://github.com/holoviz/hvplot/issues/1241).
:::


### HoloViews

```{python}
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](https://holoviews.org/reference/containers/bokeh/HoloMap.html).

```{python}
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")`

::: {.callout-note}
You may display HoloMaps as `gif` or `mp4`. See [`hv.output` settings](https://holoviews.org/user_guide/Applying_Customizations.html#available-hv-output-settings).
:::

### Panel

```{python}
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](https://panel.holoviz.org/how_to/export/embedding.html) guide.

```{python}
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](https://panel.holoviz.org/how_to/links/link_plots.html#link-holoviews-plots).

```{python}
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](https://panel.holoviz.org/how_to/links/index.html).

::: {.callout-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](https://github.com/holoviz/panel/issues/6131).
:::