App_Plot_With_Slider.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "hide_input": true,
    "init_cell": true
   },
   "outputs": [],
   "source": [
    "import warnings\n",
    "warnings.filterwarnings('ignore')\n",
    "\n",
    "import holoviews as hv\n",
    "hv.notebook_extension('bokeh')\n",
    "\n",
    "import param\n",
    "\n",
    "import numpy as np\n",
    "print(\"HV version\", hv.__version__ )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Develop a Simple Bokeh App with a slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Step 1: build the display in the notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Consider a random walk in one dimension:\n",
    "    \n",
    "    Starting at the origin, we take steps either forward or backward,\n",
    "    whith step lengths drawn from a uniform distribution.\n",
    "    \n",
    "    After N steps, the distance from the origin will be approximately normally distributed."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Simulate Data and build an associated hv.DynamicMap"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def simulate_random_walk( Nsteps=20, Nwalks=1000, max_step_length=2.):\n",
    "    '''compute Nwalks=1000 realizations of\n",
    "    sampling the distance from the origin after every one of Nsteps=20 steps,\n",
    "    with stepsize drawn from a uniform distribution\n",
    "    '''\n",
    "    rwalk      = np.random.uniform(-max_step_length, max_step_length, size=(Nsteps+1, Nwalks))\n",
    "    rwalk[0,:] = 0.\n",
    "    rwalk      = np.cumsum(rwalk,axis=0)\n",
    "    return rwalk"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# since we want to deploy an app, we cannot use cellmagic %%opts\n",
    "#       pass opts as an argument therefore\n",
    "# to use events to drive the display, define and return an hv.DynamicMap and an associated stream\n",
    "\n",
    "def random_walk_plot( rwalk, path_opts = dict( height=200, width=550, shared_axes=False, yticks=3),\n",
    "                             hist_opts = dict( height=200, width=380, shared_axes=False, xticks=3, yaxis=None, invert_axes=True),\n",
    "                             useStream = False\n",
    "                    ):\n",
    "    '''Generate a DynamicMap of the Distribution of the distance from the starting point at each step size\n",
    "       Optionally allow the DynamicMap to be controlled by a stream\n",
    "    '''\n",
    "    N_steps_plus_one, N_walks = rwalk.shape\n",
    "    n_bins     = 20\n",
    "    steps      = np.linspace(0.,float(N_steps_plus_one-1), N_steps_plus_one )\n",
    "\n",
    "    # infer axis bounds\n",
    "    D            = np.ceil(np.abs(rwalk).max())           # max distance from the origin\n",
    "    W            = np.ceil(np.abs(rwalk[1,:]).max())      # max step length\n",
    "    data_per_bin = np.ceil(float(N_walks)/float(n_bins))  # average number of data in each histogram bin\n",
    "                                                          #    we will use [0,3.5*data_per_bin] for the Frequency range\n",
    "    def ith_path(ns):\n",
    "        path = hv.Path((steps[0:ns+1],rwalk[0:ns+1]),\n",
    "                       label='%d Random walks, uniformly distributed step size'%N_walks)\\\n",
    "               .opts(style=dict(alpha=0.02, color='darkred'))\n",
    "        return path.redim(x=('x','Number of Steps'),y=('y','Distance Moved')).redim.range(x=(0,N_steps_plus_one-1), y=(-D,D))\n",
    "\n",
    "    def ith_histogram(ns):\n",
    "        hist = hv.Histogram( *np.histogram(rwalk[ns], n_bins, density=False))\\\n",
    "               .opts(style=dict(fill_color='darkred', alpha=0.4))\n",
    "        return hist.redim.range(Frequency=(0, 3.5*data_per_bin), x=(-D,D)).relabel('Histogram of Distance Moved at given Step')\n",
    "    \n",
    "    def ith_plot(ns):\n",
    "        h = ith_path     (ns).opts( plot=path_opts ) +\\\n",
    "            ith_histogram(ns).opts( plot=hist_opts )\n",
    "        return h\n",
    "\n",
    "    if useStream:\n",
    "        Step = hv.streams.Stream.define('StepNumber', ns = param.Integer(default=1,bounds=(1,rwalk.shape[0]-1), doc='a step number'))\n",
    "        step=Step()\n",
    "        return hv.DynamicMap(ith_plot, streams=[step]), step\n",
    "    else:\n",
    "        return hv.DynamicMap(ith_plot, kdims=[hv.Dimension(('ns','Number of Steps'), range=(1,N_steps_plus_one-1),step=1, type=int)]), None"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We will need to write these functions to a file later. Since execution of cells can change the cell IDs, capture the functions as strings in a python variable now."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "plot_code =    '\\n# -------------------------------------------------------------------------------------------\\n' +\\\n",
    "In[2]        + '\\n# -------------------------------------------------------------------------------------------\\n' +\\\n",
    "In[3]        + '\\n'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Display the DynamicMap, no stream: the display is controlled by a slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "rwalk            = simulate_random_walk(Nsteps=20, Nwalks=3000, max_step_length=2.)\n",
    "rwalk_plot,step  = random_walk_plot( rwalk )\n",
    "rwalk_plot  # could specify the step to be shown  with  `rwalk_plot[2]` or `rwalk_plot.select(ns=3)`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Display the DynamicMap: the display is controlled by a stream"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# check that we can control the display with the step stream:\n",
    "from IPython.core.display import HTML\n",
    "display(HTML('''\n",
    "<div style=\\\"color:blue;text-align:center;font_size:20px;\\\">\n",
    "Distribution of the Distance from the Starting Point<br>\n",
    "As additional steps are taken, the distribution evolves from uniform to normal\n",
    "</div>\n",
    "'''\n",
    "))\n",
    "\n",
    "rwalk_plot,step  = random_walk_plot( rwalk , useStream=True)\n",
    "rwalk_plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from time import sleep\n",
    "for i in range( 2, rwalk.shape[0]):\n",
    "    sleep(0.4); rwalk_plot.event(ns=i)\n",
    "print('Rwalk plot currently displays step number {ns}'.format(ns=step.ns))\n",
    "sleep(1);rwalk_plot.event(ns=1)\n",
    "print('Rwalk plot has now been reset to step number {ns}'.format(ns=step.ns))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Step 2: display the app in the notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Now let us try this as an app, with the display in the notebook\n",
    "renderer = hv.renderer('bokeh')\n",
    "\n",
    "rwalk        = simulate_random_walk(Nsteps=20, Nwalks=3000, max_step_length=2.)\n",
    "rwalk_plot,_ = random_walk_plot( rwalk, useStream=False )\n",
    "\n",
    "renderer.app(rwalk_plot, show=True, new_window=False)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Step 3\n",
    "Generate the App code.\n",
    "    Next, tweak the display options, and save the code to a python file,<br>\n",
    "    replacing the `renderer.app()` call with `doc = renderer.server_doc(rwalk_plot); doc.title = 'Random Walk Example 1'`\n",
    "\n",
    "    Rather than anything fancy, we just use copy and paste from the cells above to write the code to a file."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "plot_code_header = \\\n",
    "'''# 1D Random Walk with uniformly distributed step size\n",
    "import holoviews as hv\n",
    "import numpy as np\n",
    "import param\n",
    "# -------------------------------------------------------------------------------------------\n",
    "''' \n",
    "\n",
    "plot_code_instantiation = \\\n",
    "'''\n",
    "# -------------------------------------------------------------------------------------------\n",
    "plot,_    = random_walk_plot( simulate_random_walk(Nsteps=20, Nwalks=3000, max_step_length=2.) )\n",
    "\n",
    "import holoviews.plotting.bokeh\n",
    "\n",
    "renderer  = hv.renderer('bokeh')\n",
    "doc       = renderer.server_doc( plot )\n",
    "doc.title = 'Random Walk Example 1'\n",
    "'''\n",
    "# -------------------------------------------------------------------------------------------\n",
    "with open( 'randomwalk_app_V1.py','w') as out:\n",
    "    out.write( plot_code_header )\n",
    "    out.write( plot_code )\n",
    "    out.write( plot_code_instantiation )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "heading_collapsed": true
   },
   "source": [
    "## to try it out, run the following command in a shell:\n",
    "    bokeh serve randomwalk_app_V1.py\n",
    "\n",
    "by default, the app will be displayed at http://localhost:5006"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Enhancement: Add an autoplay feature"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The previous code has a slider: the user can manually explore the data.<br>\n",
    "In this section, we will add a button to provide advancing the state automatically "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.models import Slider, Button\n",
    "from bokeh.io import curdoc\n",
    "from bokeh.layouts import layout\n",
    "\n",
    "def update_doc( doc ):\n",
    "    # --------------------------------------------------------------------\n",
    "    # we will use the same plot as before\n",
    "    Nsteps        = 20\n",
    "    rwalk_plot,ns = random_walk_plot( simulate_random_walk(Nsteps=Nsteps, Nwalks=3000, max_step_length=2.), useStream=True )\n",
    "    rendered_plot = hv.renderer('bokeh').get_plot( rwalk_plot )\n",
    "\n",
    "    def gen_update_plot():\n",
    "        def update_plot():\n",
    "            update_plot.cur_step += 1\n",
    "            if update_plot.cur_step > Nsteps: update_plot.cur_step = 1\n",
    "            ns.event(ns = update_plot.cur_step )\n",
    "        update_plot.cur_step = 1\n",
    "        return update_plot\n",
    "\n",
    "    update_plot = gen_update_plot()\n",
    "    \n",
    "    # --------------------------------------------------------------------\n",
    "    # add a button to start/stop the animation\n",
    "    \n",
    "    play_button_labels = ['► Play', '❚❚ Pause']\n",
    "    play_button = Button(label=play_button_labels[0], width=60)\n",
    "\n",
    "    def gen_animate_plot():\n",
    "        def animate_plot():\n",
    "            if play_button.label == play_button_labels[0]: # not playing\n",
    "                play_button.label = play_button_labels[1]\n",
    "                doc.add_periodic_callback( update_plot, animate_plot.update_rate )\n",
    "            else:\n",
    "                play_button.label = play_button_labels[0]\n",
    "                doc.remove_periodic_callback( update_plot )\n",
    "        animate_plot.update_rate = 400\n",
    "        return animate_plot\n",
    "\n",
    "    animate_plot = gen_animate_plot()\n",
    "\n",
    "    play_button.on_click( animate_plot )\n",
    "\n",
    "    # --------------------------------------------------------------------\n",
    "    # add a button to take a step\n",
    "    next_button = Button(label='Next', width=60)\n",
    "    next_button.on_click( update_plot )\n",
    "\n",
    "    # --------------------------------------------------------------------\n",
    "    # add a slider to control the update rate\n",
    "    \n",
    "    rate_slider = Slider( start=200, end=1000, value=400, step=10, title='Update Rate in msec')\n",
    "    \n",
    "    def set_update_rate( attrname, old, new):\n",
    "        animate_plot.update_rate = new\n",
    "        if play_button.label == play_button_labels[1]:\n",
    "            doc.remove_periodic_callback( update_plot )\n",
    "            doc.add_periodic_callback( update_plot, animate_plot.update_rate )\n",
    "           \n",
    "    rate_slider.on_change('value', set_update_rate )\n",
    "\n",
    "    # -----------------------------------------------------------------\n",
    "    # layout the display\n",
    "    view = layout([ [rendered_plot.state],[rate_slider, play_button, next_button ]], sizing_mode = 'fixed')\n",
    "\n",
    "    doc.add_root( view )\n",
    "    \n",
    "    return doc"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "gui_code = '\\n# -------------------------------------------------------------------------------------------\\n' +\\\n",
    "In[11] + '\\n'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# To display this in the notebook, we need\n",
    "from bokeh.application.handlers import FunctionHandler\n",
    "from bokeh.application import Application\n",
    "from bokeh.io import show as show_app\n",
    "\n",
    "handler = FunctionHandler( update_doc )\n",
    "app     = Application(handler)\n",
    "\n",
    "show_app(app, notebook_url='localhost:8888')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# To deploy this as an app, we again print out the code\n",
    "# Note the layout will be slightly different: we will not fixt the overlapping buttons in the display above...\n",
    "# -------------------------------------------------------------------------------------------\n",
    "with open( 'randomwalk_app_V2.py','w') as out:\n",
    "    out.write( plot_code_header )\n",
    "    out.write( plot_code )\n",
    "    out.write( gui_code )\n",
    "    out.write( '''\n",
    "renderer = hv.renderer('bokeh')\n",
    "doc = update_doc( curdoc() )\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.5.3"
  },
  "latex_envs": {
   "LaTeX_envs_menu_present": true,
   "autocomplete": true,
   "bibliofile": "biblio.bib",
   "cite_by": "apalike",
   "current_citInitial": 1,
   "eqLabelWithNumbers": true,
   "eqNumInitial": 1,
   "hotkeys": {
    "equation": "Ctrl-E",
    "itemize": "Ctrl-I"
   },
   "labels_anchors": false,
   "latex_user_defs": false,
   "report_style_numbering": false,
   "user_envs_cfg": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}