Notebook 10 - Interactive Visualizations.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Notebook 10\n",
    "\n",
    "## Examples of interactive plots with Bokeh"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Linked Panning"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.io import output_file, show\n",
    "from bokeh.layouts import gridplot\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.models import ColumnDataSource\n",
    "import pandas as pd\n",
    "\n",
    "output_file(\"panning.html\")\n",
    "\n",
    "data = pd.read_csv('data/iris.csv')\n",
    "source = ColumnDataSource(data=data)\n",
    "\n",
    "w=500\n",
    "h=500\n",
    "\n",
    "# create a new plot\n",
    "fig1 = figure(plot_width=w, plot_height=h)\n",
    "fig1.circle(x='petal_width', y='petal_length', source=source, size=10)\n",
    "\n",
    "# create a new plot and share both ranges\n",
    "fig2 = figure(plot_width=w, plot_height=h, \n",
    "              x_range=fig1.x_range, y_range=fig1.y_range)\n",
    "fig2.triangle(x='sepal_width', y='sepal_length', source=source, size=10, color=\"firebrick\")\n",
    "\n",
    "p = gridplot([[fig1, fig2]])\n",
    "\n",
    "# show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[See result.](panning.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Linked Selection"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.io import output_file, show\n",
    "from bokeh.layouts import gridplot\n",
    "from bokeh.models import ColumnDataSource\n",
    "from bokeh.plotting import figure\n",
    "import pandas as pd\n",
    "\n",
    "output_file(\"selection.html\")\n",
    "\n",
    "data = pd.read_csv('data/iris.csv')\n",
    "source = ColumnDataSource(data=data)\n",
    "\n",
    "w=500\n",
    "h=500\n",
    "\n",
    "\n",
    "TOOLS = \"box_select,lasso_select, hover, help\"\n",
    "\n",
    "# create a new plot and add a renderer\n",
    "left = figure(tools=TOOLS, plot_width=w, plot_height=h, title=None)\n",
    "left.circle(x='petal_width', y='petal_length', source=source, size=10, hover_color='red')\n",
    "\n",
    "# create another new plot and add a renderer\n",
    "right = figure(tools=TOOLS, plot_width=w, plot_height=h, title=None)\n",
    "right.circle(x='petal_width', y='petal_length', \n",
    "             source=source, size=10, hover_color='green')\n",
    "\n",
    "p = gridplot([[left, right]])\n",
    "\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[See result.](selection.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Customize Hover"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure, output_file, show\n",
    "from bokeh.models import ColumnDataSource, HoverTool, CustomJS\n",
    "\n",
    "output_file(\"hover_callback.html\")\n",
    "\n",
    "# define some points and a little graph between them\n",
    "x = [2, 3, 5, 6, 8, 7]\n",
    "y = [6, 4, 3, 8, 7, 5]\n",
    "links = {\n",
    "    0: [1, 2],\n",
    "    1: [0, 3, 4],\n",
    "    2: [0, 5],\n",
    "    3: [1, 4],\n",
    "    4: [1, 3],\n",
    "    5: [2, 3, 4]\n",
    "}\n",
    "\n",
    "p = figure(plot_width=400, plot_height=400, tools=\"\", toolbar_location=None, title='Hover over points')\n",
    "\n",
    "source = ColumnDataSource({'x0': [], 'y0': [], 'x1': [], 'y1': []})\n",
    "sr = p.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='olive', alpha=0.6, line_width=3, source=source, )\n",
    "cr = p.circle(x, y, color='olive', size=30, alpha=0.4, hover_color='olive', hover_alpha=1.0)\n",
    "\n",
    "# Add a hover tool, that sets the link data for a hovered circle\n",
    "code = \"\"\"\n",
    "var links = %s;\n",
    "var data = {'x0': [], 'y0': [], 'x1': [], 'y1': []};\n",
    "var cdata = circle.data;\n",
    "var indices = cb_data.index['1d'].indices;\n",
    "for (i=0; i < indices.length; i++) {\n",
    "    ind0 = indices[i]\n",
    "    for (j=0; j < links[ind0].length; j++) {\n",
    "        ind1 = links[ind0][j];\n",
    "        data['x0'].push(cdata.x[ind0]);\n",
    "        data['y0'].push(cdata.y[ind0]);\n",
    "        data['x1'].push(cdata.x[ind1]);\n",
    "        data['y1'].push(cdata.y[ind1]);\n",
    "    }\n",
    "}\n",
    "segment.data = data;\n",
    "\"\"\" % links\n",
    "\n",
    "callback = CustomJS(args={'circle': cr.data_source, 'segment': sr.data_source}, code=code)\n",
    "p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))\n",
    "\n",
    "show(p)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[See result.](hover_callback.html)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}