Python_Plotting_Interact.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactive `matplotlib`\n",
    "\n",
    "* Jupyter notebooks are not the best platform to do interactive stuff\n",
    "* It is slow and eats a lot of CPU and RAM\n",
    "* These examples use the `ipywidgets` library\n",
    "* You can do **SO MUCH MORE** than these simple examples\n",
    "* Take a look at an [overview of ipywidgets](https://coderzcolumn.com/tutorials/python/interactive-widgets-in-jupyter-notebook-using-ipywidgets) and the [ipywidgets users guide](https://ipywidgets.readthedocs.io/en/7.6.5/user_guide.html) if you really want to go to town"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    }
   },
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "\n",
    "import ipywidgets as wd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    }
   },
   "outputs": [],
   "source": [
    "plt.style.use('ggplot')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## We will use this example from class\n",
    "\n",
    "$$\\large\n",
    "y = e^{-x/3} \\cos(\\pi x) \\hspace{1cm} [\\ 0 < x < 3\\pi\\ ]\n",
    "$$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    }
   },
   "outputs": [],
   "source": [
    "fig, ax = plt.subplots(\n",
    "    figsize = (8, 5), \n",
    "    constrained_layout = True\n",
    ")\n",
    "\n",
    "my_x = np.linspace(0, 3*np.pi, 1000)\n",
    "my_y = np.cos(np.pi*my_x) * np.exp(-my_x/3)\n",
    "\n",
    "ax.set_xlim(0.0, 6.0)\n",
    "ax.set_ylim(-1.5, 1.5)\n",
    "\n",
    "ax.set_xlabel('Time (s)')\n",
    "ax.set_ylabel('Voltage (mV)')\n",
    "ax.set_title('Circut Output')\n",
    "\n",
    "ax.plot(my_x, my_y,\n",
    "        color = 'MidnightBlue',\n",
    "        marker = 'None',\n",
    "        linestyle = '-',\n",
    "        linewidth = 3);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Let us turn the plot into a function so I can change stuff\n",
    "\n",
    "* I have added a frequency (n) to the function, inside the `np.cos()`\n",
    "* Note: I have added a `plt.show()` to the end. We will need this for the interactive stuff later\n",
    "\n",
    "$$\\large\n",
    "y = e^{-x/3} \\cos(n \\pi x) \\hspace{1cm} [\\ 0 < x < 3\\pi\\ ]\n",
    "$$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def my_plot(freq_n):\n",
    "    \n",
    "    my_x = np.linspace(0, 3*np.pi, 1000)\n",
    "    my_y = np.cos(freq_n * np.pi * my_x) * np.exp(-my_x/3)\n",
    "    \n",
    "    fig, ax = plt.subplots(\n",
    "        figsize = (8, 5), \n",
    "        constrained_layout = True\n",
    "    )\n",
    "    \n",
    "    ax.set_xlim(0.0, 6.0)\n",
    "    ax.set_ylim(-1.5, 1.5)\n",
    "\n",
    "    ax.set_xlabel('Time (s)')\n",
    "    ax.set_ylabel('Voltage (mV)')\n",
    "    ax.set_title('Circut Output')\n",
    "\n",
    "    ax.plot(my_x, my_y,\n",
    "        color = 'MidnightBlue',\n",
    "        marker = 'None',\n",
    "        linestyle = '-',\n",
    "        linewidth = 3)\n",
    "    \n",
    "    plt.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Plot `my_plot` with `freq_n = 2.34`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "my_plot(0.34)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "----\n",
    "# Interactive Stuff"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Let us create a slider button widget\n",
    "\n",
    "* Default value of 2.0\n",
    "* Range: 1.0 to 10.0\n",
    "* Steps of 0.1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "freq_slider = wd.FloatSlider(\n",
    "    value=2.0,\n",
    "    min=1.0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Frequency:',\n",
    "    readout_format='.1f',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### You can interact with the slider to change the values"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "freq_slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Put the Plot and Slider together using the `interactive()` function\n",
    "\n",
    "\n",
    "* User the `freq_slider` for the value of `freq_n` in `my_plot` \n",
    "* Move the slider and the plot changes!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "wd.interactive(my_plot, freq_n = freq_slider)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Let us change the function a bit more\n",
    "\n",
    "* I have added a decay time (t) to the function\n",
    "\n",
    "$$\\large\n",
    "y = e^{-x/t} \\cos(n \\pi x) \\hspace{1cm} [\\ 0 < x < 3\\pi\\ ]\n",
    "$$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def my_plot(freq_n, decay_t):\n",
    "    \n",
    "    my_x = np.linspace(0, 3*np.pi, 1000)\n",
    "    my_y = np.cos(freq_n * np.pi * my_x) * np.exp(-my_x / decay_t)\n",
    "    \n",
    "    fig, ax = plt.subplots(\n",
    "        figsize = (8, 5), \n",
    "        constrained_layout = True\n",
    "    )\n",
    "    \n",
    "    ax.set_xlim(0.0, 6.0)\n",
    "    ax.set_ylim(-1.5, 1.5)\n",
    "\n",
    "    ax.set_xlabel('Time (s)')\n",
    "    ax.set_ylabel('Voltage (mV)')\n",
    "    ax.set_title('Circut Output')\n",
    "\n",
    "    ax.plot(my_x, my_y,\n",
    "        color = 'MidnightBlue',\n",
    "        marker = 'None',\n",
    "        linestyle = '-',\n",
    "        linewidth = 3)\n",
    "    \n",
    "    plt.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Let us create a another slider button widget\n",
    "\n",
    "* Default value of 3.0\n",
    "* Range: 0.5 to 20.0\n",
    "* Steps of 0.25"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "decay_slider = wd.FloatSlider(\n",
    "    value=3.0,\n",
    "    min=0.5,\n",
    "    max=20.0,\n",
    "    step=0.25,\n",
    "    description='Decay Time:',\n",
    "    readout_format='.2f',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "wd.interactive(my_plot, freq_n = freq_slider, decay_t = decay_slider)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `interactive_output`\n",
    "\n",
    "`interactive_output` does not generate output UI (user interface) but it lets us create UI, organize them in a box and pass them to it. This gives us more control over the layout of widgets."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "my_ui = wd.HBox([freq_slider, decay_slider])\n",
    "\n",
    "my_out = wd.interactive_output(my_plot, \n",
    "                               {'freq_n' : freq_slider, 'decay_t': decay_slider}\n",
    "                              )\n",
    "\n",
    "display(my_out, my_ui)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `ipywidgets` has a HUGE amount of layout control to make any type of UI you would want: [ipywidgets styling](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "----\n",
    "\n",
    "# Interactive Plots and high CPU/Memory use - `interact_manual()`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Really complicated plots can really stress the poor JupyterHub server!\n",
    "\n",
    "`interact_manual()` prevents  UI updates after widget values are changed and provides a button that when pressed pressing which will run a function after widget value changes with this new value. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    }
   },
   "outputs": [],
   "source": [
    "from mpl_toolkits.mplot3d import Axes3D"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    }
   },
   "outputs": [],
   "source": [
    "def my_cube_plot(my_azimuth, my_elevation):\n",
    "    \n",
    "    fig, ax = plt.subplots(\n",
    "        subplot_kw={'projection': '3d'},\n",
    "        figsize = (9, 9), \n",
    "        constrained_layout = True\n",
    "    )\n",
    "\n",
    "    ax.set_xlabel('This is X')\n",
    "    ax.set_ylabel('This is Y')\n",
    "    ax.set_zlabel('This is Z')\n",
    "\n",
    "    my_theta = np.linspace(0, 2*np.pi, 1000)\n",
    "    my_x = my_theta  \n",
    "    my_y = np.cos(3 * my_theta)\n",
    "    my_z = np.sin(2 * my_theta)\n",
    "\n",
    "    ax.plot(my_x, my_y, my_z,\n",
    "            color = 'Firebrick',\n",
    "            marker = 'None',\n",
    "            linestyle = '--',\n",
    "            linewidth = 3);\n",
    "\n",
    "    ax.view_init(azim = my_azimuth, elev = my_elevation)\n",
    "    \n",
    "    plt.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "my_cube_plot(15, 45)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "azimuth_slider = wd.IntSlider(\n",
    "    value=45,\n",
    "    min=0,\n",
    "    max=360,\n",
    "    step=1,\n",
    "    description='Azimuth:'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "elevation_slider = wd.IntSlider(\n",
    "    value=45,\n",
    "    min=0,\n",
    "    max=90,\n",
    "    step=1,\n",
    "    description='Elevation:'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "wd.interact_manual(my_cube_plot, my_azimuth = azimuth_slider, my_elevation = elevation_slider)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}