j1-template 2022.4.4 → 2022.4.5

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/lib/j1/version.rb +1 -1
  3. data/lib/starter_web/Gemfile +1 -1
  4. data/lib/starter_web/_config.yml +2 -2
  5. data/lib/starter_web/_data/layouts/home.yml +2 -2
  6. data/lib/starter_web/_includes/attributes.asciidoc +9 -2
  7. data/lib/starter_web/_plugins/lunr_index.rb +1 -1
  8. data/lib/starter_web/assets/images/pages/nbinteract/manual/nbi_line.jpg +0 -0
  9. data/lib/starter_web/package.json +1 -1
  10. data/lib/starter_web/pages/public/jupyter/examples/distributed/j1-common-used-widgets.adoc +1 -1
  11. data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_nbi_widgets_bar_chart.ipynb +1 -1
  12. data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_nbi_widgets_line_chart.ipynb +6 -6
  13. data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_nbi_widgets_scatter_chart.ipynb +4 -4
  14. data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_nbi_widgets_scatter_drag_chart.ipynb +1 -1
  15. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +512 -512
  16. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets.html +629 -629
  17. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_bar_chart.html +1 -1
  18. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_hist_chart.html +93 -93
  19. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_line_chart.html +4 -4
  20. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_question_multiple_choice.html +70 -70
  21. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_question_short_answer.html +156 -156
  22. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_scatter_chart.html +1 -1
  23. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_scatter_drag_chart.html +1 -1
  24. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_odes_in_python.html +955 -955
  25. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  26. data/lib/starter_web/utilsrv/package.json +1 -1
  27. metadata +2 -2
data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html CHANGED
@@ -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
+