j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/nbi-docs/nbi_docs_recipes_layout.ipynb

@@ -0,0 +1,384 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Page Layout and Dashboarding\n",
+    "`nbinteract` gives basic page layout functionality using special comments in your code. Include one or more of these markers in a Python. Outputting the HTML code by `nbinteract` add their corresponding CSS classes to the generated cells.\n",
+    "\n",
+    "| Marker | Description | CSS class added |\n",
+    "| --------- | --------- | --------- |\n",
+    "| `nbi:left` | Floats cell to the left | `nbinteract-left` |\n",
+    "| `nbi:right` | Floats cell to the right | `nbinteract-right` |\n",
+    "| `nbi:hide_in` | Hides cell input | `nbinteract-hide_in` |\n",
+    "| `nbi:hide_out` | Hides cell output | `nbinteract-hide_out` |\n",
+    "\n",
+    "By default, only the `full` template will automatically provide styling for these classes. For other templates, `nbinteract` assumes that the embedding page will use the CSS classes to style the cells.\n",
+    "\n",
+    "You can use the layout markers to create simple dashboards. In this page, we create a dashboard using a dataset of trending videos on YouTube. We first create a dashboard showing the code used to generate the plots. Further down the page, we replicate the dashboard without showing the code."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# nbi:hide_in\n",
+    "import warnings\n",
+    "# Ignore numpy dtype warnings. These warnings are caused by an interaction\n",
+    "# between numpy and Cython and can be safely ignored.\n",
+    "# Reference: https://stackoverflow.com/a/40846742\n",
+    "warnings.filterwarnings(\"ignore\", message=\"numpy.dtype size changed\")\n",
+    "warnings.filterwarnings(\"ignore\", message=\"numpy.ufunc size changed\")\n",
+    "\n",
+    "import numpy as np\n",
+    "import matplotlib.pyplot as plt\n",
+    "import pandas as pd\n",
+    "import nbinteract as nbi\n",
+    "\n",
+    "# Jupyter Specifics\n",
+    "#\n",
+    "import ipywidgets as widgets\n",
+    "# from ipywidgets import interact, interactive, fixed, interact_manual\n",
+    "from ipywidgets.widgets import interact, IntSlider, FloatSlider, Layout\n",
+    "\n",
+    "\n",
+    "np.set_printoptions(threshold=20, precision=2, suppress=True)\n",
+    "pd.options.display.max_rows = 7\n",
+    "pd.options.display.max_columns = 8\n",
+    "pd.set_option('precision', 2)\n",
+    "\n",
+    "# This option stops scientific notation for pandas\n",
+    "pd.set_option('display.float_format', '{:.2f}'.format)\n",
+    "\n",
+    "style = {'description_width': '150px'}\n",
+    "slider_layout = Layout(width='90%')\n",
+    "\n",
+    "# Some Magics\n",
+    "#\n",
+    "%matplotlib inline"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# nbi:hide_in\n",
+    "def df_interact(df, nrows=7, ncols=7):\n",
+    "    '''\n",
+    "    Outputs sliders that show rows and columns of df\n",
+    "    '''\n",
+    "    def peek(row=0, col=0):\n",
+    "        return df.iloc[row:row + nrows, col:col + ncols]\n",
+    "    if len(df.columns) <= ncols:\n",
+    "        interact(peek, row=(0, len(df) - nrows, nrows), col=fixed(0))\n",
+    "    else:\n",
+    "        interact(peek,\n",
+    "                 row=(0, len(df) - nrows, nrows),\n",
+    "                 col=(0, len(df.columns) - ncols))\n",
+    "    print('({} rows, {} columns) total'.format(df.shape[0], df.shape[1]))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# nbi:hide_in\n",
+    "videos = pd.read_csv('https://github.com/SamLau95/nbinteract/raw/master/notebooks/youtube_trending.csv',\n",
+    "                     parse_dates=['publish_time'],\n",
+    "                     index_col='publish_time')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "6ed80eba09224d9fa0e2006a1c6273de",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "interactive(children=(IntSlider(value=0, description='row', max=2428, step=7), IntSlider(value=0, description=…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "(2435 rows, 8 columns) total\n"
+     ]
+    }
+   ],
+   "source": [
+    "df_interact(videos)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Dashboard 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "f34ff64d283745d898be02d71dce8870",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(interactive(children=(Dropdown(description='channel', options=('The View', 'CBS This Morning', …"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# nbi:left\n",
+    "options = {\n",
+    "    'title': 'Views for Trending Videos',\n",
+    "    'xlabel': 'Date Trending',\n",
+    "    'ylabel': 'Views [1k]',\n",
+    "    'animation_duration': 500,\n",
+    "    'aspect_ratio': 1.0,\n",
+    "}\n",
+    "\n",
+    "def xs(channel):\n",
+    "    return videos.loc[videos['channel_title']\n",
+    "            == channel].index\n",
+    "\n",
+    "def ys(xs):    \n",
+    "    return (videos.loc[xs, 'views'])/1000\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n",
+    "nbi.scatter(xs, ys,\n",
+    "  channel =\n",
+    "    videos['channel_title'].unique()[9:15],\n",
+    "    options = options)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "bfae675465fc4796b21a9ab268ee36db",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(interactive(children=(ToggleButtons(description='col', options=('comment_count', 'likes', 'disl…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# nbi:right\n",
+    "options={\n",
+    "    'ylabel': 'Proportion per Unit [1k]',\n",
+    "    'xlabel': 'Units',\n",
+    "    'bins': 100,\n",
+    "    'aspect_ratio': 1.0,\n",
+    "}\n",
+    "\n",
+    "def values(col):\n",
+    "    vals = videos[col]\n",
+    "    return (vals[vals < vals.quantile(0.8)])/1000\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n",
+    "nbi.hist(\n",
+    " values,col =\n",
+    " widgets.ToggleButtons(\n",
+    "  options =\n",
+    "    ['comment_count', 'likes', 'dislikes', 'views']), \n",
+    "  options = options)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "   "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Dashboard 2\n",
+    "\n",
+    "This dashboard example is using the same widgets used for *Dashboard 1*, but **without** showing the code."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "05643581d48f4e099cefe122abb69fc3",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "interactive(children=(IntSlider(value=0, description='row', max=2428, step=7), IntSlider(value=0, description=…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "(2435 rows, 8 columns) total\n"
+     ]
+    }
+   ],
+   "source": [
+    "# nbi:hide_in\n",
+    "df_interact(videos)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "26eb63dac95d4f5f8cf6eb709ae3114e",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(interactive(children=(Dropdown(description='channel', options=('The View', 'CBS This Morning', …"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# nbi:hide_in\n",
+    "# nbi:left\n",
+    "options = {\n",
+    "    'title': 'Views for Trending Videos',\n",
+    "    'xlabel': 'Date Trending',\n",
+    "    'ylabel': 'Views [1k]',\n",
+    "    'animation_duration': 500,\n",
+    "    'aspect_ratio': 1.0,\n",
+    "}\n",
+    "\n",
+    "def xs(channel):\n",
+    "    return videos.loc[videos['channel_title'] == channel].index\n",
+    "\n",
+    "def ys(xs):    \n",
+    "    return (videos.loc[xs, 'views'])/1000\n",
+    "\n",
+    "nbi.scatter(xs, ys,\n",
+    "  channel=videos['channel_title'].unique()[9:15],\n",
+    "  options = options)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "ad29e611b9924f5fac314bac49bafc6e",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(interactive(children=(ToggleButtons(description='col', options=('comment_count', 'likes', 'disl…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# nbi:hide_in\n",
+    "# nbi:right\n",
+    "options={\n",
+    "    'ylabel': 'Proportion per Unit [1k]',\n",
+    "    'xlabel': 'Units',\n",
+    "    'bins': 100,\n",
+    "    'aspect_ratio': 1.0,\n",
+    "}\n",
+    "\n",
+    "def values(col):\n",
+    "    vals = videos[col]\n",
+    "    return (vals[vals < vals.quantile(0.8)])/1000\n",
+    "\n",
+    "nbi.hist(\n",
+    "    values,col =\n",
+    "    widgets.ToggleButtons(\n",
+    "      options =\n",
+    "        ['comment_count', 'likes', 'dislikes', 'views']), \n",
+    "      options = options)"
+   ]
+  }
+ ],
+ "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.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/nbi-docs/nbi_docs_tutorial_interact.ipynb

@@ -0,0 +1,254 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### A Simple Webpage\n",
+    "\n",
+    "In this section, you will create and publish a simple interactive webpage!\n",
+    "\n",
+    "In Jupyter, create a notebook and name it `tutorial.ipynb`. Type or paste in the code from this tutorial into the notebook."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Using Interact"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `ipywidgets` library provides the simplest way to get started writing interactive documents. Although the library itself has its own documentation, we will provide a quick overview to let you get started as quickly as possible.\n",
+    "\n",
+    "We start by importing the `interact` function:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import interact"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `interact` function takes in a function and produces an interface to call the function with different parameters."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def square(x):\n",
+    "    return x * x"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Pass the `square` function into `interact` and specify `square`'s arguments as keyword arguments:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "8ce32e90254541748b63ca19a5c0f546",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "interactive(children=(IntSlider(value=10, description='x', max=30, min=-10), Output()), _dom_classes=('widget-…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "interact(square, x=10);"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To control the range of values `x` can take, you can pass in a tuple of the same format as Python's `range` function:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "1d942477ae474105948fd02a3523afc9",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "interactive(children=(IntSlider(value=50, description='x', step=10), Output()), _dom_classes=('widget-interact…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "interact(square, x=(0, 100, 10));"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Notice how dragging the slider changes the input to the `square` function and automatically updates the output. This is a powerful idea that we will build on for the rest of this tutorial.\n",
+    "\n",
+    "By using `interact`, you can build complex widget-based interfaces in a notebook. These widgets will appear in your resulting webpage, giving your page interactivity."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Widget Types"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Notice that `interact` automatically generates a slider because the argument is numeric. Other types of arguments will generate different types of interfaces. For example, a string will generate a textbox."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def friends(name, number):\n",
+    "    return '{} has {} friends!'.format(name, number)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "d6e5c083d0074c7da1413a7b7f990984",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "interactive(children=(Text(value='Sam', description='name'), IntSlider(value=7, description='number', max=10, …"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "interact(friends, name='Sam', number=(5, 10));"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "And a dictionary will generate a dropdown menu:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "0c32a3f3ad154ba1a3a5639f0d8f1c40",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "interactive(children=(Text(value='Sam', description='name'), Dropdown(description='number', options={'One': 1,…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "interact(friends, name='Sam', number={'One': 1, 'Five': 5, 'Ten': 10});"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Here's the complete list of each argument type and the widget it generates:\n",
+    "\n",
+    "| Keyword argument                                            | Widget      |\n",
+    "| -------                                                     | ------      |\n",
+    "| `True` or `False`                                           | Checkbox    |\n",
+    "| `'Hi there'`                                                | Text        |\n",
+    "| value or (min,max) or (min,max,step) if integers are passed | IntSlider   |\n",
+    "| value or (min,max) or (min,max,step) if floats are passed   | FloatSlider |\n",
+    "| `['orange','apple']` or `{'one':1,'two':2}`                 | Dropdown    |\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "You may also use the widget classes in `ipywidgets` in the calls to `interact` to have more fine-grained control over the interface. For more details on using `interact`, see the [official `ipywidgets` documentation](http://ipywidgets.readthedocs.io/en/stable/examples/Using%20Interact.html).\n",
+    "\n",
+    "You are now ready to publish your webpage! Proceed to the next page of the tutorial."
+   ]
+  }
+ ],
+ "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.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}