j1-template 2022.4.2 → 2022.4.3
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/core/js/template.min.js.map +1 -1
- data/assets/themes/j1/modules/vega/js/vega-lite/README.md +0 -13
- 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/defaults/nbinteract.yml +1 -1
- data/lib/starter_web/_data/modules/navigator_menu.yml +60 -73
- data/lib/starter_web/_data/modules/nbinteract.yml +291 -314
- data/lib/starter_web/_plugins/lunr_index.rb +1 -1
- data/lib/starter_web/assets/images/modules/attics/shubham-dhage-2-1920x1280.jpg +0 -0
- data/lib/starter_web/package.json +1 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_altair_interactive.html +2216 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_altair_non_interactive.html +1170 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_01_basic_plotting.html +1479 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_02_styling_and_theming.html +1524 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_03_data_sources_and_transformations.html +983 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_04_adding_annotations.html +1280 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_05_presentation_layouts.html +660 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_06_linking_and_interactions.html +1563 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_07_bar_and_categorical_data_plots.html +1888 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_08_graph_and_network_plots.html +689 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_09_geographic_plots.html +767 -0
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_circular_times_table.html +2 -1
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +21 -0
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +14 -14
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_central_limit_theorem.html +0 -290
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_correlation.html +0 -818
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_empirical_distributions.html +0 -351
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_linear_regression.html +0 -106
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_probability_distribution_plots.html +0 -228
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_sampling_from_a_population.html +0 -518
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_examples_variability_of_the_sample_mean.html +0 -372
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_graphing.html +0 -473
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_interactive_questions.html +0 -242
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_layout.html +0 -496
- data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_tutorial_interact.html +0 -329
- 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">¶</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">"ignore"</span><span class="p">,</span> <span class="n">message</span><span class="o">=</span><span class="s2">"numpy.dtype size changed"</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">"ignore"</span><span class="p">,</span> <span class="n">message</span><span class="o">=</span><span class="s2">"numpy.ufunc size changed"</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">'precision'</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">'display.float_format'</span><span class="p">,</span> <span class="s1">'</span><span class="si">{:.2f}</span><span class="s1">'</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">'description_width'</span><span class="p">:</span> <span class="s1">'150px'</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">'90%'</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">'''</span>
|
110
|
-
<span class="sd"> Outputs sliders that show rows and columns of df</span>
|
111
|
-
<span class="sd"> '''</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"><=</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">'(</span><span class="si">{}</span><span class="s1"> rows, </span><span class="si">{}</span><span class="s1"> columns) total'</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">'https://github.com/SamLau95/nbinteract/raw/master/notebooks/youtube_trending.csv'</span><span class="p">,</span>
|
139
|
-
<span class="n">parse_dates</span><span class="o">=</span><span class="p">[</span><span class="s1">'publish_time'</span><span class="p">],</span>
|
140
|
-
<span class="n">index_col</span><span class="o">=</span><span class="s1">'publish_time'</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">¶</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">'title'</span><span class="p">:</span> <span class="s1">'Views for Trending Videos'</span><span class="p">,</span>
|
214
|
-
<span class="s1">'xlabel'</span><span class="p">:</span> <span class="s1">'Date Trending'</span><span class="p">,</span>
|
215
|
-
<span class="s1">'ylabel'</span><span class="p">:</span> <span class="s1">'Views [1k]'</span><span class="p">,</span>
|
216
|
-
<span class="s1">'animation_duration'</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
|
217
|
-
<span class="s1">'aspect_ratio'</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">'channel_title'</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">'views'</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">'channel_title'</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">'ylabel'</span><span class="p">:</span> <span class="s1">'Proportion per Unit [1k]'</span><span class="p">,</span>
|
274
|
-
<span class="s1">'xlabel'</span><span class="p">:</span> <span class="s1">'Units'</span><span class="p">,</span>
|
275
|
-
<span class="s1">'bins'</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
|
276
|
-
<span class="s1">'aspect_ratio'</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"><</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">'comment_count'</span><span class="p">,</span> <span class="s1">'likes'</span><span class="p">,</span> <span class="s1">'dislikes'</span><span class="p">,</span> <span class="s1">'views'</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">¶</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">'title'</span><span class="p">:</span> <span class="s1">'Views for Trending Videos'</span><span class="p">,</span>
|
397
|
-
<span class="s1">'xlabel'</span><span class="p">:</span> <span class="s1">'Date Trending'</span><span class="p">,</span>
|
398
|
-
<span class="s1">'ylabel'</span><span class="p">:</span> <span class="s1">'Views [1k]'</span><span class="p">,</span>
|
399
|
-
<span class="s1">'animation_duration'</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
|
400
|
-
<span class="s1">'aspect_ratio'</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">'channel_title'</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">'views'</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">'channel_title'</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">'ylabel'</span><span class="p">:</span> <span class="s1">'Proportion per Unit [1k]'</span><span class="p">,</span>
|
453
|
-
<span class="s1">'xlabel'</span><span class="p">:</span> <span class="s1">'Units'</span><span class="p">,</span>
|
454
|
-
<span class="s1">'bins'</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
|
455
|
-
<span class="s1">'aspect_ratio'</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"><</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">'comment_count'</span><span class="p">,</span> <span class="s1">'likes'</span><span class="p">,</span> <span class="s1">'dislikes'</span><span class="p">,</span> <span class="s1">'views'</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
|
-
|