j1-template 2022.5.0.rc3 → 2022.5.1.rc0

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

@@ -1,384 +0,0 @@
-{
- "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

@@ -1,254 +0,0 @@
-{
- "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
-}