j1-template 2022.2.3 → 2022.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/themes/j1/adapter/js/analytics.js +13 -13
- data/assets/themes/j1/adapter/js/nbinteract.js +192 -39
- data/assets/themes/j1/core/css/themes/unodark/bootstrap.css +30 -40
- data/assets/themes/j1/core/css/themes/unodark/bootstrap.min.css +1 -1
- data/assets/themes/j1/core/css/themes/unolight/bootstrap.css +23 -12
- data/assets/themes/j1/core/css/themes/unolight/bootstrap.min.css +1 -1
- data/assets/themes/j1/core/js/template.js +1 -1
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/core/js/template.min.js.map +1 -1
- data/assets/themes/j1/modules/carousel/css/theme/uno.css +5 -0
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +1 -1
- data/assets/themes/j1/modules/justifiedGallery/css/justifiedGallery.css +6 -0
- data/assets/themes/j1/modules/justifiedGallery/css/justifiedGallery.min.css +1 -1
- data/assets/themes/j1/modules/mmenuLight/css/mmenu-light.css +2 -2
- data/assets/themes/j1/modules/mmenuLight/css/mmenu-light.min.css +1 -2
- data/assets/themes/j1/modules/nbInteract/css/theme/uno/nbinteract-core.css +33 -33
- data/assets/themes/j1/modules/nbInteract/css/theme/uno/nbinteract-core.min.css +1 -1
- data/assets/themes/j1/modules/nbInteract/js/requireJS/require.js +2068 -0
- data/assets/themes/j1/modules/nbInteract/js/requireJS/require.min.js +36 -0
- data/assets/themes/j1/modules/plotly/LICENSE +21 -0
- data/assets/themes/j1/modules/plotly/README.md +32 -0
- data/assets/themes/j1/modules/plotly/js/plotly.js +265345 -0
- data/assets/themes/j1/modules/plotly/js/plotly.min.js +65 -0
- data/assets/themes/j1/modules/requirejs/LICENSE +45 -0
- data/assets/themes/j1/modules/requirejs/README.md +79 -0
- data/assets/themes/j1/modules/requirejs/js/require.js +2068 -0
- data/assets/themes/j1/modules/requirejs/js/require.min.js +36 -0
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +1 -1
- data/lib/starter_web/_data/modules/analytics.yml +8 -23
- data/lib/starter_web/_data/modules/defaults/analytics.yml +1 -1
- data/lib/starter_web/_data/modules/justifiedGallery.yml +14 -8
- data/lib/starter_web/_data/modules/navigator_menu.yml +6 -3
- data/lib/starter_web/_data/modules/nbinteract.yml +12 -48
- data/lib/starter_web/_data/resources.yml +56 -0
- data/lib/starter_web/_includes/attributes.asciidoc +11 -0
- data/lib/starter_web/_plugins/lunr_index.rb +1 -1
- data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge-1920x1200.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/mandelbrot-menge.png +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_bar.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_hist.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_line.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_multiple_choice.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_scatter_drag.jpg +0 -0
- data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_short_answer.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/kick-it-old-school-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/nye-party-shop-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/stay-colorful-poster.jpg +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-wiki-series.adoc +1 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-wiki-series.adoc +1 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-wiki-series.adoc +1 -0
- data/lib/starter_web/package.json +1 -2
- data/lib/starter_web/pages/public/jupyter/docs/j1-nbinteract-doc.adoc +16 -16
- data/lib/starter_web/pages/public/jupyter/docs/nbi-widget-manual.adoc +149 -2
- data/lib/starter_web/pages/public/jupyter/docs/nbinteract-doc.adoc +1 -1
- data/lib/starter_web/pages/public/jupyter/examples/j1-circular-times-table.adoc +137 -0
- data/lib/starter_web/pages/public/jupyter/examples/j1-interactive-widgets.adoc +2 -2
- data/lib/starter_web/pages/public/jupyter/examples/j1-odes-in-python.adoc +11 -6
- data/lib/starter_web/pages/public/jupyter/examples/j1-testing-plotly.adoc +86 -0
- data/lib/starter_web/pages/public/jupyter/examples/j1_climate-change-forecast.adoc +2 -2
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_climate_change_forecast-checkpoint.ipynb +1058 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/{j1_ode_selected.ipynb → .ipynb_checkpoints/j1_docs_example_dynamic-checkpoint.ipynb} +1 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_interactive_widgets-checkpoint.ipynb +20 -20
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/{j1_altair_interactive_test-checkpoint.ipynb → j1_ode_selected-checkpoint.ipynb} +99 -318
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/j1_odes_in_python-checkpoint.ipynb +15227 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_circular_times_table.ipynb +12390 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_climate_change_forecast.ipynb +2 -2
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_docs_example_dynamic.ipynb +1 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_interactive_widgets.ipynb +20 -20
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_odes_in_python.ipynb +15227 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_examples_variability_of_the_sample_mean-checkpoint.ipynb +323 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_recipes_graphing-checkpoint.ipynb +387 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_recipes_layout-checkpoint.ipynb +384 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_tutorial_interact-checkpoint.ipynb +254 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/.ipynb_checkpoints/nbi_docs_tutorial_monty_hall-checkpoint.ipynb +732 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/nbi-docs/nbi_docs_tutorial_monty_hall.ipynb +25 -26
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_circular_times_table.html +749 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_climate_change_forecast.html +2 -2
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_docs_example_dynamic.html +186 -186
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +919 -919
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_odes_in_python.html +955 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_interactive_questions.html +242 -242
- data/lib/starter_web/pages/public/jupyter/services/binderhub.adoc +3 -3
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +9 -15
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +117 -12
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +38 -22
- data/lib/starter_web/assets/videos/gallery/adriana-lima-poster.jpg +0 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/binder/binder-launches.ipynb +0 -385
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/Untitled-checkpoint.ipynb +0 -6
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/binder-launches-checkpoint.ipynb +0 -385
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/google_altair-checkpoint.ipynb +0 -33
- data/lib/starter_web/pages/public/jupyter/notebooks/j1/binder-launches.ipynb +0 -411
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/binder-launches.html +0 -670
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_ode_selected.html +0 -186
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/excel.py +0 -55
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/ggplot.py +0 -108
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/ggplot2.py +0 -108
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/husky.py +0 -121
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/latimes.py +0 -149
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/pcolor.py +0 -6
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/quartz.py +0 -55
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/spacy_base.py +0 -94
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/spacy_mono.py +0 -158
- data/lib/starter_web/pages/public/jupyter/notebooks/themes/altair/sunsentinel.py +0 -125
@@ -0,0 +1,384 @@
|
|
1
|
+
{
|
2
|
+
"cells": [
|
3
|
+
{
|
4
|
+
"cell_type": "markdown",
|
5
|
+
"metadata": {},
|
6
|
+
"source": [
|
7
|
+
"### Page Layout and Dashboarding\n",
|
8
|
+
"`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",
|
9
|
+
"\n",
|
10
|
+
"| Marker | Description | CSS class added |\n",
|
11
|
+
"| --------- | --------- | --------- |\n",
|
12
|
+
"| `nbi:left` | Floats cell to the left | `nbinteract-left` |\n",
|
13
|
+
"| `nbi:right` | Floats cell to the right | `nbinteract-right` |\n",
|
14
|
+
"| `nbi:hide_in` | Hides cell input | `nbinteract-hide_in` |\n",
|
15
|
+
"| `nbi:hide_out` | Hides cell output | `nbinteract-hide_out` |\n",
|
16
|
+
"\n",
|
17
|
+
"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",
|
18
|
+
"\n",
|
19
|
+
"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."
|
20
|
+
]
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"cell_type": "code",
|
24
|
+
"execution_count": 1,
|
25
|
+
"metadata": {},
|
26
|
+
"outputs": [],
|
27
|
+
"source": [
|
28
|
+
"# nbi:hide_in\n",
|
29
|
+
"import warnings\n",
|
30
|
+
"# Ignore numpy dtype warnings. These warnings are caused by an interaction\n",
|
31
|
+
"# between numpy and Cython and can be safely ignored.\n",
|
32
|
+
"# Reference: https://stackoverflow.com/a/40846742\n",
|
33
|
+
"warnings.filterwarnings(\"ignore\", message=\"numpy.dtype size changed\")\n",
|
34
|
+
"warnings.filterwarnings(\"ignore\", message=\"numpy.ufunc size changed\")\n",
|
35
|
+
"\n",
|
36
|
+
"import numpy as np\n",
|
37
|
+
"import matplotlib.pyplot as plt\n",
|
38
|
+
"import pandas as pd\n",
|
39
|
+
"import nbinteract as nbi\n",
|
40
|
+
"\n",
|
41
|
+
"# Jupyter Specifics\n",
|
42
|
+
"#\n",
|
43
|
+
"import ipywidgets as widgets\n",
|
44
|
+
"# from ipywidgets import interact, interactive, fixed, interact_manual\n",
|
45
|
+
"from ipywidgets.widgets import interact, IntSlider, FloatSlider, Layout\n",
|
46
|
+
"\n",
|
47
|
+
"\n",
|
48
|
+
"np.set_printoptions(threshold=20, precision=2, suppress=True)\n",
|
49
|
+
"pd.options.display.max_rows = 7\n",
|
50
|
+
"pd.options.display.max_columns = 8\n",
|
51
|
+
"pd.set_option('precision', 2)\n",
|
52
|
+
"\n",
|
53
|
+
"# This option stops scientific notation for pandas\n",
|
54
|
+
"pd.set_option('display.float_format', '{:.2f}'.format)\n",
|
55
|
+
"\n",
|
56
|
+
"style = {'description_width': '150px'}\n",
|
57
|
+
"slider_layout = Layout(width='90%')\n",
|
58
|
+
"\n",
|
59
|
+
"# Some Magics\n",
|
60
|
+
"#\n",
|
61
|
+
"%matplotlib inline"
|
62
|
+
]
|
63
|
+
},
|
64
|
+
{
|
65
|
+
"cell_type": "code",
|
66
|
+
"execution_count": 2,
|
67
|
+
"metadata": {},
|
68
|
+
"outputs": [],
|
69
|
+
"source": [
|
70
|
+
"# nbi:hide_in\n",
|
71
|
+
"def df_interact(df, nrows=7, ncols=7):\n",
|
72
|
+
" '''\n",
|
73
|
+
" Outputs sliders that show rows and columns of df\n",
|
74
|
+
" '''\n",
|
75
|
+
" def peek(row=0, col=0):\n",
|
76
|
+
" return df.iloc[row:row + nrows, col:col + ncols]\n",
|
77
|
+
" if len(df.columns) <= ncols:\n",
|
78
|
+
" interact(peek, row=(0, len(df) - nrows, nrows), col=fixed(0))\n",
|
79
|
+
" else:\n",
|
80
|
+
" interact(peek,\n",
|
81
|
+
" row=(0, len(df) - nrows, nrows),\n",
|
82
|
+
" col=(0, len(df.columns) - ncols))\n",
|
83
|
+
" print('({} rows, {} columns) total'.format(df.shape[0], df.shape[1]))"
|
84
|
+
]
|
85
|
+
},
|
86
|
+
{
|
87
|
+
"cell_type": "code",
|
88
|
+
"execution_count": 3,
|
89
|
+
"metadata": {},
|
90
|
+
"outputs": [],
|
91
|
+
"source": [
|
92
|
+
"# nbi:hide_in\n",
|
93
|
+
"videos = pd.read_csv('https://github.com/SamLau95/nbinteract/raw/master/notebooks/youtube_trending.csv',\n",
|
94
|
+
" parse_dates=['publish_time'],\n",
|
95
|
+
" index_col='publish_time')"
|
96
|
+
]
|
97
|
+
},
|
98
|
+
{
|
99
|
+
"cell_type": "code",
|
100
|
+
"execution_count": 4,
|
101
|
+
"metadata": {},
|
102
|
+
"outputs": [
|
103
|
+
{
|
104
|
+
"data": {
|
105
|
+
"application/vnd.jupyter.widget-view+json": {
|
106
|
+
"model_id": "6ed80eba09224d9fa0e2006a1c6273de",
|
107
|
+
"version_major": 2,
|
108
|
+
"version_minor": 0
|
109
|
+
},
|
110
|
+
"text/plain": [
|
111
|
+
"interactive(children=(IntSlider(value=0, description='row', max=2428, step=7), IntSlider(value=0, description=…"
|
112
|
+
]
|
113
|
+
},
|
114
|
+
"metadata": {},
|
115
|
+
"output_type": "display_data"
|
116
|
+
},
|
117
|
+
{
|
118
|
+
"name": "stdout",
|
119
|
+
"output_type": "stream",
|
120
|
+
"text": [
|
121
|
+
"(2435 rows, 8 columns) total\n"
|
122
|
+
]
|
123
|
+
}
|
124
|
+
],
|
125
|
+
"source": [
|
126
|
+
"df_interact(videos)"
|
127
|
+
]
|
128
|
+
},
|
129
|
+
{
|
130
|
+
"cell_type": "markdown",
|
131
|
+
"metadata": {},
|
132
|
+
"source": [
|
133
|
+
"#### Dashboard 1"
|
134
|
+
]
|
135
|
+
},
|
136
|
+
{
|
137
|
+
"cell_type": "code",
|
138
|
+
"execution_count": 5,
|
139
|
+
"metadata": {},
|
140
|
+
"outputs": [
|
141
|
+
{
|
142
|
+
"data": {
|
143
|
+
"application/vnd.jupyter.widget-view+json": {
|
144
|
+
"model_id": "f34ff64d283745d898be02d71dce8870",
|
145
|
+
"version_major": 2,
|
146
|
+
"version_minor": 0
|
147
|
+
},
|
148
|
+
"text/plain": [
|
149
|
+
"VBox(children=(interactive(children=(Dropdown(description='channel', options=('The View', 'CBS This Morning', …"
|
150
|
+
]
|
151
|
+
},
|
152
|
+
"metadata": {},
|
153
|
+
"output_type": "display_data"
|
154
|
+
}
|
155
|
+
],
|
156
|
+
"source": [
|
157
|
+
"# nbi:left\n",
|
158
|
+
"options = {\n",
|
159
|
+
" 'title': 'Views for Trending Videos',\n",
|
160
|
+
" 'xlabel': 'Date Trending',\n",
|
161
|
+
" 'ylabel': 'Views [1k]',\n",
|
162
|
+
" 'animation_duration': 500,\n",
|
163
|
+
" 'aspect_ratio': 1.0,\n",
|
164
|
+
"}\n",
|
165
|
+
"\n",
|
166
|
+
"def xs(channel):\n",
|
167
|
+
" return videos.loc[videos['channel_title']\n",
|
168
|
+
" == channel].index\n",
|
169
|
+
"\n",
|
170
|
+
"def ys(xs): \n",
|
171
|
+
" return (videos.loc[xs, 'views'])/1000\n",
|
172
|
+
"\n",
|
173
|
+
"\n",
|
174
|
+
"\n",
|
175
|
+
"\n",
|
176
|
+
"nbi.scatter(xs, ys,\n",
|
177
|
+
" channel =\n",
|
178
|
+
" videos['channel_title'].unique()[9:15],\n",
|
179
|
+
" options = options)"
|
180
|
+
]
|
181
|
+
},
|
182
|
+
{
|
183
|
+
"cell_type": "code",
|
184
|
+
"execution_count": 6,
|
185
|
+
"metadata": {},
|
186
|
+
"outputs": [
|
187
|
+
{
|
188
|
+
"data": {
|
189
|
+
"application/vnd.jupyter.widget-view+json": {
|
190
|
+
"model_id": "bfae675465fc4796b21a9ab268ee36db",
|
191
|
+
"version_major": 2,
|
192
|
+
"version_minor": 0
|
193
|
+
},
|
194
|
+
"text/plain": [
|
195
|
+
"VBox(children=(interactive(children=(ToggleButtons(description='col', options=('comment_count', 'likes', 'disl…"
|
196
|
+
]
|
197
|
+
},
|
198
|
+
"metadata": {},
|
199
|
+
"output_type": "display_data"
|
200
|
+
}
|
201
|
+
],
|
202
|
+
"source": [
|
203
|
+
"# nbi:right\n",
|
204
|
+
"options={\n",
|
205
|
+
" 'ylabel': 'Proportion per Unit [1k]',\n",
|
206
|
+
" 'xlabel': 'Units',\n",
|
207
|
+
" 'bins': 100,\n",
|
208
|
+
" 'aspect_ratio': 1.0,\n",
|
209
|
+
"}\n",
|
210
|
+
"\n",
|
211
|
+
"def values(col):\n",
|
212
|
+
" vals = videos[col]\n",
|
213
|
+
" return (vals[vals < vals.quantile(0.8)])/1000\n",
|
214
|
+
"\n",
|
215
|
+
"\n",
|
216
|
+
"\n",
|
217
|
+
"\n",
|
218
|
+
"\n",
|
219
|
+
"\n",
|
220
|
+
"nbi.hist(\n",
|
221
|
+
" values,col =\n",
|
222
|
+
" widgets.ToggleButtons(\n",
|
223
|
+
" options =\n",
|
224
|
+
" ['comment_count', 'likes', 'dislikes', 'views']), \n",
|
225
|
+
" options = options)"
|
226
|
+
]
|
227
|
+
},
|
228
|
+
{
|
229
|
+
"cell_type": "markdown",
|
230
|
+
"metadata": {},
|
231
|
+
"source": [
|
232
|
+
" "
|
233
|
+
]
|
234
|
+
},
|
235
|
+
{
|
236
|
+
"cell_type": "markdown",
|
237
|
+
"metadata": {},
|
238
|
+
"source": [
|
239
|
+
"#### Dashboard 2\n",
|
240
|
+
"\n",
|
241
|
+
"This dashboard example is using the same widgets used for *Dashboard 1*, but **without** showing the code."
|
242
|
+
]
|
243
|
+
},
|
244
|
+
{
|
245
|
+
"cell_type": "code",
|
246
|
+
"execution_count": 7,
|
247
|
+
"metadata": {
|
248
|
+
"scrolled": true
|
249
|
+
},
|
250
|
+
"outputs": [
|
251
|
+
{
|
252
|
+
"data": {
|
253
|
+
"application/vnd.jupyter.widget-view+json": {
|
254
|
+
"model_id": "05643581d48f4e099cefe122abb69fc3",
|
255
|
+
"version_major": 2,
|
256
|
+
"version_minor": 0
|
257
|
+
},
|
258
|
+
"text/plain": [
|
259
|
+
"interactive(children=(IntSlider(value=0, description='row', max=2428, step=7), IntSlider(value=0, description=…"
|
260
|
+
]
|
261
|
+
},
|
262
|
+
"metadata": {},
|
263
|
+
"output_type": "display_data"
|
264
|
+
},
|
265
|
+
{
|
266
|
+
"name": "stdout",
|
267
|
+
"output_type": "stream",
|
268
|
+
"text": [
|
269
|
+
"(2435 rows, 8 columns) total\n"
|
270
|
+
]
|
271
|
+
}
|
272
|
+
],
|
273
|
+
"source": [
|
274
|
+
"# nbi:hide_in\n",
|
275
|
+
"df_interact(videos)"
|
276
|
+
]
|
277
|
+
},
|
278
|
+
{
|
279
|
+
"cell_type": "code",
|
280
|
+
"execution_count": 8,
|
281
|
+
"metadata": {},
|
282
|
+
"outputs": [
|
283
|
+
{
|
284
|
+
"data": {
|
285
|
+
"application/vnd.jupyter.widget-view+json": {
|
286
|
+
"model_id": "26eb63dac95d4f5f8cf6eb709ae3114e",
|
287
|
+
"version_major": 2,
|
288
|
+
"version_minor": 0
|
289
|
+
},
|
290
|
+
"text/plain": [
|
291
|
+
"VBox(children=(interactive(children=(Dropdown(description='channel', options=('The View', 'CBS This Morning', …"
|
292
|
+
]
|
293
|
+
},
|
294
|
+
"metadata": {},
|
295
|
+
"output_type": "display_data"
|
296
|
+
}
|
297
|
+
],
|
298
|
+
"source": [
|
299
|
+
"# nbi:hide_in\n",
|
300
|
+
"# nbi:left\n",
|
301
|
+
"options = {\n",
|
302
|
+
" 'title': 'Views for Trending Videos',\n",
|
303
|
+
" 'xlabel': 'Date Trending',\n",
|
304
|
+
" 'ylabel': 'Views [1k]',\n",
|
305
|
+
" 'animation_duration': 500,\n",
|
306
|
+
" 'aspect_ratio': 1.0,\n",
|
307
|
+
"}\n",
|
308
|
+
"\n",
|
309
|
+
"def xs(channel):\n",
|
310
|
+
" return videos.loc[videos['channel_title'] == channel].index\n",
|
311
|
+
"\n",
|
312
|
+
"def ys(xs): \n",
|
313
|
+
" return (videos.loc[xs, 'views'])/1000\n",
|
314
|
+
"\n",
|
315
|
+
"nbi.scatter(xs, ys,\n",
|
316
|
+
" channel=videos['channel_title'].unique()[9:15],\n",
|
317
|
+
" options = options)"
|
318
|
+
]
|
319
|
+
},
|
320
|
+
{
|
321
|
+
"cell_type": "code",
|
322
|
+
"execution_count": 9,
|
323
|
+
"metadata": {},
|
324
|
+
"outputs": [
|
325
|
+
{
|
326
|
+
"data": {
|
327
|
+
"application/vnd.jupyter.widget-view+json": {
|
328
|
+
"model_id": "ad29e611b9924f5fac314bac49bafc6e",
|
329
|
+
"version_major": 2,
|
330
|
+
"version_minor": 0
|
331
|
+
},
|
332
|
+
"text/plain": [
|
333
|
+
"VBox(children=(interactive(children=(ToggleButtons(description='col', options=('comment_count', 'likes', 'disl…"
|
334
|
+
]
|
335
|
+
},
|
336
|
+
"metadata": {},
|
337
|
+
"output_type": "display_data"
|
338
|
+
}
|
339
|
+
],
|
340
|
+
"source": [
|
341
|
+
"# nbi:hide_in\n",
|
342
|
+
"# nbi:right\n",
|
343
|
+
"options={\n",
|
344
|
+
" 'ylabel': 'Proportion per Unit [1k]',\n",
|
345
|
+
" 'xlabel': 'Units',\n",
|
346
|
+
" 'bins': 100,\n",
|
347
|
+
" 'aspect_ratio': 1.0,\n",
|
348
|
+
"}\n",
|
349
|
+
"\n",
|
350
|
+
"def values(col):\n",
|
351
|
+
" vals = videos[col]\n",
|
352
|
+
" return (vals[vals < vals.quantile(0.8)])/1000\n",
|
353
|
+
"\n",
|
354
|
+
"nbi.hist(\n",
|
355
|
+
" values,col =\n",
|
356
|
+
" widgets.ToggleButtons(\n",
|
357
|
+
" options =\n",
|
358
|
+
" ['comment_count', 'likes', 'dislikes', 'views']), \n",
|
359
|
+
" options = options)"
|
360
|
+
]
|
361
|
+
}
|
362
|
+
],
|
363
|
+
"metadata": {
|
364
|
+
"kernelspec": {
|
365
|
+
"display_name": "Python 3",
|
366
|
+
"language": "python",
|
367
|
+
"name": "python3"
|
368
|
+
},
|
369
|
+
"language_info": {
|
370
|
+
"codemirror_mode": {
|
371
|
+
"name": "ipython",
|
372
|
+
"version": 3
|
373
|
+
},
|
374
|
+
"file_extension": ".py",
|
375
|
+
"mimetype": "text/x-python",
|
376
|
+
"name": "python",
|
377
|
+
"nbconvert_exporter": "python",
|
378
|
+
"pygments_lexer": "ipython3",
|
379
|
+
"version": "3.7.9"
|
380
|
+
}
|
381
|
+
},
|
382
|
+
"nbformat": 4,
|
383
|
+
"nbformat_minor": 2
|
384
|
+
}
|
@@ -0,0 +1,254 @@
|
|
1
|
+
{
|
2
|
+
"cells": [
|
3
|
+
{
|
4
|
+
"cell_type": "markdown",
|
5
|
+
"metadata": {},
|
6
|
+
"source": [
|
7
|
+
"### A Simple Webpage\n",
|
8
|
+
"\n",
|
9
|
+
"In this section, you will create and publish a simple interactive webpage!\n",
|
10
|
+
"\n",
|
11
|
+
"In Jupyter, create a notebook and name it `tutorial.ipynb`. Type or paste in the code from this tutorial into the notebook."
|
12
|
+
]
|
13
|
+
},
|
14
|
+
{
|
15
|
+
"cell_type": "markdown",
|
16
|
+
"metadata": {},
|
17
|
+
"source": [
|
18
|
+
"#### Using Interact"
|
19
|
+
]
|
20
|
+
},
|
21
|
+
{
|
22
|
+
"cell_type": "markdown",
|
23
|
+
"metadata": {},
|
24
|
+
"source": [
|
25
|
+
"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",
|
26
|
+
"\n",
|
27
|
+
"We start by importing the `interact` function:"
|
28
|
+
]
|
29
|
+
},
|
30
|
+
{
|
31
|
+
"cell_type": "code",
|
32
|
+
"execution_count": 1,
|
33
|
+
"metadata": {},
|
34
|
+
"outputs": [],
|
35
|
+
"source": [
|
36
|
+
"from ipywidgets import interact"
|
37
|
+
]
|
38
|
+
},
|
39
|
+
{
|
40
|
+
"cell_type": "markdown",
|
41
|
+
"metadata": {},
|
42
|
+
"source": [
|
43
|
+
"The `interact` function takes in a function and produces an interface to call the function with different parameters."
|
44
|
+
]
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"cell_type": "code",
|
48
|
+
"execution_count": 2,
|
49
|
+
"metadata": {},
|
50
|
+
"outputs": [],
|
51
|
+
"source": [
|
52
|
+
"def square(x):\n",
|
53
|
+
" return x * x"
|
54
|
+
]
|
55
|
+
},
|
56
|
+
{
|
57
|
+
"cell_type": "markdown",
|
58
|
+
"metadata": {},
|
59
|
+
"source": [
|
60
|
+
"Pass the `square` function into `interact` and specify `square`'s arguments as keyword arguments:"
|
61
|
+
]
|
62
|
+
},
|
63
|
+
{
|
64
|
+
"cell_type": "code",
|
65
|
+
"execution_count": 3,
|
66
|
+
"metadata": {},
|
67
|
+
"outputs": [
|
68
|
+
{
|
69
|
+
"data": {
|
70
|
+
"application/vnd.jupyter.widget-view+json": {
|
71
|
+
"model_id": "8ce32e90254541748b63ca19a5c0f546",
|
72
|
+
"version_major": 2,
|
73
|
+
"version_minor": 0
|
74
|
+
},
|
75
|
+
"text/plain": [
|
76
|
+
"interactive(children=(IntSlider(value=10, description='x', max=30, min=-10), Output()), _dom_classes=('widget-…"
|
77
|
+
]
|
78
|
+
},
|
79
|
+
"metadata": {},
|
80
|
+
"output_type": "display_data"
|
81
|
+
}
|
82
|
+
],
|
83
|
+
"source": [
|
84
|
+
"interact(square, x=10);"
|
85
|
+
]
|
86
|
+
},
|
87
|
+
{
|
88
|
+
"cell_type": "markdown",
|
89
|
+
"metadata": {},
|
90
|
+
"source": [
|
91
|
+
"To control the range of values `x` can take, you can pass in a tuple of the same format as Python's `range` function:"
|
92
|
+
]
|
93
|
+
},
|
94
|
+
{
|
95
|
+
"cell_type": "code",
|
96
|
+
"execution_count": 4,
|
97
|
+
"metadata": {},
|
98
|
+
"outputs": [
|
99
|
+
{
|
100
|
+
"data": {
|
101
|
+
"application/vnd.jupyter.widget-view+json": {
|
102
|
+
"model_id": "1d942477ae474105948fd02a3523afc9",
|
103
|
+
"version_major": 2,
|
104
|
+
"version_minor": 0
|
105
|
+
},
|
106
|
+
"text/plain": [
|
107
|
+
"interactive(children=(IntSlider(value=50, description='x', step=10), Output()), _dom_classes=('widget-interact…"
|
108
|
+
]
|
109
|
+
},
|
110
|
+
"metadata": {},
|
111
|
+
"output_type": "display_data"
|
112
|
+
}
|
113
|
+
],
|
114
|
+
"source": [
|
115
|
+
"interact(square, x=(0, 100, 10));"
|
116
|
+
]
|
117
|
+
},
|
118
|
+
{
|
119
|
+
"cell_type": "markdown",
|
120
|
+
"metadata": {},
|
121
|
+
"source": [
|
122
|
+
"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",
|
123
|
+
"\n",
|
124
|
+
"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."
|
125
|
+
]
|
126
|
+
},
|
127
|
+
{
|
128
|
+
"cell_type": "markdown",
|
129
|
+
"metadata": {},
|
130
|
+
"source": [
|
131
|
+
"#### Widget Types"
|
132
|
+
]
|
133
|
+
},
|
134
|
+
{
|
135
|
+
"cell_type": "markdown",
|
136
|
+
"metadata": {},
|
137
|
+
"source": [
|
138
|
+
"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."
|
139
|
+
]
|
140
|
+
},
|
141
|
+
{
|
142
|
+
"cell_type": "code",
|
143
|
+
"execution_count": 5,
|
144
|
+
"metadata": {},
|
145
|
+
"outputs": [],
|
146
|
+
"source": [
|
147
|
+
"def friends(name, number):\n",
|
148
|
+
" return '{} has {} friends!'.format(name, number)"
|
149
|
+
]
|
150
|
+
},
|
151
|
+
{
|
152
|
+
"cell_type": "code",
|
153
|
+
"execution_count": 6,
|
154
|
+
"metadata": {},
|
155
|
+
"outputs": [
|
156
|
+
{
|
157
|
+
"data": {
|
158
|
+
"application/vnd.jupyter.widget-view+json": {
|
159
|
+
"model_id": "d6e5c083d0074c7da1413a7b7f990984",
|
160
|
+
"version_major": 2,
|
161
|
+
"version_minor": 0
|
162
|
+
},
|
163
|
+
"text/plain": [
|
164
|
+
"interactive(children=(Text(value='Sam', description='name'), IntSlider(value=7, description='number', max=10, …"
|
165
|
+
]
|
166
|
+
},
|
167
|
+
"metadata": {},
|
168
|
+
"output_type": "display_data"
|
169
|
+
}
|
170
|
+
],
|
171
|
+
"source": [
|
172
|
+
"interact(friends, name='Sam', number=(5, 10));"
|
173
|
+
]
|
174
|
+
},
|
175
|
+
{
|
176
|
+
"cell_type": "markdown",
|
177
|
+
"metadata": {},
|
178
|
+
"source": [
|
179
|
+
"And a dictionary will generate a dropdown menu:"
|
180
|
+
]
|
181
|
+
},
|
182
|
+
{
|
183
|
+
"cell_type": "code",
|
184
|
+
"execution_count": 7,
|
185
|
+
"metadata": {
|
186
|
+
"scrolled": true
|
187
|
+
},
|
188
|
+
"outputs": [
|
189
|
+
{
|
190
|
+
"data": {
|
191
|
+
"application/vnd.jupyter.widget-view+json": {
|
192
|
+
"model_id": "0c32a3f3ad154ba1a3a5639f0d8f1c40",
|
193
|
+
"version_major": 2,
|
194
|
+
"version_minor": 0
|
195
|
+
},
|
196
|
+
"text/plain": [
|
197
|
+
"interactive(children=(Text(value='Sam', description='name'), Dropdown(description='number', options={'One': 1,…"
|
198
|
+
]
|
199
|
+
},
|
200
|
+
"metadata": {},
|
201
|
+
"output_type": "display_data"
|
202
|
+
}
|
203
|
+
],
|
204
|
+
"source": [
|
205
|
+
"interact(friends, name='Sam', number={'One': 1, 'Five': 5, 'Ten': 10});"
|
206
|
+
]
|
207
|
+
},
|
208
|
+
{
|
209
|
+
"cell_type": "markdown",
|
210
|
+
"metadata": {},
|
211
|
+
"source": [
|
212
|
+
"Here's the complete list of each argument type and the widget it generates:\n",
|
213
|
+
"\n",
|
214
|
+
"| Keyword argument | Widget |\n",
|
215
|
+
"| ------- | ------ |\n",
|
216
|
+
"| `True` or `False` | Checkbox |\n",
|
217
|
+
"| `'Hi there'` | Text |\n",
|
218
|
+
"| value or (min,max) or (min,max,step) if integers are passed | IntSlider |\n",
|
219
|
+
"| value or (min,max) or (min,max,step) if floats are passed | FloatSlider |\n",
|
220
|
+
"| `['orange','apple']` or `{'one':1,'two':2}` | Dropdown |\n"
|
221
|
+
]
|
222
|
+
},
|
223
|
+
{
|
224
|
+
"cell_type": "markdown",
|
225
|
+
"metadata": {},
|
226
|
+
"source": [
|
227
|
+
"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",
|
228
|
+
"\n",
|
229
|
+
"You are now ready to publish your webpage! Proceed to the next page of the tutorial."
|
230
|
+
]
|
231
|
+
}
|
232
|
+
],
|
233
|
+
"metadata": {
|
234
|
+
"kernelspec": {
|
235
|
+
"display_name": "Python 3",
|
236
|
+
"language": "python",
|
237
|
+
"name": "python3"
|
238
|
+
},
|
239
|
+
"language_info": {
|
240
|
+
"codemirror_mode": {
|
241
|
+
"name": "ipython",
|
242
|
+
"version": 3
|
243
|
+
},
|
244
|
+
"file_extension": ".py",
|
245
|
+
"mimetype": "text/x-python",
|
246
|
+
"name": "python",
|
247
|
+
"nbconvert_exporter": "python",
|
248
|
+
"pygments_lexer": "ipython3",
|
249
|
+
"version": "3.7.9"
|
250
|
+
}
|
251
|
+
},
|
252
|
+
"nbformat": 4,
|
253
|
+
"nbformat_minor": 2
|
254
|
+
}
|