j1-template 2022.5.0.rc3 → 2022.5.0.rc4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. checksums.yaml +4 -4
  2. data/assets/data/banner.html +2 -2
  3. data/assets/themes/j1/adapter/js/masterslider.js +22 -5
  4. data/lib/j1/version.rb +1 -1
  5. data/lib/starter_web/_config.yml +3 -3
  6. data/lib/starter_web/_data/blocks/banner.yml +1 -1
  7. data/lib/starter_web/_data/modules/defaults/masterslider.yml +1 -1
  8. data/lib/starter_web/_data/modules/masterslider.yml +0 -4
  9. data/lib/starter_web/package.json +1 -1
  10. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +512 -512
  11. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets.html +629 -629
  12. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_bar_chart.html +95 -95
  13. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_hist_chart.html +93 -93
  14. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_line_chart.html +96 -96
  15. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_question_multiple_choice.html +70 -70
  16. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_question_short_answer.html +156 -156
  17. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_scatter_chart.html +95 -95
  18. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_scatter_drag_chart.html +93 -93
  19. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_odes_in_python.html +955 -955
  20. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  21. data/lib/starter_web/utilsrv/package.json +1 -1
  22. metadata +2 -2
@@ -1,512 +1,512 @@
1
- <div class="cell text_cell">
2
- <button class="js-nbinteract-widget">
3
- Loading widgets...
4
- </button>
5
- </div>
6
-
7
-
8
-
9
-
10
-
11
-
12
- <div class="
13
- cell border-box-sizing code_cell rendered">
14
- <div class="input">
15
-
16
- <div class="inner_cell">
17
- <div class="input_area">
18
- <div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
19
- <span class="kn">import</span> <span class="nn">matplotlib.gridspec</span> <span class="k">as</span> <span class="nn">gridspec</span>
20
- <span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
21
- <span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">interact</span><span class="p">,</span> <span class="n">Layout</span><span class="p">,</span> <span class="n">IntSlider</span><span class="p">,</span> <span class="n">FloatSlider</span>
22
- <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
23
- <span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">arange</span><span class="p">,</span><span class="n">sin</span><span class="p">,</span><span class="n">pi</span>
24
- </pre></div>
25
-
26
- </div>
27
- </div>
28
- </div>
29
-
30
- </div>
31
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
32
- <div class="text_cell_render border-box-sizing rendered_html">
33
- <h3 id="IntSlider-for-interactive-calculation">IntSlider for interactive calculation<a class="anchor-link" href="#IntSlider-for-interactive-calculation">&#182;</a></h3>
34
- </div>
35
- </div>
36
- </div>
37
-
38
-
39
-
40
- <div class="
41
- cell border-box-sizing code_cell rendered">
42
- <div class="input">
43
-
44
- <div class="inner_cell">
45
- <div class="input_area">
46
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">printf</span><span class="p">(</span><span class="nb">str</span><span class="p">,</span> <span class="o">*</span><span class="n">args</span><span class="p">):</span>
47
- <span class="nb">print</span><span class="p">(</span><span class="nb">str</span> <span class="o">%</span> <span class="n">args</span><span class="p">,</span> <span class="n">end</span><span class="o">=</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
48
-
49
- <span class="c1"># Define the square function</span>
50
- <span class="c1">#</span>
51
- <span class="k">def</span> <span class="nf">square</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
52
- <span class="n">result</span> <span class="o">=</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span>
53
-
54
- <span class="c1"># print short notice above the result value</span>
55
- <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;Result of square(</span><span class="si">{</span><span class="n">x</span><span class="si">}</span><span class="s1">) is:&#39;</span><span class="p">,</span> <span class="n">end</span><span class="o">=</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
56
-
57
- <span class="k">return</span> <span class="n">result</span>
58
-
59
- <span class="c1"># Simple interact widget from ipywidgets</span>
60
- <span class="c1">#</span>
61
- <span class="n">interact</span> <span class="o">=</span> <span class="n">interact</span><span class="p">(</span>
62
- <span class="n">square</span><span class="p">,</span>
63
- <span class="n">x</span><span class="o">=</span><span class="n">IntSlider</span><span class="p">(</span>
64
- <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span>
65
- <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
66
- <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
67
- <span class="n">step</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>
68
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider value:&#39;</span><span class="p">,</span>
69
- <span class="n">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;99%&#39;</span><span class="p">)</span>
70
- <span class="p">)</span>
71
- <span class="p">);</span>
72
-
73
- <span class="c1"># the semicolon &#39;;&#39; suppress the output</span>
74
- <span class="c1"># of the code execution</span>
75
- <span class="c1">#</span>
76
- <span class="n">interact</span><span class="p">;</span>
77
- </pre></div>
78
-
79
- </div>
80
- </div>
81
- </div>
82
-
83
- <div class="output_wrapper">
84
- <div class="output">
85
-
86
-
87
- <div class="output_area">
88
-
89
-
90
-
91
-
92
-
93
- <div class="output_subarea output_widget_view ">
94
- <button class="js-nbinteract-widget">
95
- Loading widgets...
96
- </button>
97
- </div>
98
-
99
- </div>
100
-
101
- </div>
102
- </div>
103
-
104
- </div>
105
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
106
- <div class="text_cell_render border-box-sizing rendered_html">
107
- <h3 id="FloatSlider-for-interactive-plotting">FloatSlider for interactive plotting<a class="anchor-link" href="#FloatSlider-for-interactive-plotting">&#182;</a></h3>
108
- </div>
109
- </div>
110
- </div>
111
-
112
-
113
-
114
- <div class="
115
- cell border-box-sizing code_cell rendered">
116
- <div class="input">
117
-
118
- <div class="inner_cell">
119
- <div class="input_area">
120
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># Define the plot function </span>
121
- <span class="c1">#</span>
122
- <span class="k">def</span> <span class="nf">myplot</span><span class="p">(</span><span class="n">xv</span><span class="p">):</span>
123
- <span class="c1"># calculate x as evenly spaced values within a interval 0 .. xv</span>
124
- <span class="n">x</span> <span class="o">=</span> <span class="n">arange</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">xv</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">)</span>
125
- <span class="c1"># the plot function</span>
126
- <span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">pi</span><span class="o">*</span><span class="n">x</span><span class="p">)</span>
127
-
128
- <span class="c1"># NOTE: Matplotlib doesn&#39;t work with pixels directly, but rather</span>
129
- <span class="c1"># physical sizes (inch) and DPI. To use pixels for the figures</span>
130
- <span class="c1"># figsize, the DPI of the monitor must be used for re-calculation</span>
131
- <span class="c1">#</span>
132
- <span class="c1"># See: https://www.infobyip.com/detectmonitordpi.php</span>
133
-
134
- <span class="c1"># DPI of common monitors</span>
135
- <span class="n">my_dpi</span><span class="o">=</span><span class="mi">96</span>
136
-
137
- <span class="c1"># figsize: width|height recalculated from inch to pixels</span>
138
- <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span><span class="n">figsize</span><span class="o">=</span><span class="p">(</span><span class="mi">800</span><span class="o">/</span><span class="n">my_dpi</span><span class="p">,</span> <span class="mi">400</span><span class="o">/</span><span class="n">my_dpi</span><span class="p">),</span> <span class="n">dpi</span><span class="o">=</span><span class="n">my_dpi</span><span class="p">)</span>
139
-
140
- <span class="c1"># set the grid lines (light-gray)</span>
141
- <span class="n">plt</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="n">axis</span><span class="o">=</span><span class="s1">&#39;x&#39;</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s1">&#39;#E0E0E0&#39;</span><span class="p">,</span> <span class="n">linestyle</span><span class="o">=</span><span class="s1">&#39;--&#39;</span><span class="p">,</span> <span class="n">linewidth</span><span class="o">=</span><span class="mi">2</span><span class="p">),</span>
142
- <span class="n">plt</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="n">axis</span><span class="o">=</span><span class="s1">&#39;y&#39;</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s1">&#39;#E0E0E0&#39;</span><span class="p">,</span> <span class="n">linestyle</span><span class="o">=</span><span class="s1">&#39;-&#39;</span><span class="p">,</span> <span class="n">linewidth</span><span class="o">=</span><span class="mi">2</span><span class="p">),</span>
143
-
144
- <span class="c1"># set the axis labels</span>
145
- <span class="n">plt</span><span class="o">.</span><span class="n">xlabel</span><span class="p">(</span><span class="s1">&#39;x-values&#39;</span><span class="p">),</span>
146
- <span class="n">plt</span><span class="o">.</span><span class="n">ylabel</span><span class="p">(</span><span class="s1">&#39;y-values&#39;</span><span class="p">),</span>
147
-
148
- <span class="c1"># set the plot title</span>
149
- <span class="n">plt</span><span class="o">.</span><span class="n">title</span><span class="p">(</span><span class="s1">&#39;Simple plot function based on sin(x)&#39;</span><span class="p">),</span>
150
-
151
- <span class="c1"># define the plot</span>
152
- <span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span>
153
-
154
-
155
- <span class="c1"># Create an interactive widget for the plot using interact</span>
156
- <span class="c1">#</span>
157
- <span class="n">interact</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span>
158
- <span class="n">myplot</span><span class="p">,</span>
159
- <span class="n">xv</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">FloatSlider</span><span class="p">(</span>
160
- <span class="n">value</span><span class="o">=</span><span class="n">pi</span><span class="p">,</span>
161
- <span class="nb">min</span><span class="o">=</span><span class="p">(</span><span class="n">pi</span><span class="p">),</span>
162
- <span class="nb">max</span><span class="o">=</span><span class="p">(</span><span class="mi">4</span><span class="o">*</span><span class="n">pi</span><span class="p">),</span>
163
- <span class="n">step</span><span class="o">=</span><span class="mf">0.01</span><span class="p">,</span>
164
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Value (x):&#39;</span><span class="p">,</span>
165
- <span class="n">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;99%&#39;</span><span class="p">)</span>
166
- <span class="p">)</span>
167
- <span class="p">)</span>
168
-
169
- <span class="c1"># the semicolon &#39;;&#39; suppress the output</span>
170
- <span class="c1"># of the code execution</span>
171
- <span class="c1">#</span>
172
- <span class="n">interact</span><span class="p">;</span>
173
- </pre></div>
174
-
175
- </div>
176
- </div>
177
- </div>
178
-
179
- <div class="output_wrapper">
180
- <div class="output">
181
-
182
-
183
- <div class="output_area">
184
-
185
-
186
-
187
-
188
-
189
- <div class="output_subarea output_widget_view ">
190
- <button class="js-nbinteract-widget">
191
- Loading widgets...
192
- </button>
193
- </div>
194
-
195
- </div>
196
-
197
- </div>
198
- </div>
199
-
200
- </div>
201
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
202
- <div class="text_cell_render border-box-sizing rendered_html">
203
- <h3 id="Select-box">Select box<a class="anchor-link" href="#Select-box">&#182;</a></h3>
204
- </div>
205
- </div>
206
- </div>
207
-
208
-
209
-
210
- <div class="
211
- cell border-box-sizing code_cell rendered">
212
- <div class="input">
213
-
214
- <div class="inner_cell">
215
- <div class="input_area">
216
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">say_my_name</span><span class="p">(</span><span class="n">name</span><span class="p">):</span>
217
- <span class="sd">&quot;&quot;&quot;</span>
218
- <span class="sd"> Print the current widget value in short sentence</span>
219
- <span class="sd"> &quot;&quot;&quot;</span>
220
- <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;My name is </span><span class="si">{</span><span class="n">name</span><span class="si">}</span><span class="s1">&#39;</span><span class="p">)</span>
221
-
222
-
223
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span>
224
- <span class="n">say_my_name</span><span class="p">,</span>
225
- <span class="n">name</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Jim&quot;</span><span class="p">,</span> <span class="s2">&quot;Emma&quot;</span><span class="p">,</span> <span class="s2">&quot;Bond&quot;</span><span class="p">]</span>
226
- <span class="p">);</span>
227
- </pre></div>
228
-
229
- </div>
230
- </div>
231
- </div>
232
-
233
- <div class="output_wrapper">
234
- <div class="output">
235
-
236
-
237
- <div class="output_area">
238
-
239
-
240
-
241
-
242
-
243
- <div class="output_subarea output_widget_view ">
244
- <button class="js-nbinteract-widget">
245
- Loading widgets...
246
- </button>
247
- </div>
248
-
249
- </div>
250
-
251
- </div>
252
- </div>
253
-
254
- </div>
255
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
256
- <div class="text_cell_render border-box-sizing rendered_html">
257
- <h3 id="Combined-widgets">Combined widgets<a class="anchor-link" href="#Combined-widgets">&#182;</a></h3>
258
- </div>
259
- </div>
260
- </div>
261
-
262
-
263
-
264
- <div class="
265
- cell border-box-sizing code_cell rendered">
266
- <div class="input">
267
-
268
- <div class="inner_cell">
269
- <div class="input_area">
270
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">widget_says</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
271
- <span class="sd">&quot;&quot;&quot;</span>
272
- <span class="sd"> Print the current widget value in short sentence</span>
273
- <span class="sd"> &quot;&quot;&quot;</span>
274
- <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;Widget says: </span><span class="si">{</span><span class="n">x</span><span class="si">}</span><span class="s1">&#39;</span><span class="p">)</span>
275
-
276
-
277
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">])</span>
278
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>
279
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mf">.5</span><span class="p">))</span>
280
-
281
- <span class="c1"># the variable underscore (&#39;_&#39;)) returns the output</span>
282
- <span class="c1"># of the latest code execution</span>
283
- <span class="c1">#</span>
284
- <span class="n">_</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
285
- </pre></div>
286
-
287
- </div>
288
- </div>
289
- </div>
290
-
291
- <div class="output_wrapper">
292
- <div class="output">
293
-
294
-
295
- <div class="output_area">
296
-
297
-
298
-
299
-
300
-
301
- <div class="output_subarea output_widget_view ">
302
- <button class="js-nbinteract-widget">
303
- Loading widgets...
304
- </button>
305
- </div>
306
-
307
- </div>
308
-
309
- <div class="output_area">
310
-
311
-
312
-
313
-
314
-
315
- <div class="output_subarea output_widget_view ">
316
- <button class="js-nbinteract-widget">
317
- Loading widgets...
318
- </button>
319
- </div>
320
-
321
- </div>
322
-
323
- <div class="output_area">
324
-
325
-
326
-
327
-
328
-
329
- <div class="output_subarea output_widget_view ">
330
- <button class="js-nbinteract-widget">
331
- Loading widgets...
332
- </button>
333
- </div>
334
-
335
- </div>
336
-
337
- <div class="output_area">
338
-
339
-
340
-
341
-
342
-
343
- <div class="output_subarea output_widget_view ">
344
- <button class="js-nbinteract-widget">
345
- Loading widgets...
346
- </button>
347
- </div>
348
-
349
- </div>
350
-
351
- </div>
352
- </div>
353
-
354
- </div>
355
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
356
- <div class="text_cell_render border-box-sizing rendered_html">
357
- <h3 id="Complex-widget-configs">Complex widget configs<a class="anchor-link" href="#Complex-widget-configs">&#182;</a></h3>
358
- </div>
359
- </div>
360
- </div>
361
-
362
-
363
-
364
- <div class="
365
- cell border-box-sizing code_cell rendered">
366
- <div class="input">
367
-
368
- <div class="inner_cell">
369
- <div class="input_area">
370
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">int_slider</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntSlider</span><span class="p">(</span>
371
- <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span>
372
- <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span> <span class="n">step</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>
373
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider&#39;</span><span class="p">,</span>
374
- <span class="n">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;99%&#39;</span><span class="p">)</span>
375
- <span class="p">)</span>
376
-
377
- <span class="n">int_range_slider</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntRangeSlider</span><span class="p">(</span>
378
- <span class="n">value</span><span class="o">=</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">40</span><span class="p">),</span>
379
- <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
380
- <span class="nb">max</span><span class="o">=</span><span class="mi">100</span><span class="p">,</span>
381
- <span class="n">step</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span>
382
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Range Slider&#39;</span><span class="p">,</span>
383
- <span class="n">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;99%&#39;</span><span class="p">)</span>
384
- <span class="p">)</span>
385
-
386
- <span class="n">dropdown</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Dropdown</span><span class="p">(</span>
387
- <span class="n">value</span><span class="o">=</span><span class="s1">&#39;Feb&#39;</span><span class="p">,</span>
388
- <span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Jan&#39;</span><span class="p">,</span> <span class="s1">&#39;Feb&#39;</span><span class="p">,</span> <span class="s1">&#39;Mar&#39;</span><span class="p">,</span> <span class="s1">&#39;Apr&#39;</span><span class="p">],</span>
389
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Dropdown&#39;</span>
390
- <span class="p">)</span>
391
-
392
- <span class="n">radiobuttons</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">RadioButtons</span><span class="p">(</span>
393
- <span class="n">value</span><span class="o">=</span><span class="s1">&#39;Feb&#39;</span><span class="p">,</span>
394
- <span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Jan&#39;</span><span class="p">,</span> <span class="s1">&#39;Feb&#39;</span><span class="p">,</span> <span class="s1">&#39;Mar&#39;</span><span class="p">,</span> <span class="s1">&#39;Apr&#39;</span><span class="p">],</span>
395
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Radio Buttons&#39;</span>
396
- <span class="p">)</span>
397
-
398
- <span class="n">combobox</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Combobox</span><span class="p">(</span>
399
- <span class="n">placeholder</span><span class="o">=</span><span class="s1">&#39;start typing... (e.g. L or o)&#39;</span><span class="p">,</span>
400
- <span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Amsterdam&#39;</span><span class="p">,</span> <span class="s1">&#39;Athens&#39;</span><span class="p">,</span> <span class="s1">&#39;Lisbon&#39;</span><span class="p">,</span> <span class="s1">&#39;London&#39;</span><span class="p">,</span> <span class="s1">&#39;Ljubljana&#39;</span><span class="p">],</span>
401
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Combo Box&#39;</span>
402
- <span class="p">)</span>
403
-
404
- <span class="n">checkbox</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Checkbox</span><span class="p">(</span>
405
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Checkbox&#39;</span><span class="p">,</span>
406
- <span class="n">value</span><span class="o">=</span><span class="kc">True</span>
407
- <span class="p">)</span>
408
-
409
-
410
- <span class="c1"># VBox container to pack all widgets vertically</span>
411
- <span class="c1">#</span>
412
- <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span>
413
- <span class="n">int_slider</span><span class="p">,</span>
414
- <span class="n">int_range_slider</span><span class="p">,</span>
415
- <span class="n">dropdown</span><span class="p">,</span>
416
- <span class="n">radiobuttons</span><span class="p">,</span>
417
- <span class="n">checkbox</span><span class="p">,</span>
418
- <span class="n">combobox</span><span class="p">,</span>
419
- <span class="p">])</span>
420
- </pre></div>
421
-
422
- </div>
423
- </div>
424
- </div>
425
-
426
- <div class="output_wrapper">
427
- <div class="output">
428
-
429
-
430
- <div class="output_area">
431
-
432
-
433
-
434
-
435
-
436
- <div class="output_subarea output_widget_view ">
437
- <button class="js-nbinteract-widget">
438
- Loading widgets...
439
- </button>
440
- </div>
441
-
442
- </div>
443
-
444
- </div>
445
- </div>
446
-
447
- </div>
448
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
449
- <div class="text_cell_render border-box-sizing rendered_html">
450
- <h3 id="Connected-sliders">Connected sliders<a class="anchor-link" href="#Connected-sliders">&#182;</a></h3>
451
- </div>
452
- </div>
453
- </div>
454
-
455
-
456
-
457
- <div class="
458
- cell border-box-sizing code_cell rendered">
459
- <div class="input">
460
-
461
- <div class="inner_cell">
462
- <div class="input_area">
463
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">sl1</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntSlider</span><span class="p">(</span>
464
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider 1&#39;</span><span class="p">,</span>
465
- <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
466
- <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
467
- <span class="n">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;99%&#39;</span><span class="p">)</span>
468
- <span class="p">)</span>
469
- <span class="n">sl2</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntSlider</span><span class="p">(</span>
470
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider 2&#39;</span><span class="p">,</span>
471
- <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
472
- <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
473
- <span class="n">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;99%&#39;</span><span class="p">)</span>
474
- <span class="p">)</span>
475
- <span class="n">link</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">link</span><span class="p">(</span>
476
- <span class="p">(</span><span class="n">sl1</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="p">),</span>
477
- <span class="p">(</span><span class="n">sl2</span><span class="p">,</span> <span class="s1">&#39;min&#39;</span><span class="p">)</span>
478
- <span class="p">)</span>
479
-
480
- <span class="n">sl1</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="mi">5</span>
481
- <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span>
482
- <span class="n">sl1</span><span class="p">,</span> <span class="n">sl2</span>
483
- <span class="p">])</span>
484
- </pre></div>
485
-
486
- </div>
487
- </div>
488
- </div>
489
-
490
- <div class="output_wrapper">
491
- <div class="output">
492
-
493
-
494
- <div class="output_area">
495
-
496
-
497
-
498
-
499
-
500
- <div class="output_subarea output_widget_view ">
501
- <button class="js-nbinteract-widget">
502
- Loading widgets...
503
- </button>
504
- </div>
505
-
506
- </div>
507
-
508
- </div>
509
- </div>
510
-
511
- </div>
512
-
1
+ <div class="cell text_cell">
2
+ <button class="js-nbinteract-widget">
3
+ Loading widgets...
4
+ </button>
5
+ </div>
6
+
7
+
8
+
9
+
10
+
11
+
12
+ <div class="
13
+ cell border-box-sizing code_cell rendered">
14
+ <div class="input">
15
+
16
+ <div class="inner_cell">
17
+ <div class="input_area">
18
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
19
+ <span class="kn">import</span> <span class="nn">matplotlib.gridspec</span> <span class="k">as</span> <span class="nn">gridspec</span>
20
+ <span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
21
+ <span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">interact</span><span class="p">,</span> <span class="n">Layout</span><span class="p">,</span> <span class="n">IntSlider</span><span class="p">,</span> <span class="n">FloatSlider</span>
22
+ <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
23
+ <span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">arange</span><span class="p">,</span><span class="n">sin</span><span class="p">,</span><span class="n">pi</span>
24
+ </pre></div>
25
+
26
+ </div>
27
+ </div>
28
+ </div>
29
+
30
+ </div>
31
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
32
+ <div class="text_cell_render border-box-sizing rendered_html">
33
+ <h3 id="IntSlider-for-interactive-calculation">IntSlider for interactive calculation<a class="anchor-link" href="#IntSlider-for-interactive-calculation">&#182;</a></h3>
34
+ </div>
35
+ </div>
36
+ </div>
37
+
38
+
39
+
40
+ <div class="
41
+ cell border-box-sizing code_cell rendered">
42
+ <div class="input">
43
+
44
+ <div class="inner_cell">
45
+ <div class="input_area">
46
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">printf</span><span class="p">(</span><span class="nb">str</span><span class="p">,</span> <span class="o">*</span><span class="n">args</span><span class="p">):</span>
47
+ <span class="nb">print</span><span class="p">(</span><span class="nb">str</span> <span class="o">%</span> <span class="n">args</span><span class="p">,</span> <span class="n">end</span><span class="o">=</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
48
+
49
+ <span class="c1"># Define the square function</span>
50
+ <span class="c1">#</span>
51
+ <span class="k">def</span> <span class="nf">square</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
52
+ <span class="n">result</span> <span class="o">=</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span>
53
+
54
+ <span class="c1"># print short notice above the result value</span>
55
+ <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;Result of square(</span><span class="si">{</span><span class="n">x</span><span class="si">}</span><span class="s1">) is:&#39;</span><span class="p">,</span> <span class="n">end</span><span class="o">=</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
56
+
57
+ <span class="k">return</span> <span class="n">result</span>
58
+
59
+ <span class="c1"># Simple interact widget from ipywidgets</span>
60
+ <span class="c1">#</span>
61
+ <span class="n">interact</span> <span class="o">=</span> <span class="n">interact</span><span class="p">(</span>
62
+ <span class="n">square</span><span class="p">,</span>
63
+ <span class="n">x</span><span class="o">=</span><span class="n">IntSlider</span><span class="p">(</span>
64
+ <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span>
65
+ <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
66
+ <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
67
+ <span class="n">step</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>
68
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider value:&#39;</span><span class="p">,</span>
69
+ <span class="n">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;99%&#39;</span><span class="p">)</span>
70
+ <span class="p">)</span>
71
+ <span class="p">);</span>
72
+
73
+ <span class="c1"># the semicolon &#39;;&#39; suppress the output</span>
74
+ <span class="c1"># of the code execution</span>
75
+ <span class="c1">#</span>
76
+ <span class="n">interact</span><span class="p">;</span>
77
+ </pre></div>
78
+
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="output_wrapper">
84
+ <div class="output">
85
+
86
+
87
+ <div class="output_area">
88
+
89
+
90
+
91
+
92
+
93
+ <div class="output_subarea output_widget_view ">
94
+ <button class="js-nbinteract-widget">
95
+ Loading widgets...
96
+ </button>
97
+ </div>
98
+
99
+ </div>
100
+
101
+ </div>
102
+ </div>
103
+
104
+ </div>
105
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
106
+ <div class="text_cell_render border-box-sizing rendered_html">
107
+ <h3 id="FloatSlider-for-interactive-plotting">FloatSlider for interactive plotting<a class="anchor-link" href="#FloatSlider-for-interactive-plotting">&#182;</a></h3>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+
113
+
114
+ <div class="
115
+ cell border-box-sizing code_cell rendered">
116
+ <div class="input">
117
+
118
+ <div class="inner_cell">
119
+ <div class="input_area">
120
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># Define the plot function </span>
121
+ <span class="c1">#</span>
122
+ <span class="k">def</span> <span class="nf">myplot</span><span class="p">(</span><span class="n">xv</span><span class="p">):</span>
123
+ <span class="c1"># calculate x as evenly spaced values within a interval 0 .. xv</span>
124
+ <span class="n">x</span> <span class="o">=</span> <span class="n">arange</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">xv</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">)</span>
125
+ <span class="c1"># the plot function</span>
126
+ <span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">pi</span><span class="o">*</span><span class="n">x</span><span class="p">)</span>
127
+
128
+ <span class="c1"># NOTE: Matplotlib doesn&#39;t work with pixels directly, but rather</span>
129
+ <span class="c1"># physical sizes (inch) and DPI. To use pixels for the figures</span>
130
+ <span class="c1"># figsize, the DPI of the monitor must be used for re-calculation</span>
131
+ <span class="c1">#</span>
132
+ <span class="c1"># See: https://www.infobyip.com/detectmonitordpi.php</span>
133
+
134
+ <span class="c1"># DPI of common monitors</span>
135
+ <span class="n">my_dpi</span><span class="o">=</span><span class="mi">96</span>
136
+
137
+ <span class="c1"># figsize: width|height recalculated from inch to pixels</span>
138
+ <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span><span class="n">figsize</span><span class="o">=</span><span class="p">(</span><span class="mi">800</span><span class="o">/</span><span class="n">my_dpi</span><span class="p">,</span> <span class="mi">400</span><span class="o">/</span><span class="n">my_dpi</span><span class="p">),</span> <span class="n">dpi</span><span class="o">=</span><span class="n">my_dpi</span><span class="p">)</span>
139
+
140
+ <span class="c1"># set the grid lines (light-gray)</span>
141
+ <span class="n">plt</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="n">axis</span><span class="o">=</span><span class="s1">&#39;x&#39;</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s1">&#39;#E0E0E0&#39;</span><span class="p">,</span> <span class="n">linestyle</span><span class="o">=</span><span class="s1">&#39;--&#39;</span><span class="p">,</span> <span class="n">linewidth</span><span class="o">=</span><span class="mi">2</span><span class="p">),</span>
142
+ <span class="n">plt</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="n">axis</span><span class="o">=</span><span class="s1">&#39;y&#39;</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s1">&#39;#E0E0E0&#39;</span><span class="p">,</span> <span class="n">linestyle</span><span class="o">=</span><span class="s1">&#39;-&#39;</span><span class="p">,</span> <span class="n">linewidth</span><span class="o">=</span><span class="mi">2</span><span class="p">),</span>
143
+
144
+ <span class="c1"># set the axis labels</span>
145
+ <span class="n">plt</span><span class="o">.</span><span class="n">xlabel</span><span class="p">(</span><span class="s1">&#39;x-values&#39;</span><span class="p">),</span>
146
+ <span class="n">plt</span><span class="o">.</span><span class="n">ylabel</span><span class="p">(</span><span class="s1">&#39;y-values&#39;</span><span class="p">),</span>
147
+
148
+ <span class="c1"># set the plot title</span>
149
+ <span class="n">plt</span><span class="o">.</span><span class="n">title</span><span class="p">(</span><span class="s1">&#39;Simple plot function based on sin(x)&#39;</span><span class="p">),</span>
150
+
151
+ <span class="c1"># define the plot</span>
152
+ <span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span>
153
+
154
+
155
+ <span class="c1"># Create an interactive widget for the plot using interact</span>
156
+ <span class="c1">#</span>
157
+ <span class="n">interact</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span>
158
+ <span class="n">myplot</span><span class="p">,</span>
159
+ <span class="n">xv</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">FloatSlider</span><span class="p">(</span>
160
+ <span class="n">value</span><span class="o">=</span><span class="n">pi</span><span class="p">,</span>
161
+ <span class="nb">min</span><span class="o">=</span><span class="p">(</span><span class="n">pi</span><span class="p">),</span>
162
+ <span class="nb">max</span><span class="o">=</span><span class="p">(</span><span class="mi">4</span><span class="o">*</span><span class="n">pi</span><span class="p">),</span>
163
+ <span class="n">step</span><span class="o">=</span><span class="mf">0.01</span><span class="p">,</span>
164
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Value (x):&#39;</span><span class="p">,</span>
165
+ <span class="n">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;99%&#39;</span><span class="p">)</span>
166
+ <span class="p">)</span>
167
+ <span class="p">)</span>
168
+
169
+ <span class="c1"># the semicolon &#39;;&#39; suppress the output</span>
170
+ <span class="c1"># of the code execution</span>
171
+ <span class="c1">#</span>
172
+ <span class="n">interact</span><span class="p">;</span>
173
+ </pre></div>
174
+
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="output_wrapper">
180
+ <div class="output">
181
+
182
+
183
+ <div class="output_area">
184
+
185
+
186
+
187
+
188
+
189
+ <div class="output_subarea output_widget_view ">
190
+ <button class="js-nbinteract-widget">
191
+ Loading widgets...
192
+ </button>
193
+ </div>
194
+
195
+ </div>
196
+
197
+ </div>
198
+ </div>
199
+
200
+ </div>
201
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
202
+ <div class="text_cell_render border-box-sizing rendered_html">
203
+ <h3 id="Select-box">Select box<a class="anchor-link" href="#Select-box">&#182;</a></h3>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+
209
+
210
+ <div class="
211
+ cell border-box-sizing code_cell rendered">
212
+ <div class="input">
213
+
214
+ <div class="inner_cell">
215
+ <div class="input_area">
216
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">say_my_name</span><span class="p">(</span><span class="n">name</span><span class="p">):</span>
217
+ <span class="sd">&quot;&quot;&quot;</span>
218
+ <span class="sd"> Print the current widget value in short sentence</span>
219
+ <span class="sd"> &quot;&quot;&quot;</span>
220
+ <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;My name is </span><span class="si">{</span><span class="n">name</span><span class="si">}</span><span class="s1">&#39;</span><span class="p">)</span>
221
+
222
+
223
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span>
224
+ <span class="n">say_my_name</span><span class="p">,</span>
225
+ <span class="n">name</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Jim&quot;</span><span class="p">,</span> <span class="s2">&quot;Emma&quot;</span><span class="p">,</span> <span class="s2">&quot;Bond&quot;</span><span class="p">]</span>
226
+ <span class="p">);</span>
227
+ </pre></div>
228
+
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="output_wrapper">
234
+ <div class="output">
235
+
236
+
237
+ <div class="output_area">
238
+
239
+
240
+
241
+
242
+
243
+ <div class="output_subarea output_widget_view ">
244
+ <button class="js-nbinteract-widget">
245
+ Loading widgets...
246
+ </button>
247
+ </div>
248
+
249
+ </div>
250
+
251
+ </div>
252
+ </div>
253
+
254
+ </div>
255
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
256
+ <div class="text_cell_render border-box-sizing rendered_html">
257
+ <h3 id="Combined-widgets">Combined widgets<a class="anchor-link" href="#Combined-widgets">&#182;</a></h3>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+
263
+
264
+ <div class="
265
+ cell border-box-sizing code_cell rendered">
266
+ <div class="input">
267
+
268
+ <div class="inner_cell">
269
+ <div class="input_area">
270
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">widget_says</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
271
+ <span class="sd">&quot;&quot;&quot;</span>
272
+ <span class="sd"> Print the current widget value in short sentence</span>
273
+ <span class="sd"> &quot;&quot;&quot;</span>
274
+ <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;Widget says: </span><span class="si">{</span><span class="n">x</span><span class="si">}</span><span class="s1">&#39;</span><span class="p">)</span>
275
+
276
+
277
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">])</span>
278
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>
279
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mf">.5</span><span class="p">))</span>
280
+
281
+ <span class="c1"># the variable underscore (&#39;_&#39;)) returns the output</span>
282
+ <span class="c1"># of the latest code execution</span>
283
+ <span class="c1">#</span>
284
+ <span class="n">_</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">widget_says</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
285
+ </pre></div>
286
+
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="output_wrapper">
292
+ <div class="output">
293
+
294
+
295
+ <div class="output_area">
296
+
297
+
298
+
299
+
300
+
301
+ <div class="output_subarea output_widget_view ">
302
+ <button class="js-nbinteract-widget">
303
+ Loading widgets...
304
+ </button>
305
+ </div>
306
+
307
+ </div>
308
+
309
+ <div class="output_area">
310
+
311
+
312
+
313
+
314
+
315
+ <div class="output_subarea output_widget_view ">
316
+ <button class="js-nbinteract-widget">
317
+ Loading widgets...
318
+ </button>
319
+ </div>
320
+
321
+ </div>
322
+
323
+ <div class="output_area">
324
+
325
+
326
+
327
+
328
+
329
+ <div class="output_subarea output_widget_view ">
330
+ <button class="js-nbinteract-widget">
331
+ Loading widgets...
332
+ </button>
333
+ </div>
334
+
335
+ </div>
336
+
337
+ <div class="output_area">
338
+
339
+
340
+
341
+
342
+
343
+ <div class="output_subarea output_widget_view ">
344
+ <button class="js-nbinteract-widget">
345
+ Loading widgets...
346
+ </button>
347
+ </div>
348
+
349
+ </div>
350
+
351
+ </div>
352
+ </div>
353
+
354
+ </div>
355
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
356
+ <div class="text_cell_render border-box-sizing rendered_html">
357
+ <h3 id="Complex-widget-configs">Complex widget configs<a class="anchor-link" href="#Complex-widget-configs">&#182;</a></h3>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+
363
+
364
+ <div class="
365
+ cell border-box-sizing code_cell rendered">
366
+ <div class="input">
367
+
368
+ <div class="inner_cell">
369
+ <div class="input_area">
370
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">int_slider</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntSlider</span><span class="p">(</span>
371
+ <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span>
372
+ <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span> <span class="n">step</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>
373
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider&#39;</span><span class="p">,</span>
374
+ <span class="n">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;99%&#39;</span><span class="p">)</span>
375
+ <span class="p">)</span>
376
+
377
+ <span class="n">int_range_slider</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntRangeSlider</span><span class="p">(</span>
378
+ <span class="n">value</span><span class="o">=</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">40</span><span class="p">),</span>
379
+ <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
380
+ <span class="nb">max</span><span class="o">=</span><span class="mi">100</span><span class="p">,</span>
381
+ <span class="n">step</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span>
382
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Range Slider&#39;</span><span class="p">,</span>
383
+ <span class="n">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;99%&#39;</span><span class="p">)</span>
384
+ <span class="p">)</span>
385
+
386
+ <span class="n">dropdown</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Dropdown</span><span class="p">(</span>
387
+ <span class="n">value</span><span class="o">=</span><span class="s1">&#39;Feb&#39;</span><span class="p">,</span>
388
+ <span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Jan&#39;</span><span class="p">,</span> <span class="s1">&#39;Feb&#39;</span><span class="p">,</span> <span class="s1">&#39;Mar&#39;</span><span class="p">,</span> <span class="s1">&#39;Apr&#39;</span><span class="p">],</span>
389
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Dropdown&#39;</span>
390
+ <span class="p">)</span>
391
+
392
+ <span class="n">radiobuttons</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">RadioButtons</span><span class="p">(</span>
393
+ <span class="n">value</span><span class="o">=</span><span class="s1">&#39;Feb&#39;</span><span class="p">,</span>
394
+ <span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Jan&#39;</span><span class="p">,</span> <span class="s1">&#39;Feb&#39;</span><span class="p">,</span> <span class="s1">&#39;Mar&#39;</span><span class="p">,</span> <span class="s1">&#39;Apr&#39;</span><span class="p">],</span>
395
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Radio Buttons&#39;</span>
396
+ <span class="p">)</span>
397
+
398
+ <span class="n">combobox</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Combobox</span><span class="p">(</span>
399
+ <span class="n">placeholder</span><span class="o">=</span><span class="s1">&#39;start typing... (e.g. L or o)&#39;</span><span class="p">,</span>
400
+ <span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Amsterdam&#39;</span><span class="p">,</span> <span class="s1">&#39;Athens&#39;</span><span class="p">,</span> <span class="s1">&#39;Lisbon&#39;</span><span class="p">,</span> <span class="s1">&#39;London&#39;</span><span class="p">,</span> <span class="s1">&#39;Ljubljana&#39;</span><span class="p">],</span>
401
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Combo Box&#39;</span>
402
+ <span class="p">)</span>
403
+
404
+ <span class="n">checkbox</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Checkbox</span><span class="p">(</span>
405
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Checkbox&#39;</span><span class="p">,</span>
406
+ <span class="n">value</span><span class="o">=</span><span class="kc">True</span>
407
+ <span class="p">)</span>
408
+
409
+
410
+ <span class="c1"># VBox container to pack all widgets vertically</span>
411
+ <span class="c1">#</span>
412
+ <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span>
413
+ <span class="n">int_slider</span><span class="p">,</span>
414
+ <span class="n">int_range_slider</span><span class="p">,</span>
415
+ <span class="n">dropdown</span><span class="p">,</span>
416
+ <span class="n">radiobuttons</span><span class="p">,</span>
417
+ <span class="n">checkbox</span><span class="p">,</span>
418
+ <span class="n">combobox</span><span class="p">,</span>
419
+ <span class="p">])</span>
420
+ </pre></div>
421
+
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="output_wrapper">
427
+ <div class="output">
428
+
429
+
430
+ <div class="output_area">
431
+
432
+
433
+
434
+
435
+
436
+ <div class="output_subarea output_widget_view ">
437
+ <button class="js-nbinteract-widget">
438
+ Loading widgets...
439
+ </button>
440
+ </div>
441
+
442
+ </div>
443
+
444
+ </div>
445
+ </div>
446
+
447
+ </div>
448
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
449
+ <div class="text_cell_render border-box-sizing rendered_html">
450
+ <h3 id="Connected-sliders">Connected sliders<a class="anchor-link" href="#Connected-sliders">&#182;</a></h3>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+
456
+
457
+ <div class="
458
+ cell border-box-sizing code_cell rendered">
459
+ <div class="input">
460
+
461
+ <div class="inner_cell">
462
+ <div class="input_area">
463
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">sl1</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntSlider</span><span class="p">(</span>
464
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider 1&#39;</span><span class="p">,</span>
465
+ <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
466
+ <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
467
+ <span class="n">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;99%&#39;</span><span class="p">)</span>
468
+ <span class="p">)</span>
469
+ <span class="n">sl2</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">IntSlider</span><span class="p">(</span>
470
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;Slider 2&#39;</span><span class="p">,</span>
471
+ <span class="nb">min</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
472
+ <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
473
+ <span class="n">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;99%&#39;</span><span class="p">)</span>
474
+ <span class="p">)</span>
475
+ <span class="n">link</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">link</span><span class="p">(</span>
476
+ <span class="p">(</span><span class="n">sl1</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="p">),</span>
477
+ <span class="p">(</span><span class="n">sl2</span><span class="p">,</span> <span class="s1">&#39;min&#39;</span><span class="p">)</span>
478
+ <span class="p">)</span>
479
+
480
+ <span class="n">sl1</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="mi">5</span>
481
+ <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span>
482
+ <span class="n">sl1</span><span class="p">,</span> <span class="n">sl2</span>
483
+ <span class="p">])</span>
484
+ </pre></div>
485
+
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <div class="output_wrapper">
491
+ <div class="output">
492
+
493
+
494
+ <div class="output_area">
495
+
496
+
497
+
498
+
499
+
500
+ <div class="output_subarea output_widget_view ">
501
+ <button class="js-nbinteract-widget">
502
+ Loading widgets...
503
+ </button>
504
+ </div>
505
+
506
+ </div>
507
+
508
+ </div>
509
+ </div>
510
+
511
+ </div>
512
+