j1-template 2022.4.2 → 2022.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/assets/themes/j1/core/js/template.min.js.map +1 -1
  3. data/assets/themes/j1/modules/vega/js/vega-lite/README.md +0 -13
  4. data/lib/j1/version.rb +1 -1
  5. data/lib/starter_web/Gemfile +1 -1
  6. data/lib/starter_web/_config.yml +1 -1
  7. data/lib/starter_web/_data/modules/defaults/nbinteract.yml +1 -1
  8. data/lib/starter_web/_data/modules/navigator_menu.yml +60 -73
  9. data/lib/starter_web/_data/modules/nbinteract.yml +291 -314
  10. data/lib/starter_web/_plugins/lunr_index.rb +1 -1
  11. data/lib/starter_web/assets/images/modules/attics/shubham-dhage-2-1920x1280.jpg +0 -0
  12. data/lib/starter_web/package.json +1 -1
  13. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_altair_interactive.html +2216 -0
  14. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_altair_non_interactive.html +1170 -0
  15. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_01_basic_plotting.html +1479 -0
  16. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_02_styling_and_theming.html +1524 -0
  17. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_03_data_sources_and_transformations.html +983 -0
  18. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_04_adding_annotations.html +1280 -0
  19. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_05_presentation_layouts.html +660 -0
  20. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_06_linking_and_interactions.html +1563 -0
  21. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_07_bar_and_categorical_data_plots.html +1888 -0
  22. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_08_graph_and_network_plots.html +689 -0
  23. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_09_geographic_plots.html +767 -0
  24. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_circular_times_table.html +2 -1
  25. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +21 -0
  26. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  27. data/lib/starter_web/utilsrv/package.json +1 -1
  28. metadata +14 -14
  29. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_central_limit_theorem.html +0 -290
  30. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_correlation.html +0 -818
  31. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_empirical_distributions.html +0 -351
  32. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_linear_regression.html +0 -106
  33. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_probability_distribution_plots.html +0 -228
  34. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_sampling_from_a_population.html +0 -518
  35. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_variability_of_the_sample_mean.html +0 -372
  36. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_graphing.html +0 -473
  37. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_interactive_questions.html +0 -242
  38. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_layout.html +0 -496
  39. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_tutorial_interact.html +0 -329
  40. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_tutorial_monty_hall.html +0 -866
@@ -1,496 +0,0 @@
1
- <div class="cell text_cell">
2
- <button class="js-nbinteract-widget">
3
- Loading widgets...
4
- </button>
5
- </div>
6
-
7
-
8
-
9
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
10
- <div class="text_cell_render border-box-sizing rendered_html">
11
- <h3 id="Page-Layout-and-Dashboarding">Page Layout and Dashboarding<a class="anchor-link" href="#Page-Layout-and-Dashboarding">&#182;</a></h3><p><code>nbinteract</code> 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 <code>nbinteract</code> add their corresponding CSS classes to the generated cells.</p>
12
- <table>
13
- <thead><tr>
14
- <th>Marker</th>
15
- <th>Description</th>
16
- <th>CSS class added</th>
17
- </tr>
18
- </thead>
19
- <tbody>
20
- <tr>
21
- <td><code>nbi:left</code></td>
22
- <td>Floats cell to the left</td>
23
- <td><code>nbinteract-left</code></td>
24
- </tr>
25
- <tr>
26
- <td><code>nbi:right</code></td>
27
- <td>Floats cell to the right</td>
28
- <td><code>nbinteract-right</code></td>
29
- </tr>
30
- <tr>
31
- <td><code>nbi:hide_in</code></td>
32
- <td>Hides cell input</td>
33
- <td><code>nbinteract-hide_in</code></td>
34
- </tr>
35
- <tr>
36
- <td><code>nbi:hide_out</code></td>
37
- <td>Hides cell output</td>
38
- <td><code>nbinteract-hide_out</code></td>
39
- </tr>
40
- </tbody>
41
- </table>
42
- <p>By default, only the <code>full</code> template will automatically provide styling for these classes. For other templates, <code>nbinteract</code> assumes that the embedding page will use the CSS classes to style the cells.</p>
43
- <p>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.</p>
44
-
45
- </div>
46
- </div>
47
- </div>
48
-
49
-
50
-
51
- <div class="nbinteract-hide_in
52
- cell border-box-sizing code_cell rendered">
53
- <div class="input">
54
-
55
- <div class="inner_cell">
56
- <div class="input_area">
57
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
58
- <span class="kn">import</span> <span class="nn">warnings</span>
59
- <span class="c1"># Ignore numpy dtype warnings. These warnings are caused by an interaction</span>
60
- <span class="c1"># between numpy and Cython and can be safely ignored.</span>
61
- <span class="c1"># Reference: https://stackoverflow.com/a/40846742</span>
62
- <span class="n">warnings</span><span class="o">.</span><span class="n">filterwarnings</span><span class="p">(</span><span class="s2">&quot;ignore&quot;</span><span class="p">,</span> <span class="n">message</span><span class="o">=</span><span class="s2">&quot;numpy.dtype size changed&quot;</span><span class="p">)</span>
63
- <span class="n">warnings</span><span class="o">.</span><span class="n">filterwarnings</span><span class="p">(</span><span class="s2">&quot;ignore&quot;</span><span class="p">,</span> <span class="n">message</span><span class="o">=</span><span class="s2">&quot;numpy.ufunc size changed&quot;</span><span class="p">)</span>
64
-
65
- <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
66
- <span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
67
- <span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
68
- <span class="kn">import</span> <span class="nn">nbinteract</span> <span class="k">as</span> <span class="nn">nbi</span>
69
-
70
- <span class="c1"># Jupyter Specifics</span>
71
- <span class="c1">#</span>
72
- <span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
73
- <span class="c1"># from ipywidgets import interact, interactive, fixed, interact_manual</span>
74
- <span class="kn">from</span> <span class="nn">ipywidgets.widgets</span> <span class="kn">import</span> <span class="n">interact</span><span class="p">,</span> <span class="n">IntSlider</span><span class="p">,</span> <span class="n">FloatSlider</span><span class="p">,</span> <span class="n">Layout</span>
75
-
76
-
77
- <span class="n">np</span><span class="o">.</span><span class="n">set_printoptions</span><span class="p">(</span><span class="n">threshold</span><span class="o">=</span><span class="mi">20</span><span class="p">,</span> <span class="n">precision</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span> <span class="n">suppress</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
78
- <span class="n">pd</span><span class="o">.</span><span class="n">options</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">max_rows</span> <span class="o">=</span> <span class="mi">7</span>
79
- <span class="n">pd</span><span class="o">.</span><span class="n">options</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">max_columns</span> <span class="o">=</span> <span class="mi">8</span>
80
- <span class="n">pd</span><span class="o">.</span><span class="n">set_option</span><span class="p">(</span><span class="s1">&#39;precision&#39;</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span>
81
-
82
- <span class="c1"># This option stops scientific notation for pandas</span>
83
- <span class="n">pd</span><span class="o">.</span><span class="n">set_option</span><span class="p">(</span><span class="s1">&#39;display.float_format&#39;</span><span class="p">,</span> <span class="s1">&#39;</span><span class="si">{:.2f}</span><span class="s1">&#39;</span><span class="o">.</span><span class="n">format</span><span class="p">)</span>
84
-
85
- <span class="n">style</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;description_width&#39;</span><span class="p">:</span> <span class="s1">&#39;150px&#39;</span><span class="p">}</span>
86
- <span class="n">slider_layout</span> <span class="o">=</span> <span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s1">&#39;90%&#39;</span><span class="p">)</span>
87
-
88
- <span class="c1"># Some Magics</span>
89
- <span class="c1">#</span>
90
- <span class="o">%</span><span class="k">matplotlib</span> inline
91
- </pre></div>
92
-
93
- </div>
94
- </div>
95
- </div>
96
-
97
- </div>
98
-
99
-
100
-
101
- <div class="nbinteract-hide_in
102
- cell border-box-sizing code_cell rendered">
103
- <div class="input">
104
-
105
- <div class="inner_cell">
106
- <div class="input_area">
107
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
108
- <span class="k">def</span> <span class="nf">df_interact</span><span class="p">(</span><span class="n">df</span><span class="p">,</span> <span class="n">nrows</span><span class="o">=</span><span class="mi">7</span><span class="p">,</span> <span class="n">ncols</span><span class="o">=</span><span class="mi">7</span><span class="p">):</span>
109
- <span class="sd">&#39;&#39;&#39;</span>
110
- <span class="sd"> Outputs sliders that show rows and columns of df</span>
111
- <span class="sd"> &#39;&#39;&#39;</span>
112
- <span class="k">def</span> <span class="nf">peek</span><span class="p">(</span><span class="n">row</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">col</span><span class="o">=</span><span class="mi">0</span><span class="p">):</span>
113
- <span class="k">return</span> <span class="n">df</span><span class="o">.</span><span class="n">iloc</span><span class="p">[</span><span class="n">row</span><span class="p">:</span><span class="n">row</span> <span class="o">+</span> <span class="n">nrows</span><span class="p">,</span> <span class="n">col</span><span class="p">:</span><span class="n">col</span> <span class="o">+</span> <span class="n">ncols</span><span class="p">]</span>
114
- <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">columns</span><span class="p">)</span> <span class="o">&lt;=</span> <span class="n">ncols</span><span class="p">:</span>
115
- <span class="n">interact</span><span class="p">(</span><span class="n">peek</span><span class="p">,</span> <span class="n">row</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="p">)</span> <span class="o">-</span> <span class="n">nrows</span><span class="p">,</span> <span class="n">nrows</span><span class="p">),</span> <span class="n">col</span><span class="o">=</span><span class="n">fixed</span><span class="p">(</span><span class="mi">0</span><span class="p">))</span>
116
- <span class="k">else</span><span class="p">:</span>
117
- <span class="n">interact</span><span class="p">(</span><span class="n">peek</span><span class="p">,</span>
118
- <span class="n">row</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="p">)</span> <span class="o">-</span> <span class="n">nrows</span><span class="p">,</span> <span class="n">nrows</span><span class="p">),</span>
119
- <span class="n">col</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">columns</span><span class="p">)</span> <span class="o">-</span> <span class="n">ncols</span><span class="p">))</span>
120
- <span class="nb">print</span><span class="p">(</span><span class="s1">&#39;(</span><span class="si">{}</span><span class="s1"> rows, </span><span class="si">{}</span><span class="s1"> columns) total&#39;</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">df</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">]))</span>
121
- </pre></div>
122
-
123
- </div>
124
- </div>
125
- </div>
126
-
127
- </div>
128
-
129
-
130
-
131
- <div class="nbinteract-hide_in
132
- cell border-box-sizing code_cell rendered">
133
- <div class="input">
134
-
135
- <div class="inner_cell">
136
- <div class="input_area">
137
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
138
- <span class="n">videos</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s1">&#39;https://github.com/SamLau95/nbinteract/raw/master/notebooks/youtube_trending.csv&#39;</span><span class="p">,</span>
139
- <span class="n">parse_dates</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;publish_time&#39;</span><span class="p">],</span>
140
- <span class="n">index_col</span><span class="o">=</span><span class="s1">&#39;publish_time&#39;</span><span class="p">)</span>
141
- </pre></div>
142
-
143
- </div>
144
- </div>
145
- </div>
146
-
147
- </div>
148
-
149
-
150
-
151
- <div class="
152
- cell border-box-sizing code_cell rendered">
153
- <div class="input">
154
-
155
- <div class="inner_cell">
156
- <div class="input_area">
157
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">df_interact</span><span class="p">(</span><span class="n">videos</span><span class="p">)</span>
158
- </pre></div>
159
-
160
- </div>
161
- </div>
162
- </div>
163
-
164
- <div class="output_wrapper">
165
- <div class="output">
166
-
167
-
168
- <div class="output_area">
169
-
170
-
171
-
172
-
173
-
174
- <div class="output_subarea output_widget_view ">
175
- <button class="js-nbinteract-widget">
176
- Loading widgets...
177
- </button>
178
- </div>
179
-
180
- </div>
181
-
182
- <div class="output_area">
183
-
184
-
185
-
186
- <div class="output_subarea output_stream output_stdout output_text">
187
- <pre>(2435 rows, 8 columns) total
188
- </pre>
189
- </div>
190
- </div>
191
-
192
- </div>
193
- </div>
194
-
195
- </div>
196
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
197
- <div class="text_cell_render border-box-sizing rendered_html">
198
- <h4 id="Dashboard-1">Dashboard 1<a class="anchor-link" href="#Dashboard-1">&#182;</a></h4>
199
- </div>
200
- </div>
201
- </div>
202
-
203
-
204
-
205
- <div class="nbinteract-left
206
- cell border-box-sizing code_cell rendered">
207
- <div class="input">
208
-
209
- <div class="inner_cell">
210
- <div class="input_area">
211
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:left</span>
212
- <span class="n">options</span> <span class="o">=</span> <span class="p">{</span>
213
- <span class="s1">&#39;title&#39;</span><span class="p">:</span> <span class="s1">&#39;Views for Trending Videos&#39;</span><span class="p">,</span>
214
- <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Date Trending&#39;</span><span class="p">,</span>
215
- <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Views [1k]&#39;</span><span class="p">,</span>
216
- <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
217
- <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
218
- <span class="p">}</span>
219
-
220
- <span class="k">def</span> <span class="nf">xs</span><span class="p">(</span><span class="n">channel</span><span class="p">):</span>
221
- <span class="k">return</span> <span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span>
222
- <span class="o">==</span> <span class="n">channel</span><span class="p">]</span><span class="o">.</span><span class="n">index</span>
223
-
224
- <span class="k">def</span> <span class="nf">ys</span><span class="p">(</span><span class="n">xs</span><span class="p">):</span>
225
- <span class="k">return</span> <span class="p">(</span><span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">xs</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">])</span><span class="o">/</span><span class="mi">1000</span>
226
-
227
-
228
-
229
-
230
- <span class="n">nbi</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">ys</span><span class="p">,</span>
231
- <span class="n">channel</span> <span class="o">=</span>
232
- <span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span><span class="o">.</span><span class="n">unique</span><span class="p">()[</span><span class="mi">9</span><span class="p">:</span><span class="mi">15</span><span class="p">],</span>
233
- <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</span>
234
- </pre></div>
235
-
236
- </div>
237
- </div>
238
- </div>
239
-
240
- <div class="output_wrapper">
241
- <div class="output">
242
-
243
-
244
- <div class="output_area">
245
-
246
-
247
-
248
-
249
-
250
- <div class="output_subarea output_widget_view ">
251
- <button class="js-nbinteract-widget">
252
- Loading widgets...
253
- </button>
254
- </div>
255
-
256
- </div>
257
-
258
- </div>
259
- </div>
260
-
261
- </div>
262
-
263
-
264
-
265
- <div class="nbinteract-right
266
- cell border-box-sizing code_cell rendered">
267
- <div class="input">
268
-
269
- <div class="inner_cell">
270
- <div class="input_area">
271
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:right</span>
272
- <span class="n">options</span><span class="o">=</span><span class="p">{</span>
273
- <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Proportion per Unit [1k]&#39;</span><span class="p">,</span>
274
- <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Units&#39;</span><span class="p">,</span>
275
- <span class="s1">&#39;bins&#39;</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
276
- <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
277
- <span class="p">}</span>
278
-
279
- <span class="k">def</span> <span class="nf">values</span><span class="p">(</span><span class="n">col</span><span class="p">):</span>
280
- <span class="n">vals</span> <span class="o">=</span> <span class="n">videos</span><span class="p">[</span><span class="n">col</span><span class="p">]</span>
281
- <span class="k">return</span> <span class="p">(</span><span class="n">vals</span><span class="p">[</span><span class="n">vals</span> <span class="o">&lt;</span> <span class="n">vals</span><span class="o">.</span><span class="n">quantile</span><span class="p">(</span><span class="mf">0.8</span><span class="p">)])</span><span class="o">/</span><span class="mi">1000</span>
282
-
283
-
284
-
285
-
286
-
287
-
288
- <span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span>
289
- <span class="n">values</span><span class="p">,</span><span class="n">col</span> <span class="o">=</span>
290
- <span class="n">widgets</span><span class="o">.</span><span class="n">ToggleButtons</span><span class="p">(</span>
291
- <span class="n">options</span> <span class="o">=</span>
292
- <span class="p">[</span><span class="s1">&#39;comment_count&#39;</span><span class="p">,</span> <span class="s1">&#39;likes&#39;</span><span class="p">,</span> <span class="s1">&#39;dislikes&#39;</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">]),</span>
293
- <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</span>
294
- </pre></div>
295
-
296
- </div>
297
- </div>
298
- </div>
299
-
300
- <div class="output_wrapper">
301
- <div class="output">
302
-
303
-
304
- <div class="output_area">
305
-
306
-
307
-
308
-
309
-
310
- <div class="output_subarea output_widget_view ">
311
- <button class="js-nbinteract-widget">
312
- Loading widgets...
313
- </button>
314
- </div>
315
-
316
- </div>
317
-
318
- </div>
319
- </div>
320
-
321
- </div>
322
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
323
- <div class="text_cell_render border-box-sizing rendered_html">
324
-
325
- </div>
326
- </div>
327
- </div>
328
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
329
- <div class="text_cell_render border-box-sizing rendered_html">
330
- <h4 id="Dashboard-2">Dashboard 2<a class="anchor-link" href="#Dashboard-2">&#182;</a></h4><p>This dashboard example is using the same widgets used for <em>Dashboard 1</em>, but <strong>without</strong> showing the code.</p>
331
-
332
- </div>
333
- </div>
334
- </div>
335
-
336
-
337
-
338
- <div class="nbinteract-hide_in
339
- cell border-box-sizing code_cell rendered">
340
- <div class="input">
341
-
342
- <div class="inner_cell">
343
- <div class="input_area">
344
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
345
- <span class="n">df_interact</span><span class="p">(</span><span class="n">videos</span><span class="p">)</span>
346
- </pre></div>
347
-
348
- </div>
349
- </div>
350
- </div>
351
-
352
- <div class="output_wrapper">
353
- <div class="output">
354
-
355
-
356
- <div class="output_area">
357
-
358
-
359
-
360
-
361
-
362
- <div class="output_subarea output_widget_view ">
363
- <button class="js-nbinteract-widget">
364
- Loading widgets...
365
- </button>
366
- </div>
367
-
368
- </div>
369
-
370
- <div class="output_area">
371
-
372
-
373
-
374
- <div class="output_subarea output_stream output_stdout output_text">
375
- <pre>(2435 rows, 8 columns) total
376
- </pre>
377
- </div>
378
- </div>
379
-
380
- </div>
381
- </div>
382
-
383
- </div>
384
-
385
-
386
-
387
- <div class="nbinteract-left nbinteract-hide_in
388
- cell border-box-sizing code_cell rendered">
389
- <div class="input">
390
-
391
- <div class="inner_cell">
392
- <div class="input_area">
393
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
394
- <span class="c1"># nbi:left</span>
395
- <span class="n">options</span> <span class="o">=</span> <span class="p">{</span>
396
- <span class="s1">&#39;title&#39;</span><span class="p">:</span> <span class="s1">&#39;Views for Trending Videos&#39;</span><span class="p">,</span>
397
- <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Date Trending&#39;</span><span class="p">,</span>
398
- <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Views [1k]&#39;</span><span class="p">,</span>
399
- <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
400
- <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
401
- <span class="p">}</span>
402
-
403
- <span class="k">def</span> <span class="nf">xs</span><span class="p">(</span><span class="n">channel</span><span class="p">):</span>
404
- <span class="k">return</span> <span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span> <span class="o">==</span> <span class="n">channel</span><span class="p">]</span><span class="o">.</span><span class="n">index</span>
405
-
406
- <span class="k">def</span> <span class="nf">ys</span><span class="p">(</span><span class="n">xs</span><span class="p">):</span>
407
- <span class="k">return</span> <span class="p">(</span><span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">xs</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">])</span><span class="o">/</span><span class="mi">1000</span>
408
-
409
- <span class="n">nbi</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">ys</span><span class="p">,</span>
410
- <span class="n">channel</span><span class="o">=</span><span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span><span class="o">.</span><span class="n">unique</span><span class="p">()[</span><span class="mi">9</span><span class="p">:</span><span class="mi">15</span><span class="p">],</span>
411
- <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</span>
412
- </pre></div>
413
-
414
- </div>
415
- </div>
416
- </div>
417
-
418
- <div class="output_wrapper">
419
- <div class="output">
420
-
421
-
422
- <div class="output_area">
423
-
424
-
425
-
426
-
427
-
428
- <div class="output_subarea output_widget_view ">
429
- <button class="js-nbinteract-widget">
430
- Loading widgets...
431
- </button>
432
- </div>
433
-
434
- </div>
435
-
436
- </div>
437
- </div>
438
-
439
- </div>
440
-
441
-
442
-
443
- <div class="nbinteract-right nbinteract-hide_in
444
- cell border-box-sizing code_cell rendered">
445
- <div class="input">
446
-
447
- <div class="inner_cell">
448
- <div class="input_area">
449
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
450
- <span class="c1"># nbi:right</span>
451
- <span class="n">options</span><span class="o">=</span><span class="p">{</span>
452
- <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Proportion per Unit [1k]&#39;</span><span class="p">,</span>
453
- <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Units&#39;</span><span class="p">,</span>
454
- <span class="s1">&#39;bins&#39;</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
455
- <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
456
- <span class="p">}</span>
457
-
458
- <span class="k">def</span> <span class="nf">values</span><span class="p">(</span><span class="n">col</span><span class="p">):</span>
459
- <span class="n">vals</span> <span class="o">=</span> <span class="n">videos</span><span class="p">[</span><span class="n">col</span><span class="p">]</span>
460
- <span class="k">return</span> <span class="p">(</span><span class="n">vals</span><span class="p">[</span><span class="n">vals</span> <span class="o">&lt;</span> <span class="n">vals</span><span class="o">.</span><span class="n">quantile</span><span class="p">(</span><span class="mf">0.8</span><span class="p">)])</span><span class="o">/</span><span class="mi">1000</span>
461
-
462
- <span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span>
463
- <span class="n">values</span><span class="p">,</span><span class="n">col</span> <span class="o">=</span>
464
- <span class="n">widgets</span><span class="o">.</span><span class="n">ToggleButtons</span><span class="p">(</span>
465
- <span class="n">options</span> <span class="o">=</span>
466
- <span class="p">[</span><span class="s1">&#39;comment_count&#39;</span><span class="p">,</span> <span class="s1">&#39;likes&#39;</span><span class="p">,</span> <span class="s1">&#39;dislikes&#39;</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">]),</span>
467
- <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</span>
468
- </pre></div>
469
-
470
- </div>
471
- </div>
472
- </div>
473
-
474
- <div class="output_wrapper">
475
- <div class="output">
476
-
477
-
478
- <div class="output_area">
479
-
480
-
481
-
482
-
483
-
484
- <div class="output_subarea output_widget_view ">
485
- <button class="js-nbinteract-widget">
486
- Loading widgets...
487
- </button>
488
- </div>
489
-
490
- </div>
491
-
492
- </div>
493
- </div>
494
-
495
- </div>
496
-