{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"contentcontainer med left\" style=\"margin-left: -50px;\">\n",
    "<dl class=\"dl-horizontal\">\n",
    "  <dt>Title</dt> <dd> Div Element</dd>\n",
    "  <dt>Dependencies</dt> <dd>Bokeh</dd>\n",
    "  <dt>Backends</dt> <dd><a href='./Div.ipynb'>Bokeh</a></dd>\n",
    "</dl>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import holoviews as hv\n",
    "hv.extension('bokeh', 'matplotlib')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``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.\n",
    "\n",
    "As a simple example we can create a figure with some heading tags an image tag and a figure caption which includes LaTeX rendering:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hv.Div(\"\"\"\n",
    "<h1>Div</h1>\n",
    "<h3>A simple demo</h2>\n",
    "\n",
    "<figure>\n",
    "<img src=\"https://assets.holoviews.org/logo/holoviews_color_icon_500x500.png\" height='200' width='200'>\n",
    "<figcaption><b>Fig 1:</b> This is a figure caption with $LaTeX$</figcaption>\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "X = np.arange(-5, 5, 0.25)\n",
    "Y = np.arange(-5, 5, 0.25)\n",
    "X, Y = np.meshgrid(X, Y)\n",
    "R = np.sqrt(X**2 + Y**2)\n",
    "Z = np.sin(R)\n",
    "img = hv.Image(Z)\n",
    "\n",
    "# Render matplotlib surface plot to HTML\n",
    "surface = hv.Surface(img)\n",
    "surface_html = hv.renderer('matplotlib').html(surface)\n",
    "surface_div = hv.Div(surface_html)\n",
    "\n",
    "# Generate HTML summary table from pandas dataframe\n",
    "df_html = img.dframe()[['z']].describe().to_html()\n",
    "df_div = hv.Div(\"<div align='right'>\"+df_html+\"<div>\")\n",
    "\n",
    "img + surface_div + df_div.opts(width=200)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}