modernize matplotlib sections of interact notebook

Author: ianhi

notebooks/02.Interact/02.00-Using-Interact.ipynb

@@ -25,7 +25,9 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "outputs": [],
    "source": [
     "from ipywidgets import interact, interactive, fixed, interact_manual\n",
@@ -294,10 +296,12 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "outputs": [],
    "source": [
-    "# %load solutions/reverse-text.py\n"
+    "# %load solutions/reverse-text.py"
    ]
   },
   {
@@ -351,47 +355,59 @@
    ]
   },
   {
-   "cell_type": "markdown",
+   "cell_type": "code",
+   "execution_count": null,
    "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
    "source": [
     "## Basic interactive plot\n",
     "\n",
-    "Though the examples so far in this notebook had very basic output, more interesting possibilities are straightforward. \n",
     "\n",
-    "The function below plots a straight line whose slope and intercept are given by its arguments."
+    "The function below plots a straight line whose slope and intercept are given by its arguments.\n",
+    "\n",
+    "The interactive below displays a line whose slope and intercept is set by the sliders. Note that if the variable containing the widget, `interactive_plot`, is the last thing in the cell it is displayed."
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "outputs": [],
    "source": [
-    "%matplotlib widget\n",
     "import matplotlib.pyplot as plt\n",
     "import numpy as np\n",
-    "\n",
     "def f(m, b):\n",
     "    plt.figure(2)\n",
     "    plt.clf()\n",
     "    plt.grid()\n",
     "    x = np.linspace(-10, 10, num=1000)\n",
     "    plt.plot(x, m * x + b)\n",
     "    plt.ylim(-5, 5)\n",
-    "    plt.show()\n"
+    "    plt.show()"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The interactive below displays a line whose slope and intercept is set by the sliders. Note that if the variable containing the widget, `interactive_plot`, is the last thing in the cell it is displayed."
+    "The interactive below displays a line whose slope and intercept is set by the sliders."
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "outputs": [],
    "source": [
     "interact(f, m=(-2.0, 2.0), b=(-3, 3, 0.5))"
@@ -401,41 +417,128 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "### Exercise: Make a plot\n",
+    "## Fully interactive plot\n",
+    "\n",
+    "While the above example works, it has some drawbacks:\n",
+    "1. It is inefficient to re-run all the plotting code\n",
+    "2. No zooming or panning\n",
+    "3. Screen can jump when moving the sliders\n",
     "\n",
-    "Here is a python function that, given $k$ and $p$, plots $f(x) = \\sin(k x - p)$.\n"
+    "A better solution is to use the [ipympl](https://matplotlib.org/ipympl/) Matplotlib backend. You can activate this with the line magic: `%matplotlib ipympl`. Then in your interactive function you update the matplotlib artists."
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "# activate the widget based backend.\n",
+    "%matplotlib ipympl\n",
+    "\n",
+    "x = np.linspace(-10, 10, num=1000)\n",
+    "m, b = 0, 0\n",
+    "\n",
+    "fig, ax = plt.subplots()\n",
+    "ax.grid()\n",
+    "ax.set_ylim(-5, 5)\n",
+    "line = ax.plot(x, m * x + b)[0]\n",
+    "\n",
+    "\n",
+    "@interact(m=(-2.0, 2.0), b=(-3, 3, 0.5))\n",
+    "def update_line(m, b):\n",
+    "    # use matplotlib functions to update the canvas\n",
+    "    line.set_ydata(m * x + b)\n",
+    "    fig.canvas.draw_idle()\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
    "metadata": {},
+   "source": [
+    "## mpl-interactions\n",
+    "\n",
+    "The [mpl-interactions](https://mpl-interactions.readthedocs.io/en/stable/) library can automate the updating of Matplotlib artists for you. non-matplotlib kwargs to functions like `plot` will be interpted to sliders and widget controls similarly to `interact` and automatically connected with the matplotlib artists."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
    "outputs": [],
    "source": [
-    "def plot_f(k, p):\n",
-    "    plt.figure(5)\n",
-    "    plt.clf()\n",
-    "    plt.grid()\n",
-    "    x = np.linspace(0, 4 * np.pi)\n",
-    "    y = np.sin(k*x - p)\n",
-    "    plt.plot(x, y)\n",
-    "    plt.show()"
+    "from mpl_interactions import ipyplot as iplt\n",
+    "\n",
+    "fig, ax = plt.subplots()\n",
+    "ax.grid()\n",
+    "ax.set_ylim(-5,5)\n",
+    "\n",
+    "# define function in a way you can re-use in calculations\n",
+    "def f(x, m, b):\n",
+    "    return m * x + b\n",
+    "    \n",
+    "ctrls = iplt.plot(x, f, m = (-2,2), b=(-3, 3, 10))\n"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Copy the above function definition and make it interactive using `interact`, so that there are sliders for the parameters $k$ and $p$, where $0.5\\leq k \\leq 2$ and $0 \\leq p \\leq 2\\pi$ (hint: use `np.pi` for $\\pi$)."
+    "### Exercise: Make a plot\n",
+    "\n",
+    "Here is an example of making a plot of $f(x) = \\sin(k x - p)$.\n"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "x = np.linspace(0, 4 * np.pi, 100)\n",
+    "k = 1\n",
+    "p = np.pi\n",
+    "\n",
+    "def f(x, k, p):\n",
+    "    return np.sin(k*x -p)\n",
+    "fig, ax = plt.subplots()\n",
+    "ax.grid()\n",
+    "ax.plot(x, f(x, k, p))\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
    "metadata": {},
+   "source": [
+    "Copy the above function definition and make it interactive using `interact` or `mpl-interactions`, so that there are sliders for the parameters $k$ and $p$, where $0.5\\leq k \\leq 2$ and $0 \\leq p \\leq 2\\pi$ (hint: use `np.pi` for $\\pi$)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "# %load solutions/plot-function-interact.py"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
    "outputs": [],
    "source": [
-    "# %load solutions/plot-function.py"
+    "# %load solutions/plot-function-mpl-inter.py"
    ]
   },
   {
@@ -460,9 +563,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "widgets-tutorial",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
-   "name": "widgets-tutorial"
+   "name": "python3"
   },
   "language_info": {
    "codemirror_mode": {
@@ -474,7 +577,14 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.9.13"
+  },
+  "widgets": {
+   "application/vnd.jupyter.widget-state+json": {
+    "state": {},
+    "version_major": 2,
+    "version_minor": 0
+   }
   }
  },
  "nbformat": 4,

notebooks/02.Interact/solutions/plot-function-interact.py

@@ -0,0 +1,12 @@
+# with interact
+
+fig, ax = plt.subplots()
+ax.grid()
+line = ax.plot(x, f(x, k, p))[0]
+
+def plot_f(k, p):
+    line.set_ydata(f(x, k, p))
+    fig.canvas.draw_idle()
+    
+    
+interact(plot_f, k=(0.5, 2), p=(0, 2 * np.pi))

notebooks/02.Interact/solutions/plot-function-mpl-inter.py

@@ -0,0 +1,3 @@
+fig, ax = plt.subplots()
+ax.grid()
+ctrls = iplt.plot(x, f, k=(.5, 2), p=(0, 2*np.pi))