j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/Brush Interval Selector.ipynb

@@ -0,0 +1,154 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Linking Plots Using Brush Interval Selector"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Details on how to use the brush interval selector can be found in [this](../Interactions/Selectors.ipynb#brushselectors) notebook.\n",
+    "\n",
+    "Brush interval selectors can be used where *continuous updates* are **not** desirable (for example, in callbacks performing slower computations)\n",
+    "\n",
+    "The boolean trait `brushing` can be used to control *continuous updates* in the `BrushSelector`. `brushing` will be set to `False` when the interval selector is not brushing. We can register callbacks by listening to the `brushing` trait of the brush selector. We can check the value of `brushing` trait in the callback and perform updates *only* at the end of brushing.\n",
+    "\n",
+    "Let's now look at an example of linking a time series plot to a scatter plot using a `BrushIntervalSelector`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import Layout, HTML, VBox\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's set up an interval selector on a figure containing two time series plots. The interval selector can be activated by clicking on the figure"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bqplot.interacts import BrushIntervalSelector\n",
+    "\n",
+    "y1, y2 = np.random.randn(2, 200).cumsum(axis=1)  # two simple random walks\n",
+    "\n",
+    "fig_layout = Layout(width=\"900px\", height=\"500px\")\n",
+    "time_series_fig = plt.figure(layout=fig_layout)\n",
+    "line = plt.plot([y1, y2])\n",
+    "\n",
+    "# create a fast interval selector by passing in the X scale and the line mark on which the selector operates\n",
+    "intsel = BrushIntervalSelector(marks=[line], scale=line.scales[\"x\"])\n",
+    "time_series_fig.interaction = intsel  # set the interval selector on the figure"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's now create a scatter plot of the two time series and stack it below the time series plot using a `VBox`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "scat_fig = plt.figure(\n",
+    "    layout=fig_layout,\n",
+    "    animation_duration=750,\n",
+    "    title=\"Scatter of time series slice selected by the interval selector\",\n",
+    ")\n",
+    "# set the x and y attributes to the y values of line.y\n",
+    "scat = plt.scatter(*line.y, colors=[\"red\"], stroke=\"black\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# define a callback for the interval selector\n",
+    "def update_scatter(*args):\n",
+    "    brushing = intsel.brushing\n",
+    "\n",
+    "    # update scatter *only* when the interval selector\n",
+    "    # is not brushing to prevent continuous updates\n",
+    "    if not brushing:\n",
+    "        # interval selector is active\n",
+    "        if line.selected is not None:\n",
+    "            # get the start and end indices of the interval\n",
+    "            start_ix, end_ix = line.selected[0], line.selected[-1]\n",
+    "        else:  # interval selector is *not* active\n",
+    "            start_ix, end_ix = 0, -1\n",
+    "\n",
+    "        # update the x and y attributes of the scatter by slicing line.y\n",
+    "        with scat.hold_sync():\n",
+    "            scat.x, scat.y = line.y[:, start_ix:end_ix]\n",
+    "\n",
+    "\n",
+    "# register the callback with brushing trait of interval selector\n",
+    "intsel.observe(update_scatter, \"brushing\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "help_label = HTML(\n",
+    "    '<div style=\"color: blue; font-size: 16px; margin:20px 0px 0px 50px\">\\\n",
+    "                  Brush on the time series plot to activate the interval selector</div>'\n",
+    ")\n",
+    "VBox([help_label, time_series_fig, scat_fig])"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/Fast Interval Selector.ipynb

@@ -0,0 +1,152 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Linking Plots Using Fast Interval Selector"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Details on how to use the fast interval selector can be found in [this](../Interactions/Selectors.ipynb#fastintervalselector) notebook. In this tutorial notebook, we will look at linking plots using the fast interval selector. Interval selectors are ideally suited for time series analysis where we want to perform statistical computations on different time periods.\n",
+    "\n",
+    "When creating an interval selector we need pass in the x scale. We can additionally pass in the marks on which the interval selector operates. When the interval selector moves, it updates the following traits (on which callbacks can be registered)\n",
+    "* `selected` trait of the interval selector object itself. This trait contains the start and end of the x axis obtained from the x scale. Note that these values may not be present in the `x` attribute of the marks!\n",
+    "* `selected` trait of the marks on which the selector operates. This trait contains *all* the *indices* of the line.x which are spanned by the interval selector.\n",
+    "\n",
+    "The recipe for linking plots is as follows:\n",
+    "\n",
+    "1. Create an interval selector object by passing in the X-scale and marks on which the selector should operate on (optional)\n",
+    "2. Pass it to the figure through the `interaction` argument\n",
+    "3. Register a callback (which potentially updates other plots) on either the `selected` attribute of the interval selector object or `selected` attribute of the marks objects in the figure\n",
+    "\n",
+    "<br>`FastIntervalSelector` updates the `selected` trait **continuously**. Therefore, registering computationally intensive callbacks is *not* recommended with `FastIntervalSelector`\n",
+    "\n",
+    "Let's now look at an example of linking a time series plot to a scatter plot using a `FastIntervalSelector`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import Layout, HTML, VBox\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's set up an interval selector on a figure containing two time series plots. The interval selector can be activated by clicking on the figure"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bqplot.interacts import FastIntervalSelector\n",
+    "\n",
+    "y1, y2 = np.random.randn(2, 200).cumsum(axis=1)  # two simple random walks\n",
+    "\n",
+    "fig_layout = Layout(width=\"900px\", height=\"500px\")\n",
+    "time_series_fig = plt.figure(layout=fig_layout)\n",
+    "line = plt.plot([y1, y2])\n",
+    "\n",
+    "# create a fast interval selector by passing in the X scale and the line mark on which the selector operates\n",
+    "intsel = FastIntervalSelector(marks=[line], scale=line.scales[\"x\"])\n",
+    "time_series_fig.interaction = intsel  # set the interval selector on the figure"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's now create a scatter plot of the two time series and stack it below the time series plot using a `VBox`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "scat_fig = plt.figure(\n",
+    "    layout=fig_layout,\n",
+    "    title=\"Scatter of time series slice selected by the interval selector\",\n",
+    ")\n",
+    "# set the x and y attributes to the y values of line.y\n",
+    "scat = plt.scatter(*line.y, colors=[\"red\"], stroke=\"black\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# define a callback for the interval selector\n",
+    "def update_scatter(*args):\n",
+    "    # get the start and end indices of the interval\n",
+    "    start_ix, end_ix = line.selected[0], line.selected[-1]\n",
+    "\n",
+    "    # update the x and y attributes of the scatter by slicing line.y\n",
+    "    with scat.hold_sync():\n",
+    "        scat.x, scat.y = line.y[:, start_ix:end_ix]\n",
+    "\n",
+    "\n",
+    "# register the callback with line.selected trait\n",
+    "line.observe(update_scatter, \"selected\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "help_label = HTML(\n",
+    "    '<div style=\"color: blue; font-size: 16px; margin:20px 0px 0px 50px\">\\\n",
+    "                  Click on the time series plot to activate the interval selector</div>'\n",
+    ")\n",
+    "VBox([help_label, time_series_fig, scat_fig])"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/Gaussian Density Widget.ipynb

@@ -0,0 +1,128 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "In this tutorial we'll learn how to build a compound widget of the [Gaussian Density](Gaussian%20Density.ipynb) example.\n",
+    "\n",
+    "Steps to build a compound widget:\n",
+    "1. Create a class and extend it from DOMWidget or its subclasses. (If you are building a dashboard for example using HBox, VBox etc. then it makes sense to extend the class from Box, HBox or VBox as needed)\n",
+    "2. Inside the class constructor call the super class constructor passing in the widgets as children\n",
+    "3. Register any widget callbacks inside the constructor and define callbacks as class methods\n",
+    "\n",
+    "Once the compound widget is defined in a class, it can be put in a library and used along with other interactive widgets! Compound widgets are an excellent way of building re-usable components (**using just python code**) which can be seamlessly integrated with `ipywidgets`, `bqplot` and other interactive widgets."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from scipy.stats import norm\n",
+    "\n",
+    "import ipywidgets as widgets\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# extend the class from layout class VBox\n",
+    "class GaussianDensity(widgets.VBox):\n",
+    "    def __init__(self, *args, **kwargs):\n",
+    "        x = np.linspace(-10, 10, 200)\n",
+    "        y = norm.pdf(x)\n",
+    "\n",
+    "        # gaussian density figure\n",
+    "        self.title_tmpl = \"Gaussian Density (mu = {} and sigma = {})\"\n",
+    "        self.pdf_fig = plt.figure(\n",
+    "            title=self.title_tmpl.format(0, 1),\n",
+    "            layout=widgets.Layout(width=\"800px\", height=\"600px\"),\n",
+    "        )\n",
+    "        self.pdf_line = plt.plot(x, y, \"m\", stroke_width=3)\n",
+    "\n",
+    "        # sliders for mu and sigma\n",
+    "        self.mu_slider = widgets.FloatSlider(\n",
+    "            description=\"$\\mu$\", value=0, min=-5, max=5, step=0.1\n",
+    "        )\n",
+    "        self.sigma_slider = widgets.FloatSlider(\n",
+    "            description=\"$\\sigma$\", value=1, min=0.1, max=5, step=0.1\n",
+    "        )\n",
+    "        slider_layout = widgets.HBox([self.mu_slider, self.sigma_slider])\n",
+    "\n",
+    "        # register callback with the 'value' trait of the sliders\n",
+    "        for slider in [self.mu_slider, self.sigma_slider]:\n",
+    "            slider.observe(self.update_density, \"value\")\n",
+    "\n",
+    "        # call super construction by passing in the widgets as children\n",
+    "        super(GaussianDensity, self).__init__(children=[self.pdf_fig, slider_layout])\n",
+    "\n",
+    "    def update_density(self, change):\n",
+    "        new_mu = self.mu_slider.value\n",
+    "        new_sigma = self.sigma_slider.value\n",
+    "        # update the y attribute of the plot with the new pdf\n",
+    "        # computed using new mu and sigma values\n",
+    "        self.pdf_line.y = norm.pdf(self.pdf_line.x, new_mu, new_sigma)\n",
+    "\n",
+    "        # also update the fig title\n",
+    "        self.pdf_fig.title = self.title_tmpl.format(new_mu, new_sigma)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "gaussian_density_widget = GaussianDensity()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# render the compound widget like any other interactive widget\n",
+    "gaussian_density_widget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# we can stack this compound widget together with other interactive widgets\n",
+    "widgets.HBox([gaussian_density_widget, widgets.IntSlider()])"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Tutorials/Gaussian Density.ipynb

@@ -0,0 +1,113 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "In this tutorial notebook we'll learn how to:\n",
+    "* Plot the gaussian density for a specific $\\mu$ and $\\sigma$\n",
+    "* Use the FloatSlider widget in `ipywidgets` to represent $\\mu$ and $\\sigma$ values\n",
+    "* Layout the density plot along with the sliders using HBox and VBox layout objects available in `ipywidgets`\n",
+    "* Link the sliders to the plot so that the plot gets updated when the values of $\\mu$ and $\\sigma$ change"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from scipy.stats import norm\n",
+    "\n",
+    "from ipywidgets import FloatSlider, HBox, VBox\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x = np.linspace(-10, 10, 200)\n",
+    "y = norm.pdf(x)\n",
+    "\n",
+    "# plot the gaussian density\n",
+    "title_tmpl = \"Gaussian Density (mu = {} and sigma = {})\"\n",
+    "pdf_fig = plt.figure(title=title_tmpl.format(0, 1))\n",
+    "pdf_line = plt.plot(x, y, \"m\", stroke_width=3)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# use two sliders to represent mu and sigma\n",
+    "mu_slider = FloatSlider(description=\"mu\", value=0, min=-5, max=5, step=0.1)\n",
+    "sigma_slider = FloatSlider(description=\"sigma\", value=1, min=0.1, max=5, step=0.1)\n",
+    "\n",
+    "slider_layout = HBox([mu_slider, sigma_slider])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_density(change):\n",
+    "    new_mu = mu_slider.value\n",
+    "    new_sigma = sigma_slider.value\n",
+    "    # update the y attribute of the plot with the new pdf\n",
+    "    # computed using new mu and sigma values\n",
+    "    pdf_line.y = norm.pdf(x, new_mu, new_sigma)\n",
+    "\n",
+    "    # also update the fig title\n",
+    "    pdf_fig.title = title_tmpl.format(new_mu, new_sigma)\n",
+    "\n",
+    "\n",
+    "# register the above callback with the 'value' trait of the sliders\n",
+    "for slider in [mu_slider, sigma_slider]:\n",
+    "    slider.observe(update_density, \"value\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "# now put all the widgets together into a simple dashboard\n",
+    "# the plot should update now when the slider values are updated!\n",
+    "final_layout = VBox([pdf_fig, slider_layout])\n",
+    "final_layout"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}