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

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>
""")

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)