Div¶
Download this notebook from GitHub (right-click to download).
- Title
- Div Element
- Dependencies
- Bokeh
- Backends
- Bokeh
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:
hv.Div("""
<h1>Div</h1>
<h3>A simple demo</h2>
<figure>
<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)
Download this notebook from GitHub (right-click to download).