docs/voila-ipywidgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By using Juyper-flex with Voila, you can create dashboards that enable viewers to change underlying parameters and see the results immediately. This is done by adding runtime: a live Jupyter kernel and then adding one or more input controls that dynamically drive the appearance of the components within the dashboard.\n",
    "\n",
    "Voila turns a Jupyter Notebook into an interactive document. It's important to note that interactive documents need to be deployed using Voila to be shared broadly, whereas static html documents generated by `nbconvert` that can be attached to emails or served from any standard web server.\n",
    "\n",
    "## Getting Started\n",
    "\n",
    "The steps required to make an interactive dashboard can be summarized as:\n",
    "\n",
    "1. Create one Section, level-2 markdown header (`##`)\n",
    "2. On this section add some code that shows `ipywidgets` inputs and tag the cell with `inputs`\n",
    "3. Add one or multiple regular Jupyter-flex Sections (`##`) \n",
    "4. Create an [Output ipywidget](https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html) that holds the outputs for the dashboard\n",
    "5. Use the `interact()` or `observe()` functions from `ipywidgets` to update Output widget\n",
    "6. Tag a code cell that outputs the Output widget with `body`\n",
    "7. Run the notebook using `voila`\n",
    "\n",
    "## Simple example\n",
    "\n",
    "Let's do a simple example using `ipywidgets` to generate a random distribution and plot a histogram using `matplotlib`. The dashboard will contain 3 widgets to control the mean and standard deviation of the data and number of bins of the histogram."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import ipywidgets as widgets\n",
    "from IPython.display import clear_output, display\n",
    "\n",
    "import matplotlib.pyplot as plt\n",
    "from IPython.display import set_matplotlib_formats\n",
    "%matplotlib inline\n",
    "set_matplotlib_formats('svg')\n",
    "\n",
    "np.random.seed(42)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"admonition note\">\n",
    "    <p class=\"admonition-title\">Matplotlib output format</p>\n",
    "    <p>Since we are gonna use matplotlib to plot the histogram we set the format to be SVG, this looks better on the final dashboard because the plot is more responsive.</p>\n",
    "     <p>For more information on the different plotting library options see <a href=\"/plotting\">Plotting</a>.</p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 1. Sidebar Section\n",
    "\n",
    "Create a new section and change the size to `250`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=250"
    ]
   },
   "outputs": [],
   "source": [
    "## Section"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 2. Widgets\n",
    "\n",
    "Create 3 ipython widgets, 2 integer inputs and 1 slider and tag the cell that shows them as `inputs`.\n",
    "\n",
    "We use a `VBox` and we make the labels their own widget instead of using a description in order to make it look better in the final dashboard."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true,
    "tags": [
     "inputs"
    ]
   },
   "outputs": [],
   "source": [
    "mu_label = widgets.Label(value=\"Mean:\")\n",
    "mu_var = widgets.BoundedIntText(value=100, min=10, max=300)\n",
    "sigma_label = widgets.Label(value=\"Sigma:\")\n",
    "sigma_var = widgets.BoundedIntText(value=15, min=10, max=50)\n",
    "bins_label = widgets.Label(value=\"Bins:\")\n",
    "bins_var = widgets.IntSlider(value=50, min=1, max=100, step=1)\n",
    "\n",
    "widgets.VBox([mu_label, mu_var, sigma_label, sigma_var, bins_label, bins_var])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"admonition info\">\n",
    "    <p>\n",
    "        Note that widgets shown here as just displays, not connected to a kernel.\n",
    "    </p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 3. Section and outputs\n",
    "\n",
    "Create a new section, change the size to `750`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=750"
    ]
   },
   "outputs": [],
   "source": [
    "## Column"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 4. Create Output widget\n",
    "\n",
    "Create an Output widget object `out` that will hold the final plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "out = widgets.Output()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 5. Update plot based on widgets\n",
    "\n",
    "We use the `observe()` function from `ipywidgets` to generate the data and create the plot inside the output widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def on_value_change(change):\n",
    "    mu = mu_var.value\n",
    "    sigma = sigma_var.value\n",
    "    num_bins = bins_var.value\n",
    "\n",
    "    with out:\n",
    "        fig, ax = plt.subplots()\n",
    "\n",
    "        # the histogram of the data\n",
    "        x = mu + sigma * np.random.randn(437)\n",
    "        n, bins, patches = ax.hist(x, num_bins, density=1)\n",
    "\n",
    "        # add a 'best fit' line\n",
    "        y = ((1 / (np.sqrt(2 * np.pi) * sigma)) * np.exp(-0.5 * (1 / sigma * (bins - mu))**2))\n",
    "        ax.plot(bins, y, '--')\n",
    "        \n",
    "        ax.set_xlabel('X')\n",
    "        ax.set_ylabel('Probability density')\n",
    "        ax.set_title(f'Histogram with: mu={mu}, sigma={sigma}, bins={num_bins}')\n",
    "\n",
    "        clear_output(wait=True)\n",
    "        plt.show(fig)\n",
    "\n",
    "mu_var.observe(on_value_change, names=\"value\")\n",
    "sigma_var.observe(on_value_change, names=\"value\")\n",
    "bins_var.observe(on_value_change, names=\"value\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 6. Output\n",
    "\n",
    "Finally we call the `on_value_change()` function once to create an initial plot.\n",
    "\n",
    "Then we output the Output widget and tag that cell with `body`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "on_value_change(None)\n",
    "out"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 7. Run voila\n",
    "\n",
    "Now you can run voila using the `flex` template and point it to the notebook file.\n",
    "\n",
    "<p class=\"code-header\">Terminal</p>\n",
    "```bash\n",
    "$ voila --template=flex mpl-histogram.ipynb\n",
    "```\n",
    "\n",
    "This will open a browser window and the result show look like this, click on the image below to open this example on [binder.org](https://mybinder.org/):\n",
    "\n",
    "[![Jupyter-flex voila widgets](/assets/img/screenshots/widgets/mpl-histogram.png)](https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwidgets%2Fmpl-histogram.ipynb)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Examples\n",
    "\n",
    "More examples powered by Voila and that use different ipywidgets like [bqplot](https://github.com/bloomberg/bqplot), [ipyleaflet](https://github.com/jupyter-widgets/ipyleaflet) and [qgrid](https://github.com/quantopian/qgrid).\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/master?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwidgets%2Fipywidgets-gallery.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/widgets/ipywidgets-gallery.png\">\n",
    "    </a>\n",
    "    <figcaption>ipywidgets-gallery (runs in binder.org)</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwidgets%2Fipywidgets-sidebar.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/widgets/ipywidgets-sidebar.png\">\n",
    "    </a>\n",
    "    <figcaption>ipywidgets-sidebar (runs in binder.org)</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwidgets%2Fqgrid.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/widgets/qgrid.png\">\n",
    "    </a>\n",
    "    <figcaption>qgrid (runs in binder.org)</figcaption>\n",
    "  </figure>\n",
    "</div>\n",
    "\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "    <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwidgets%2Fmpl-histogram.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/widgets/mpl-histogram.png\">\n",
    "    </a>\n",
    "    <figcaption>mpl-histogram (runs in binder.org)</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fbqplot.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/plots/bqplot.png\" alt=\"Jupyter-flex: bqplot\">\n",
    "    </a>\n",
    "    <figcaption>bqplot plots (runs in mybinder.org)</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fmovie-explorer.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/movie-explorer.png\" alt=\"Jupyter-flex: Movie Explorer\">\n",
    "    </a>\n",
    "    <figcaption>Movie Explorer (runs in mybinder.org)</figcaption>\n",
    "  </figure>\n",
    "</div>\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwealth-of-nations.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/wealth-of-nations.png\" alt=\"Jupyter-flex: Wealth of Nations\">\n",
    "    </a>\n",
    "    <figcaption>Wealth of Nations (runs in mybinder.org)</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwealth-of-nations.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/iris-clustering.png\" alt=\"Jupyter-flex: Iris Clustering\">\n",
    "    </a>\n",
    "    <figcaption>Iris clustering (runs in mybinder.org)</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"https://mybinder.org/v2/gh/danielfrg/jupyter-flex/0.6.0?urlpath=%2Fvoila%2Frender%2Fexamples%2Fwealth-of-nations.ipynb\">\n",
    "        <img src=\"/assets/img/screenshots/widgets/ipyleaflet.png\" alt=\"Jupyter-flex: ipyleaflet\">\n",
    "    </a>\n",
    "    <figcaption>ipyleaflet (runs in mybinder.org)</figcaption>\n",
    "  </figure>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Tags",
  "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"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "04e788a6bf854f63b2245ae2886ddba6": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "06d8e73a002546988b1c5f3c8824693f": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "LabelModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "LabelModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "LabelView",
       "description": "",
       "description_tooltip": null,
       "layout": "IPY_MODEL_dbd864d070c94276a2bc4d9e123b4111",
       "placeholder": "​",
       "style": "IPY_MODEL_c8444ad7341c4d998a27179a1ff70819",
       "value": "Mean:"
      }
     },
     "1d06727cec104defa047aaf1d1d1c89a": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "26d78d7a226444a4999cbe701767648e": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "SliderStyleModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "StyleView",
       "description_width": "",
       "handle_color": null
      }
     },
     "2bfe06ce1d26457a84d77c198c205259": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "34466d57404e4614a3917c2376aca564": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "LabelModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "LabelModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "LabelView",
       "description": "",
       "description_tooltip": null,
       "layout": "IPY_MODEL_04e788a6bf854f63b2245ae2886ddba6",
       "placeholder": "​",
       "style": "IPY_MODEL_35fc6655774d4086b7f078bde1da9fc2",
       "value": "Sigma:"
      }
     },
     "35fc6655774d4086b7f078bde1da9fc2": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "DescriptionStyleModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "StyleView",
       "description_width": ""
      }
     },
     "39ae5a0bfeec40e1a2207d69604bcd84": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "45c5a966953f49c68b934670cacfe008": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "LabelModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "LabelModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "LabelView",
       "description": "",
       "description_tooltip": null,
       "layout": "IPY_MODEL_39ae5a0bfeec40e1a2207d69604bcd84",
       "placeholder": "​",
       "style": "IPY_MODEL_9dfc2238f125464d9612f7a5c75c5103",
       "value": "Bins:"
      }
     },
     "48b3ce0f198b4569a352fe6862b0f363": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "BoundedIntTextModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "BoundedIntTextModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "IntTextView",
       "continuous_update": false,
       "description": "",
       "description_tooltip": null,
       "disabled": false,
       "layout": "IPY_MODEL_75c7d2630b734a5bba1228854e98358d",
       "max": 300,
       "min": 10,
       "step": 1,
       "style": "IPY_MODEL_5e845e6be693425b9d9d4cc68fb75ea7",
       "value": 100
      }
     },
     "5e845e6be693425b9d9d4cc68fb75ea7": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "DescriptionStyleModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "StyleView",
       "description_width": ""
      }
     },
     "70acfc395ddf41209463858c71506d0a": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "DescriptionStyleModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "StyleView",
       "description_width": ""
      }
     },
     "75c7d2630b734a5bba1228854e98358d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "88f37c8ce4104bd2a32b9dd9d1f36296": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "IntSliderModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "IntSliderView",
       "continuous_update": true,
       "description": "",
       "description_tooltip": null,
       "disabled": false,
       "layout": "IPY_MODEL_9eb75e08e0f94a478a9796f16630d27d",
       "max": 100,
       "min": 1,
       "orientation": "horizontal",
       "readout": true,
       "readout_format": "d",
       "step": 1,
       "style": "IPY_MODEL_26d78d7a226444a4999cbe701767648e",
       "value": 50
      }
     },
     "938a72e9a7ce4ce8a5198fb24a0eccc7": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "96aa9a3c38494e70a74abf9144b464ca": {
      "model_module": "@jupyter-widgets/output",
      "model_module_version": "1.0.0",
      "model_name": "OutputModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/output",
       "_model_module_version": "1.0.0",
       "_model_name": "OutputModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/output",
       "_view_module_version": "1.0.0",
       "_view_name": "OutputView",
       "layout": "IPY_MODEL_938a72e9a7ce4ce8a5198fb24a0eccc7",
       "msg_id": "",
       "outputs": []
      }
     },
     "9dfc2238f125464d9612f7a5c75c5103": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "DescriptionStyleModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "StyleView",
       "description_width": ""
      }
     },
     "9eb75e08e0f94a478a9796f16630d27d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "af1d22240285484188f15b83e8c7c5b5": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "BoundedIntTextModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "BoundedIntTextModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "IntTextView",
       "continuous_update": false,
       "description": "",
       "description_tooltip": null,
       "disabled": false,
       "layout": "IPY_MODEL_2bfe06ce1d26457a84d77c198c205259",
       "max": 50,
       "min": 10,
       "step": 1,
       "style": "IPY_MODEL_70acfc395ddf41209463858c71506d0a",
       "value": 15
      }
     },
     "c8444ad7341c4d998a27179a1ff70819": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "DescriptionStyleModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "StyleView",
       "description_width": ""
      }
     },
     "dbd864d070c94276a2bc4d9e123b4111": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "e7c76f0e6847497eb2033691b31ec1fa": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "VBoxModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "@jupyter-widgets/controls",
       "_model_module_version": "1.5.0",
       "_model_name": "VBoxModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/controls",
       "_view_module_version": "1.5.0",
       "_view_name": "VBoxView",
       "box_style": "",
       "children": [
        "IPY_MODEL_06d8e73a002546988b1c5f3c8824693f",
        "IPY_MODEL_48b3ce0f198b4569a352fe6862b0f363",
        "IPY_MODEL_34466d57404e4614a3917c2376aca564",
        "IPY_MODEL_af1d22240285484188f15b83e8c7c5b5",
        "IPY_MODEL_45c5a966953f49c68b934670cacfe008",
        "IPY_MODEL_88f37c8ce4104bd2a32b9dd9d1f36296"
       ],
       "layout": "IPY_MODEL_1d06727cec104defa047aaf1d1d1c89a"
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}