j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/.ipynb_checkpoints/Linking Plots With Widgets-checkpoint.ipynb

@@ -0,0 +1,326 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Building interactive plots using `bqplot` and `ipywidgets`"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "* `bqplot` is built on top of the `ipywidgets` framework\n",
+    "* `ipwidgets` and `bqplot` widgets can be seamlessly integrated to build interactive plots\n",
+    "* `bqplot` figure widgets can be stacked with UI controls available in `ipywidgets` by using `Layout` classes (Box, HBox, VBox) in `ipywidgets`\n",
+    "(Note that *only* `Figure` objects (not `Mark` objects) inherit from `DOMWidget` class and can be combined with other widgets from `ipywidgets`)\n",
+    "* Trait attributes of widgets can be linked using callbacks. Callbacks should be registered using the `observe` method\n",
+    "\n",
+    "Please follow these links for detailed documentation on:\n",
+    "1. [Layout and Styling of Jupyter Widgets](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Styling.html)\n",
+    "*  [Linking Widgets](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Events.html)\n",
+    "\n",
+    "<br>Let's look at examples of linking plots with UI controls"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import ipywidgets as widgets\n",
+    "from ipywidgets import interact, Layout, IntSlider, FloatSlider"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Update the plot on a button click"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "d92dcdfef7254641a947a4f28e0fbe0e",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(Figure(animation_duration=750, axes=[Axis(scale=LinearScale()), Axis(orientation='vertical', sc…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "y = np.random.randn(100).cumsum()  # simple random walk\n",
+    "\n",
+    "# create a button\n",
+    "update_btn = widgets.Button(description=\"Update\", button_style=\"success\")\n",
+    "\n",
+    "# create a figure widget\n",
+    "fig1 = plt.figure(animation_duration=750)\n",
+    "line = plt.plot(y)\n",
+    "\n",
+    "# define an on_click function\n",
+    "def on_btn_click(btn):\n",
+    "    # update the y attribute of line mark\n",
+    "    line.y = np.random.randn(100).cumsum()  # another random walk\n",
+    "\n",
+    "\n",
+    "# register the on_click function\n",
+    "update_btn.on_click(on_btn_click)\n",
+    "\n",
+    "# stack button and figure using VBox\n",
+    "widgets.VBox([fig1, update_btn])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's look at an example where we link a plot to a dropdown menu"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd\n",
+    "\n",
+    "# create a dummy time series for 5 dummy stock tickers\n",
+    "dates = pd.date_range(start=\"20180101\", end=\"20181231\")\n",
+    "n = len(dates)\n",
+    "tickers = list(\"ABCDE\")\n",
+    "prices = pd.DataFrame(np.random.randn(n, 5).cumsum(axis=0), columns=tickers)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "ebf6ff3b071249bd8168bc8f22232336",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(Dropdown(description='Ticker', options=('A', 'B', 'C', 'D', 'E'), value='A'), Figure(axes=[Axis…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# create a dropdown menu for tickers\n",
+    "dropdown = widgets.Dropdown(description=\"Ticker\", options=tickers)\n",
+    "\n",
+    "# create figure for plotting time series\n",
+    "current_ticker = dropdown.value\n",
+    "fig_title_tmpl = '\"{}\" Time Series'  # string template for title of the figure\n",
+    "fig2 = plt.figure(title=fig_title_tmpl.format(current_ticker))\n",
+    "fig2.layout.width = \"900px\"\n",
+    "time_series = plt.plot(dates, prices[current_ticker])\n",
+    "plt.xlabel(\"Date\")\n",
+    "plt.ylabel(\"Price\")\n",
+    "\n",
+    "# 1. create a callback which updates the plot when dropdown item is selected\n",
+    "def update_plot(*args):\n",
+    "    selected_ticker = dropdown.value\n",
+    "\n",
+    "    # update the y attribute of the mark by selecting\n",
+    "    # the column from the price data frame\n",
+    "    time_series.y = prices[selected_ticker]\n",
+    "\n",
+    "    # update the title of the figure\n",
+    "    fig2.title = fig_title_tmpl.format(selected_ticker)\n",
+    "\n",
+    "\n",
+    "# 2. register the callback by using the 'observe' method\n",
+    "dropdown.observe(update_plot, \"value\")\n",
+    "\n",
+    "# stack the dropdown and fig widgets using VBox\n",
+    "widgets.VBox([dropdown, fig2])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's now create a scatter plot where we select X and Y data from the two dropdown menus"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "38e7e130765f4822b773bcc6647812ec",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(HBox(children=(Dropdown(description='X', options=('A', 'B', 'C', 'D', 'E'), value='A'), Dropdow…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# create two dropdown menus for X and Y attributes of scatter\n",
+    "x_dropdown = widgets.Dropdown(description=\"X\", options=tickers, value=\"A\")\n",
+    "y_dropdown = widgets.Dropdown(description=\"Y\", options=tickers, value=\"B\")\n",
+    "\n",
+    "# create figure for plotting the scatter\n",
+    "x_ticker = x_dropdown.value\n",
+    "y_ticker = y_dropdown.value\n",
+    "\n",
+    "# set up fig_margin to allow space to display color bar\n",
+    "fig_margin = dict(top=20, bottom=40, left=60, right=80)\n",
+    "fig3 = plt.figure(animation_duration=1000, fig_margin=fig_margin)\n",
+    "\n",
+    "# custom axis options for color data\n",
+    "axes_options = {\"color\": {\"tick_format\": \"%m/%y\", \"side\": \"right\", \"num_ticks\": 5}}\n",
+    "scatter = plt.scatter(\n",
+    "    x=prices[x_ticker],\n",
+    "    y=prices[y_ticker],\n",
+    "    color=dates,  # represent chronology using color scale\n",
+    "    stroke=\"black\",\n",
+    "    colors=[\"red\"],\n",
+    "    default_size=32,\n",
+    "    axes_options=axes_options,\n",
+    ")\n",
+    "plt.xlabel(x_ticker)\n",
+    "plt.ylabel(y_ticker)\n",
+    "\n",
+    "# 1. create a callback which updates the plot when dropdown item is selected\n",
+    "def update_scatter(*args):\n",
+    "    x_ticker = x_dropdown.value\n",
+    "    y_ticker = y_dropdown.value\n",
+    "\n",
+    "    # update the x and y attributes of the mark by selecting\n",
+    "    # the column from the price data frame\n",
+    "    with scatter.hold_sync():\n",
+    "        scatter.x = prices[x_ticker]\n",
+    "        scatter.y = prices[y_ticker]\n",
+    "\n",
+    "    # update the title of the figure\n",
+    "    plt.xlabel(x_ticker)\n",
+    "    plt.ylabel(y_ticker)\n",
+    "\n",
+    "\n",
+    "# 2. register the callback by using the 'observe' method\n",
+    "x_dropdown.observe(update_scatter, \"value\")\n",
+    "y_dropdown.observe(update_scatter, \"value\")\n",
+    "\n",
+    "# stack the dropdown and fig widgets using VBox\n",
+    "widgets.VBox([widgets.HBox([x_dropdown, y_dropdown]), fig3])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "In the example below, we'll look at plots of trigonometic functions"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 11,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "20ea9071584c4070a317e5b47fcce374",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(Dropdown(description='Function', options={'sin': <ufunc 'sin'>, 'cos': <ufunc 'cos'>, 'tan': <u…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "funcs = dict(sin=np.sin, cos=np.cos, tan=np.tan, sinh=np.sinh, tanh=np.tanh)\n",
+    "dropdown = widgets.Dropdown(options=funcs, description=\"Function\")\n",
+    "\n",
+    "fig = plt.figure(title=\"sin(x)\", animation_duration=1000)\n",
+    "\n",
+    "# create x and y data attributes for the line chart\n",
+    "x = np.arange(-10, 10, 0.1)\n",
+    "y = np.sin(x)\n",
+    "\n",
+    "line = plt.plot(x, y, \"m\")\n",
+    "\n",
+    "\n",
+    "def update_line(*args):\n",
+    "    f = dropdown.value\n",
+    "    fig.title = f\"{f.__name__}(x)\"\n",
+    "    line.y = f(line.x)\n",
+    "\n",
+    "\n",
+    "dropdown.observe(update_line, \"value\")\n",
+    "\n",
+    "widgets.VBox([dropdown, fig])"
+   ]
+  }
+ ],
+ "metadata": {
+  "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.7.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/.ipynb_checkpoints/Updating Plots-Copy1-checkpoint.ipynb

@@ -0,0 +1,177 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Updating Plots"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "`bqplot` is an interactive plotting library. Attributes of plots can be updated in place without recreating the whole figure and marks. Let's look at idiomatic ways of updating plots in `bqplot`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "8dcd735235bc43ee9ad44cadb87df17d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Figure(axes=[Axis(scale=LinearScale()), Axis(orientation='vertical', scale=LinearScale())], fig_margin={'top':…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "x = np.linspace(-10, 10, 100)\n",
+    "y = np.sin(x)\n",
+    "\n",
+    "fig = plt.figure()\n",
+    "line = plt.plot(x=x, y=y)\n",
+    "fig"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To update the attributes of the plot(x, y, color etc.) the correct way to do it is to update the attributes of the **mark** objects in place. Recreating figure or mark objects is not recommended"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# update y attribute of the line object\n",
+    "line.y = np.tan(x)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We can update multiple attributes of the mark object simultaneously by using the `hold_sync` method like so. (This makes only one round trip from the python kernel to front end)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# update both x and y together\n",
+    "with line.hold_sync():\n",
+    "    line.x = np.arange(100)\n",
+    "    line.y = x ** 3 - x"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We can also animate the changes to the x, y and other data attributes by setting the `animation_duration` property on the figure object. More examples of animations can found in the [Animations](../Advanced Plotting/Animations.ipynb) notebook"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fig.animation_duration = 1000\n",
+    "line.y = np.cos(x)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's look at an example to update a scatter plot"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "4288e130f2384f578ef9b8889dbc07cb",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Figure(animation_duration=1000, axes=[Axis(scale=LinearScale()), Axis(orientation='vertical', scale=LinearScal…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "x, y = np.random.rand(2, 10)\n",
+    "\n",
+    "fig = plt.figure(animation_duration=1000)\n",
+    "scat = plt.scatter(x=x, y=y)\n",
+    "fig"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# update the x and y attreibutes in place using hold_sync\n",
+    "with scat.hold_sync():\n",
+    "    scat.x, scat.y = np.random.rand(2, 10)"
+   ]
+  }
+ ],
+ "metadata": {
+  "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.7.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/.ipynb_checkpoints/Updating Plots-checkpoint.ipynb

@@ -0,0 +1,177 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Updating Plots"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "`bqplot` is an interactive plotting library. Attributes of plots can be updated in place without recreating the whole figure and marks. Let's look at idiomatic ways of updating plots in `bqplot`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "05646d0e5e034572813c5fa880147c2f",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Figure(axes=[Axis(scale=LinearScale()), Axis(orientation='vertical', scale=LinearScale())], fig_margin={'top':…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "x = np.linspace(-10, 10, 100)\n",
+    "y = np.sin(x)\n",
+    "\n",
+    "fig = plt.figure()\n",
+    "line = plt.plot(x=x, y=y)\n",
+    "fig"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To update the attributes of the plot(x, y, color etc.) the correct way to do it is to update the attributes of the **mark** objects in place. Recreating figure or mark objects is not recommended"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# update y attribute of the line object\n",
+    "line.y = np.tan(x)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We can update multiple attributes of the mark object simultaneously by using the `hold_sync` method like so. (This makes only one round trip from the python kernel to front end)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# update both x and y together\n",
+    "with line.hold_sync():\n",
+    "    line.x = np.arange(100)\n",
+    "    line.y = x ** 3 - x"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We can also animate the changes to the x, y and other data attributes by setting the `animation_duration` property on the figure object. More examples of animations can found in the [Animations](../Advanced Plotting/Animations.ipynb) notebook"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fig.animation_duration = 1000\n",
+    "line.y = np.cos(x)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's look at an example to update a scatter plot"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "b1ec025832a64c039e7f5c334c11c7ae",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Figure(animation_duration=1000, axes=[Axis(scale=LinearScale()), Axis(orientation='vertical', scale=LinearScal…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "x, y = np.random.rand(2, 10)\n",
+    "\n",
+    "fig = plt.figure(animation_duration=1000)\n",
+    "scat = plt.scatter(x=x, y=y)\n",
+    "fig"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# update the x and y attreibutes in place using hold_sync\n",
+    "with scat.hold_sync():\n",
+    "    scat.x, scat.y = np.random.rand(2, 10)"
+   ]
+  }
+ ],
+ "metadata": {
+  "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.7.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}