Improve example Notebook

Using the ipywidgets new layouts

Signed-off-by: martinRenou <[email protected]>

Author: martinRenou

examples/ipympl.ipynb

@@ -20,7 +20,10 @@
     "# Enabling the `widget` backend.\n",
     "# This requires jupyter-matplotlib a.k.a. ipympl.\n",
     "# ipympl can be install via pip or conda.\n",
-    "%matplotlib widget"
+    "%matplotlib widget\n",
+    "\n",
+    "import matplotlib.pyplot as plt\n",
+    "import numpy as np"
    ]
   },
   {
@@ -30,9 +33,6 @@
    "outputs": [],
    "source": [
     "# Testing matplotlib interactions with a simple plot\n",
-    "import matplotlib.pyplot as plt\n",
-    "import numpy as np\n",
-    "\n",
     "fig = plt.figure()\n",
     "plt.plot(np.sin(np.linspace(0, 20, 100)));"
    ]
@@ -65,6 +65,13 @@
     "fig.canvas"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# 3D plotting"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -85,6 +92,13 @@
     "plt.show()"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Subplots"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -138,6 +152,13 @@
     "fig.canvas.toolbar_visible = False"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Interactions with other widgets and layouting"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -146,36 +167,46 @@
    "source": [
     "# When using the `widget` backend from ipympl,\n",
     "# fig.canvas is a proper Jupyter interactive widget, which can be embedded in\n",
-    "# Layout classes like HBox and Vbox.\n",
+    "# an ipywidgets layout. See https://ipywidgets.readthedocs.io/en/stable/examples/Layout%20Templates.html\n",
     "\n",
     "# One can bound figure attributes to other widget values.\n",
-    "\n",
-    "from ipywidgets import HBox, FloatSlider\n",
+    "from ipywidgets import AppLayout, FloatSlider\n",
     "\n",
     "plt.ioff()\n",
     "\n",
     "slider = FloatSlider(\n",
-    "    orientation='vertical',\n",
+    "    orientation='horizontal',\n",
+    "    description='Factor:',\n",
     "    value=1.0,\n",
     "    min=0.02,\n",
     "    max=2.0\n",
     ")\n",
     "\n",
+    "slider.layout.margin = '0px 30% 0px 30%'\n",
+    "slider.layout.width = '40%'\n",
+    "\n",
     "fig = plt.figure()\n",
+    "fig.canvas.header_visible = False\n",
+    "fig.canvas.layout.min_height = '400px'\n",
+    "plt.title('Plotting: y=sin({} * x)'.format(slider.value))\n",
     "\n",
     "x = np.linspace(0, 20, 500)\n",
     "\n",
-    "lines = plt.plot(x, np.sin(slider.value  * x))\n",
+    "lines = plt.plot(x, np.sin(slider.value * x))\n",
     "\n",
     "def update_lines(change):\n",
+    "    plt.title('Plotting: y=sin({} * x)'.format(change.new))\n",
     "    lines[0].set_data(x, np.sin(change.new * x))\n",
     "    fig.canvas.draw()\n",
     "    fig.canvas.flush_events()\n",
     "\n",
     "slider.observe(update_lines, names='value')\n",
-    "fig.canvas.toolbar_visible = False\n",
     "\n",
-    "HBox([slider, fig.canvas])"
+    "AppLayout(\n",
+    "    center=fig.canvas,\n",
+    "    footer=slider,\n",
+    "    pane_heights=[0, 6, 1]\n",
+    ")"
    ]
   }
  ],