02 - Interactivity.ipynb

{
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  },
  "name": "",
  "signature": "sha256:d6970f0dbe2d5c0109ba71ab9604bff19b3d0092d500bedbcf278025d67421c0"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Using Interact"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The `interact` function (`IPython.html.widgets.interact`) automatically creates a graphical user interface (GUI) for exploring code and data interactively. It is the easiest way to get started using IPython's widgets."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from __future__ import print_function\n",
      "from IPython.html.widgets import interact, interactive, fixed\n",
      "from IPython.html import widgets"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Basic `interact`"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "At the most basic level, `interact` autogenerates UI controls for function arguments, and then calls the function with those arguments when you manipulate the controls interactively. To use `interact`, you need to define a function that you want to explore. Here is a function that prints its only argument `x`."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def f(x):\n",
      "    print(x)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "When you pass this function as the first argument to `interact` along with an integer keyword argument (`x=10`), a slider is generated and bound to the function."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=10);"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "When you move the slider, the function is called and the current value of `x` is printed.\n",
      "\n",
      "If you pass `True` or `False`, `interact` will generate a checkbox:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=True);"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "If you pass a string, `interact` will generate a text area."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x='Hi there!');"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "`interact` can also be used as a decorator. This allows you to define a function and interact with it in a single shot. As this example shows, `interact` also works with functions that have multiple arguments."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "@interact(x=True, y=1.0)\n",
      "def g(x, y):\n",
      "    print(x, y)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Fixing arguments using `fixed`"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "There are times when you may want to explore a function using `interact`, but fix one or more of its arguments to specific values. This can be accomplished by wrapping values with the `fixed` function."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def h(p, q):\n",
      "    print(p, q)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "When we call `interact`, we pass `fixed(20)` for q to hold it fixed at a value of `20`."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(h, p=5, q=fixed(20));"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Notice that a slider is only produced for `p` as the value of `q` is fixed."
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Widget abbreviations"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "When you pass an integer valued keyword argument (`x=10`) to `interact`, it generates an integer valued slider control with a range of $[-10,+3\\times10]$. In this case `10` is an *abbreviation* for an actual slider widget:\n",
      "\n",
      "```python\n",
      "IntSliderWidget(min=-10,max=30,step=1,value=10)\n",
      "```\n",
      "\n",
      "In fact, we can get the same result if we pass this `IntSliderWidget` as the keyword argument for `x`:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=widgets.IntSliderWidget(min=-10,max=30,step=1,value=10));"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "This examples clarifies how `interact` proceses its keyword arguments:\n",
      "\n",
      "1. If the keyword argument is `Widget` instance with a `value` attribute, that widget is used. Any widget with a `value` attribute can be used, even custom ones.\n",
      "2. Otherwise, the value is treated as a *widget abbreviation* that is converted to a widget before it is used.\n",
      "\n",
      "The following table gives an overview of different widget abbreviations:\n",
      "\n",
      "<table class=\"table table-condensed table-bordered\">\n",
      "  <tr><td><strong>Keyword argument</strong></td><td><strong>Widget</strong></td></tr>  \n",
      "  <tr><td>`True` or `False`</td><td>CheckboxWidget</td></tr>  \n",
      "  <tr><td>`'Hi there'`</td><td>TextareaWidget</td></tr>\n",
      "  <tr><td>`value` or `(min,max)` or `(min,max,step)` if integers are passed</td><td>IntSliderWidget</td></tr>\n",
      "  <tr><td>`value` or `(min,max)` or `(min,max,step)` if floats are passed</td><td>FloatSliderWidget</td></tr>\n",
      "  <tr><td>`('orange','apple')` or `{'one':1,'two':2}`</td><td>Dropdown</td></tr>\n",
      "</table>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You have seen how the checkbox and textarea widgets work above. Here, more details about the different abbreviations for sliders and dropdowns are given.\n",
      "\n",
      "If a 2-tuple of integers is passed `(min,max)` a integer valued slider is produced with those minimum and maximum (inclusive) values. In this case, the default step size of `1` is used."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=(0,4));"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "If a 3-tuple of integers is passed `(min,max,step)` the step size can also be set."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=(0,8,2));"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "A float valued slider is produced if the elements of the tuples are floats. Here the minimum is `0.0`, the maximum is `10.0` and step size is `0.1` (the default)."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=(0.0,10.0));"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The step size can be changed by passing a 3rd element in the tuple."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=(0.0,10.0,0.01));"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "For both integer and float valued sliders, you can pick the initial value of the widget by passing a default keyword argument to the underlying Python function. Here we set the initial value of a float slider to `5.5`."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def h(x=5.5):\n",
      "    print(x)\n",
      "    \n",
      "interact(h, x=(0.0,20.0,0.5));"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Dropdown menus can be produced by passing a tuple of strings. In this case, the strings are both used as the names in the dropdown menu UI and passed to the underlying Python function."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x=('apples','oranges'));"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "If you want a dropdown menu that passes non-string values to the Python function, you can pass a dictionary. The keys in the dictionary are used for the names in the dropdown menu UI and the values are the arguments that are passed to the underlying Python function."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "interact(f, x={'one': 10, 'two': 20});"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "`interactive`"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In addition to `interact` IPython provides another function, `interactive`, that is useful when you want to reuse the widget that are produced or access the data that is bound to the UI controls."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Here is a function that returns the sum of its two arguments."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def f(a, b):\n",
      "    return a+b"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Unlike `interact`, `interactive` returns a `Widget` instance rather than immediately displaying the widget."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w = interactive(f, a=10, b=20)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The widget is a `ContainerWidget`, which is a container for other widgets."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "type(w)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The children of the `ContainerWidget` are two integer valued sliders produced by the widget abbreviations above."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w.children"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To actually display the widgets, you can use IPython's `display` function."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display\n",
      "display(w)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Or return the value"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "w"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "At this point, the UI controls work just like they would if `interact` had been used. You can manipulate them interactively and the function will be called. However, the widget instance returned by `interactive` also give you access to the current keyword arguments and return value of the underlying Python function.\n",
      "\n",
      "Here are the current keyword arguments. If you rerun this cell after manipulating the sliders, the values will have changed."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w.kwargs"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Here is the current return value of the function."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w.result"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Plotting with Matplotlib"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "IPython works with the [Matplotlib](http://matplotlib.org/) plotting library, which integrates Matplotlib with IPython's display system and event loop handling."
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "matplotlib mode"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To make plots using Matplotlib, you must first enable IPython's matplotlib mode.\n",
      "\n",
      "To do this, run the `%matplotlib` magic command to enable plotting in the current Notebook.\n",
      "\n",
      "This magic takes an optional argument that specifies which Matplotlib backend should be used.  Most of the time, in the Notebook, you will want to use the `inline` backend, which will embed plots inside the Notebook:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%matplotlib inline"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You can also use Matplotlib GUI backends in the Notebook, such as the Qt backend (`%matplotlib qt`). This will use Matplotlib's interactive Qt UI in a floating window to the side of your browser. Of course, this only works if your browser is running on the same system as the Notebook Server.  You can always call the `display` function to paste figures into the Notebook document."
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Making a simple plot"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "With matplotlib enabled, plotting should just work."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import matplotlib.pyplot as plt\n",
      "import numpy as np"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "x = np.linspace(0, 3*np.pi, 500)\n",
      "plt.plot(x, np.sin(x**2))\n",
      "plt.title('A simple chirp');"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "These images can be resized by dragging the handle in the lower right corner.  Double clicking will return them to their original size."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "One thing to be aware of is that by default, the `Figure` object is cleared at the end of each cell, so you will need to issue all plotting commands for a single figure in a single cell."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "For vector image plots, use the following config."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%config InlineBackend.figure_format = 'svg'"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "x = np.linspace(0, 3*np.pi, 500)\n",
      "plt.plot(x, np.sin(x**2))\n",
      "plt.title('A simple chirp');"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Loading Matplotlib demos with %load"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "IPython's `%load` magic can be used to load any Matplotlib demo by its URL:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load http://matplotlib.org/mpl_examples/showcase/integral_demo.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "\"\"\"\n",
      "Plot demonstrating the integral as the area under a curve.\n",
      "\n",
      "Although this is a simple example, it demonstrates some important tweaks:\n",
      "\n",
      "    * A simple line plot with custom color and line width.\n",
      "    * A shaded region created using a Polygon patch.\n",
      "    * A text label with mathtext rendering.\n",
      "    * figtext calls to label the x- and y-axes.\n",
      "    * Use of axis spines to hide the top and right spines.\n",
      "    * Custom tick placement and labels.\n",
      "\"\"\"\n",
      "import numpy as np\n",
      "import matplotlib.pyplot as plt\n",
      "from matplotlib.patches import Polygon\n",
      "\n",
      "\n",
      "def func(x):\n",
      "    return (x - 3) * (x - 5) * (x - 7) + 85\n",
      "\n",
      "\n",
      "a, b = 2, 9 # integral limits\n",
      "x = np.linspace(0, 10)\n",
      "y = func(x)\n",
      "\n",
      "fig, ax = plt.subplots()\n",
      "plt.plot(x, y, 'r', linewidth=2)\n",
      "plt.ylim(ymin=0)\n",
      "\n",
      "# Make the shaded region\n",
      "ix = np.linspace(a, b)\n",
      "iy = func(ix)\n",
      "verts = [(a, 0)] + list(zip(ix, iy)) + [(b, 0)]\n",
      "poly = Polygon(verts, facecolor='0.9', edgecolor='0.5')\n",
      "ax.add_patch(poly)\n",
      "\n",
      "plt.text(0.5 * (a + b), 30, r\"$\\int_a^b f(x)\\mathrm{d}x$\",\n",
      "         horizontalalignment='center', fontsize=20)\n",
      "\n",
      "plt.figtext(0.9, 0.05, '$x$')\n",
      "plt.figtext(0.1, 0.9, '$y$')\n",
      "\n",
      "ax.spines['right'].set_visible(False)\n",
      "ax.spines['top'].set_visible(False)\n",
      "ax.xaxis.set_ticks_position('bottom')\n",
      "\n",
      "ax.set_xticks((a, b))\n",
      "ax.set_xticklabels(('$a$', '$b$'))\n",
      "ax.set_yticks([])\n",
      "\n",
      "plt.show()\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Interactive Plots"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Interact can also be used with almost any function with supported parameter types, including those that output matplotlib plots.  In the following example, a function that plots the sum of two sine waves is interacted with."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "@interact(frequency1=20., frequency2=21.)\n",
      "def plot_waves(frequency1, frequency2):\n",
      "    x = np.linspace(0, 3*np.pi, 500)\n",
      "    plt.plot(x, np.sin(x*frequency1) + np.sin(x*frequency2))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Exercises"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "String sorting"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "- Write a `sort_string` function that takes a string as its input and prints a new string consisting of the original one, sorted. \n",
      "- Add a `reverse` keyword argument with a default of False to allow for the sorting to be done in reverse.  \n",
      "- Then, use interact to create a user interface for exploring your sort_string function.  "
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/string_sorting.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Plotting with parameters"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Write a `plot_sin` function that plots $sin(ax+b)$ over the interval [0,4\u03c0].  \n",
      "Then use interact to create a user interface for exploring your function:\n",
      "- a should be a floating point number over the interval [0.0,5.0].  \n",
      "- b should be a floating point number over the interval [\u22125.0,5.0].  "
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/param_plot_1.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In matplotlib, the line style and color can be set with a third argument to plot. Examples of this argument:  \n",
      "dashed red: r--  \n",
      "blue circles: bo  \n",
      "dotted black: k.  \n",
      "\n",
      "Add a `style` argument to your `plot_sin` function that allows you to set the line style of the plot.\n",
      "\n",
      "Use interact to create a UI for `plot_sin` that has a drop down menu for selecting the line style between a dotted red line and a dashed black line. This time use interact as a decorator."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/param_plot_2.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}