Download this notebook from GitHub (right-click to download).

Div Element
import numpy as np
import holoviews as hv
hv.extension('bokeh', 'matplotlib')

Div elements may be used to display arbitrary HTML and embed it in a bokeh plot. It supports all standard HTML tags and may be sized using the usual width and height plot options.

As a simple example we can create a figure with some heading tags an image tag and a figure caption which includes LaTeX rendering:

<h3>A simple demo</h2>

<img src="https://assets.holoviews.org/logo/holoviews_color_icon_500x500.png" height='200' width='200'>
<figcaption><b>Fig 1:</b> This is a figure caption with $LaTeX$</figcaption>

Since many libraries (including HoloViews) support HTML output directly we can use the element to quickly and easily embed additional information about a dataset. To illustrate this we create an Image, convert it to a 3D Surface element and render it to HTML with the matplotlib backend. Additionally we use the dframe method on the Image and then use describe on the resulting DataFrame to compute a summary table, which we also convert to HTML. Now we can add both next to our Image plot:

X = np.arange(-5, 5, 0.25)
Y = np.arange(-5, 5, 0.25)
X, Y = np.meshgrid(X, Y)
R = np.sqrt(X**2 + Y**2)
Z = np.sin(R)
img = hv.Image(Z)

# Render matplotlib surface plot to HTML
surface = hv.Surface(img)
surface_html = hv.renderer('matplotlib').html(surface)
surface_div = hv.Div(surface_html)

# Generate HTML summary table from pandas dataframe
df_html = img.dframe()[['z']].describe().to_html()
df_div = hv.Div("<div align='right'>"+df_html+"<div>")

img + surface_div + df_div.opts(width=200)
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).