j1-template 2022.3.3 → 2022.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/assets/themes/j1/adapter/js/j1.js +150 -75
  3. data/assets/themes/j1/adapter/js/nbinteract.js +1 -0
  4. data/assets/themes/j1/adapter/js/rangeSlider.js +27 -10
  5. data/assets/themes/j1/modules/nbInteract/js/nbinteract/nbinteract-core.js +1 -1
  6. data/assets/themes/j1/modules/nbInteract/js/nbinteract/nbinteract-core.js.map +1 -1
  7. data/assets/themes/j1/modules/nbInteract/js/nbinteract/nbinteract-core.min.js +1 -1
  8. data/assets/themes/j1/modules/rangeSlider/css/theme/uno/nouislider.css +5 -0
  9. data/assets/themes/j1/modules/rangeSlider/css/theme/uno/nouislider.min.css +1 -1
  10. data/lib/j1/version.rb +1 -1
  11. data/lib/starter_web/Gemfile +1 -1
  12. data/lib/starter_web/_config.yml +1 -1
  13. data/lib/starter_web/_data/j1_config.yml +22 -7
  14. data/lib/starter_web/_data/modules/rangeSlider.yml +38 -1
  15. data/lib/starter_web/_plugins/asciidoctor-extensions/range-slider-block.rb +44 -0
  16. data/lib/starter_web/_plugins/lunr_index.rb +1 -1
  17. data/lib/starter_web/package.json +1 -1
  18. data/lib/starter_web/pages/public/jupyter/notebooks/j1/j1_odes_in_python.ipynb +16 -16
  19. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html +919 -919
  20. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_odes_in_python.html +10 -10
  21. data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_graphing.html +473 -473
  22. data/lib/starter_web/pages/public/previewer/preview_bootstrap_theme.adoc +2 -2
  23. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  24. data/lib/starter_web/utilsrv/package.json +1 -1
  25. metadata +3 -7
  26. data/assets/themes/j1/modules/nbInteract/js/nbinteract/_new/nbinteract-core.js +0 -94
  27. data/assets/themes/j1/modules/nbInteract/js/nbinteract/_new/nbinteract-core.js.map +0 -1
  28. data/assets/themes/j1/modules/nbInteract/js/nbinteract/_old/j1-nbinteract-core.js +0 -94
  29. data/assets/themes/j1/modules/nbInteract/js/nbinteract/_old/j1-nbinteract-core.js.map +0 -1
  30. data/lib/starter_web/pages/public/se/se-fake.adoc +0 -47
data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_interactive_widgets.html CHANGED
@@ -1,919 +1,919 @@
1
- <div class="cell text_cell">
2
- <button class="js-nbinteract-widget">
3
- Loading widgets...
4
- </button>
5
- </div>
6
-
7
-
8
-
9
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
10
- <div class="text_cell_render border-box-sizing rendered_html">
11
- <h2 id="Widgets-from-ipywidgets">Widgets from ipywidgets<a class="anchor-link" href="#Widgets-from-ipywidgets">&#182;</a></h2><p>The library <em>ipywidgets</em>, also known as <em>jupyter-widgets</em>, are interactive
12
- HTML widgets for Jupyter notebooks and the IPython kernel. Notebooks come
13
- alive when interactive widgets are used. Users gain control of their data
14
- and can visualize changes in the data.</p>
15
-
16
- </div>
17
- </div>
18
- </div>
19
-
20
-
21
-
22
- <div class="
23
- cell border-box-sizing code_cell rendered">
24
- <div class="input">
25
-
26
- <div class="inner_cell">
27
- <div class="input_area">
28
- <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>
29
- <span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
30
- <span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">interact</span>
31
- <span class="kn">import</span> <span class="nn">nbinteract</span> <span class="k">as</span> <span class="nn">nbi</span>
32
- <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
33
- <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>
34
- </pre></div>
35
-
36
- </div>
37
- </div>
38
- </div>
39
-
40
- </div>
41
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
42
- <div class="text_cell_render border-box-sizing rendered_html">
43
- <h3 id="Base-slider">Base slider<a class="anchor-link" href="#Base-slider">&#182;</a></h3>
44
- </div>
45
- </div>
46
- </div>
47
-
48
-
49
-
50
- <div class="
51
- cell border-box-sizing code_cell rendered">
52
- <div class="input">
53
-
54
- <div class="inner_cell">
55
- <div class="input_area">
56
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># Testing Interact from ipywidgets</span>
57
- <span class="k">def</span> <span class="nf">square</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
58
- <span class="k">return</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span>
59
-
60
- <span class="n">interact</span><span class="p">(</span><span class="n">square</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="mi">10</span><span class="p">);</span>
61
- </pre></div>
62
-
63
- </div>
64
- </div>
65
- </div>
66
-
67
- <div class="output_wrapper">
68
- <div class="output">
69
-
70
-
71
- <div class="output_area">
72
-
73
-
74
-
75
-
76
-
77
- <div class="output_subarea output_widget_view ">
78
- <button class="js-nbinteract-widget">
79
- Loading widgets...
80
- </button>
81
- </div>
82
-
83
- </div>
84
-
85
- </div>
86
- </div>
87
-
88
- </div>
89
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
90
- <div class="text_cell_render border-box-sizing rendered_html">
91
- <h3 id="Slider-for-widget-control">Slider for widget control<a class="anchor-link" href="#Slider-for-widget-control">&#182;</a></h3>
92
- </div>
93
- </div>
94
- </div>
95
-
96
-
97
-
98
- <div class="
99
- cell border-box-sizing code_cell rendered">
100
- <div class="input">
101
-
102
- <div class="inner_cell">
103
- <div class="input_area">
104
- <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># Definiere myplot-Funktion </span>
105
- <span class="k">def</span> <span class="nf">myplot</span><span class="p">(</span><span class="n">xmax</span><span class="p">):</span>
106
- <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">xmax</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">);</span><span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="mi">2</span><span class="o">*</span><span class="n">pi</span><span class="o">*</span><span class="n">x</span><span class="p">);</span>
107
- <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>
108
-
109
- <span class="c1"># Erstelle ein Widget für den Plot mit Hilfe von interact </span>
110
- <span class="n">interact</span><span class="p">(</span><span class="n">myplot</span><span class="p">,</span> <span class="n">xmax</span> <span class="o">=</span> <span class="p">(</span><span class="n">pi</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span><span class="mi">4</span><span class="o">*</span><span class="n">pi</span><span class="p">));</span>
111
- </pre></div>
112
-
113
- </div>
114
- </div>
115
- </div>
116
-
117
- <div class="output_wrapper">
118
- <div class="output">
119
-
120
-
121
- <div class="output_area">
122
-
123
-
124
-
125
-
126
-
127
- <div class="output_subarea output_widget_view ">
128
- <button class="js-nbinteract-widget">
129
- Loading widgets...
130
- </button>
131
- </div>
132
-
133
- </div>
134
-
135
- </div>
136
- </div>
137
-
138
- </div>
139
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
140
- <div class="text_cell_render border-box-sizing rendered_html">
141
- <h3 id="Select-box">Select box<a class="anchor-link" href="#Select-box">&#182;</a></h3>
142
- </div>
143
- </div>
144
- </div>
145
-
146
-
147
-
148
- <div class="
149
- cell border-box-sizing code_cell rendered">
150
- <div class="input">
151
-
152
- <div class="inner_cell">
153
- <div class="input_area">
154
- <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>
155
- <span class="sd">&quot;&quot;&quot;</span>
156
- <span class="sd"> Print the current widget value in short sentence</span>
157
- <span class="sd"> &quot;&quot;&quot;</span>
158
- <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>
159
-
160
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_my_name</span><span class="p">,</span> <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>
161
- </pre></div>
162
-
163
- </div>
164
- </div>
165
- </div>
166
-
167
- <div class="output_wrapper">
168
- <div class="output">
169
-
170
-
171
- <div class="output_area">
172
-
173
-
174
-
175
-
176
-
177
- <div class="output_subarea output_widget_view ">
178
- <button class="js-nbinteract-widget">
179
- Loading widgets...
180
- </button>
181
- </div>
182
-
183
- </div>
184
-
185
- </div>
186
- </div>
187
-
188
- </div>
189
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
190
- <div class="text_cell_render border-box-sizing rendered_html">
191
- <h3 id="Combined-widgets">Combined widgets<a class="anchor-link" href="#Combined-widgets">&#182;</a></h3>
192
- </div>
193
- </div>
194
- </div>
195
-
196
-
197
-
198
- <div class="
199
- cell border-box-sizing code_cell rendered">
200
- <div class="input">
201
-
202
- <div class="inner_cell">
203
- <div class="input_area">
204
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">say_something</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
205
- <span class="sd">&quot;&quot;&quot;</span>
206
- <span class="sd"> Print the current widget value in short sentence</span>
207
- <span class="sd"> &quot;&quot;&quot;</span>
208
- <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>
209
-
210
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_something</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>
211
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_something</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>
212
- <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_something</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>
213
- <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">say_something</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
214
- </pre></div>
215
-
216
- </div>
217
- </div>
218
- </div>
219
-
220
- <div class="output_wrapper">
221
- <div class="output">
222
-
223
-
224
- <div class="output_area">
225
-
226
-
227
-
228
-
229
-
230
- <div class="output_subarea output_widget_view ">
231
- <button class="js-nbinteract-widget">
232
- Loading widgets...
233
- </button>
234
- </div>
235
-
236
- </div>
237
-
238
- <div class="output_area">
239
-
240
-
241
-
242
-
243
-
244
- <div class="output_subarea output_widget_view ">
245
- <button class="js-nbinteract-widget">
246
- Loading widgets...
247
- </button>
248
- </div>
249
-
250
- </div>
251
-
252
- <div class="output_area">
253
-
254
-
255
-
256
-
257
-
258
- <div class="output_subarea output_widget_view ">
259
- <button class="js-nbinteract-widget">
260
- Loading widgets...
261
- </button>
262
- </div>
263
-
264
- </div>
265
-
266
- <div class="output_area">
267
-
268
-
269
-
270
-
271
-
272
- <div class="output_subarea output_widget_view ">
273
- <button class="js-nbinteract-widget">
274
- Loading widgets...
275
- </button>
276
- </div>
277
-
278
- </div>
279
-
280
- </div>
281
- </div>
282
-
283
- </div>
284
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
285
- <div class="text_cell_render border-box-sizing rendered_html">
286
- <h3 id="Complex-widget-configs">Complex widget configs<a class="anchor-link" href="#Complex-widget-configs">&#182;</a></h3>
287
- </div>
288
- </div>
289
- </div>
290
-
291
-
292
-
293
- <div class="
294
- cell border-box-sizing code_cell rendered">
295
- <div class="input">
296
-
297
- <div class="inner_cell">
298
- <div class="input_area">
299
- <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>
300
- <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span>
301
- <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>
302
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;slider&#39;</span>
303
- <span class="p">)</span>
304
-
305
- <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>
306
- <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>
307
- <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">100</span><span class="p">,</span> <span class="n">step</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span>
308
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;range slider&#39;</span>
309
- <span class="p">)</span>
310
-
311
- <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>
312
- <span class="n">value</span><span class="o">=</span><span class="s1">&#39;feb&#39;</span><span class="p">,</span>
313
- <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>
314
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;dropdown&#39;</span>
315
- <span class="p">)</span>
316
-
317
- <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>
318
- <span class="n">value</span><span class="o">=</span><span class="s1">&#39;feb&#39;</span><span class="p">,</span>
319
- <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>
320
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;radio buttons&#39;</span>
321
- <span class="p">)</span>
322
-
323
- <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>
324
- <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>
325
- <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>
326
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;combo box&#39;</span>
327
- <span class="p">)</span>
328
-
329
- <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>
330
- <span class="n">description</span><span class="o">=</span><span class="s1">&#39;checkbox&#39;</span><span class="p">,</span>
331
- <span class="n">value</span><span class="o">=</span><span class="kc">True</span>
332
- <span class="p">)</span>
333
-
334
-
335
- <span class="c1"># a VBox container to pack widgets vertically</span>
336
- <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">(</span>
337
- <span class="p">[</span>
338
- <span class="n">int_slider</span><span class="p">,</span>
339
- <span class="n">int_range_slider</span><span class="p">,</span>
340
- <span class="n">dropdown</span><span class="p">,</span>
341
- <span class="n">radiobuttons</span><span class="p">,</span>
342
- <span class="n">checkbox</span><span class="p">,</span>
343
- <span class="n">combobox</span><span class="p">,</span>
344
- <span class="p">]</span>
345
- <span class="p">)</span>
346
- </pre></div>
347
-
348
- </div>
349
- </div>
350
- </div>
351
-
352
- <div class="output_wrapper">
353
- <div class="output">
354
-
355
-
356
- <div class="output_area">
357
-
358
-
359
-
360
-
361
-
362
- <div class="output_subarea output_widget_view ">
363
- <button class="js-nbinteract-widget">
364
- Loading widgets...
365
- </button>
366
- </div>
367
-
368
- </div>
369
-
370
- </div>
371
- </div>
372
-
373
- </div>
374
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
375
- <div class="text_cell_render border-box-sizing rendered_html">
376
- <h3 id="Connected-sliders">Connected sliders<a class="anchor-link" href="#Connected-sliders">&#182;</a></h3>
377
- </div>
378
- </div>
379
- </div>
380
-
381
-
382
-
383
- <div class="
384
- cell border-box-sizing code_cell rendered">
385
- <div class="input">
386
-
387
- <div class="inner_cell">
388
- <div class="input_area">
389
- <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><span class="n">description</span><span class="o">=</span><span class="s1">&#39;slider 1&#39;</span><span class="p">,</span> <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>
390
- <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><span class="n">description</span><span class="o">=</span><span class="s1">&#39;slider 2&#39;</span><span class="p">,</span> <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>
391
-
392
- <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>
393
- <span class="p">(</span><span class="n">sl1</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="p">),</span>
394
- <span class="p">(</span><span class="n">sl2</span><span class="p">,</span> <span class="s1">&#39;min&#39;</span><span class="p">)</span>
395
- <span class="p">)</span>
396
-
397
- <span class="n">sl1</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="mi">5</span>
398
- <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span><span class="n">sl1</span><span class="p">,</span> <span class="n">sl2</span><span class="p">])</span>
399
- </pre></div>
400
-
401
- </div>
402
- </div>
403
- </div>
404
-
405
- <div class="output_wrapper">
406
- <div class="output">
407
-
408
-
409
- <div class="output_area">
410
-
411
-
412
-
413
-
414
-
415
- <div class="output_subarea output_widget_view ">
416
- <button class="js-nbinteract-widget">
417
- Loading widgets...
418
- </button>
419
- </div>
420
-
421
- </div>
422
-
423
- </div>
424
- </div>
425
-
426
- </div>
427
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
428
- <div class="text_cell_render border-box-sizing rendered_html">
429
- <h2 id="Widgets-from-nbinteract">Widgets from nbinteract<a class="anchor-link" href="#Widgets-from-nbinteract">&#182;</a></h2><p>The library <em>nbinteract</em> comes with a set of functions that produce Javascript-based plots designed for interaction. The package combines the <em>ipywidgets</em> library and the <em>bqplot</em>
430
- plotting library to implement function-driven interfaces to interactive plotting.</p>
431
- <p>The nbinteract plotting methods use <strong>ipywidgets</strong> to generate and display widgets, inferring the widget type as needed. When a user interacts with a widget, a Python callback updates the visualization <strong>without</strong> a complete rerender. This noticeably lowers visualization update time compared to using ipywidgets alone to render static images.</p>
432
-
433
- </div>
434
- </div>
435
- </div>
436
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
437
- <div class="text_cell_render border-box-sizing rendered_html">
438
- <h3 id="nbinteract.hist"><code>nbinteract.hist</code><a class="anchor-link" href="#nbinteract.hist">&#182;</a></h3><p>The widget hist generates a histogram that allows interaction with the parameters for the response function. The widget takes in a single response function. The response function returns the array of numerical values that will be shown in the histogram. The hist function allows interaction with the response function's parameters by specifying them as keyword arguments in the same format as ipywidgets.interact. Any argument that can be used for ipywidgets.interact can be used for hist.</p>
439
-
440
- </div>
441
- </div>
442
- </div>
443
-
444
-
445
-
446
- <div class="
447
- cell border-box-sizing code_cell rendered">
448
- <div class="input">
449
-
450
- <div class="inner_cell">
451
- <div class="input_area">
452
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">hist_response_function</span><span class="p">(</span><span class="n">mean</span><span class="p">,</span> <span class="n">sd</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">1000</span><span class="p">):</span>
453
- <span class="sd">&#39;&#39;&#39;</span>
454
- <span class="sd"> Returns 1000 values picked at random from the normal</span>
455
- <span class="sd"> distribution with the mean and SD given.</span>
456
- <span class="sd"> &#39;&#39;&#39;</span>
457
- <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">normal</span><span class="p">(</span><span class="n">loc</span><span class="o">=</span><span class="n">mean</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">sd</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">1000</span><span class="p">)</span>
458
-
459
- <span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span><span class="n">hist_response_function</span><span class="p">,</span> <span class="n">mean</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="n">sd</span><span class="o">=</span><span class="p">(</span><span class="mf">0.2</span><span class="p">,</span> <span class="mf">2.0</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">))</span>
460
- </pre></div>
461
-
462
- </div>
463
- </div>
464
- </div>
465
-
466
- <div class="output_wrapper">
467
- <div class="output">
468
-
469
-
470
- <div class="output_area">
471
-
472
-
473
-
474
-
475
-
476
- <div class="output_subarea output_widget_view ">
477
- <button class="js-nbinteract-widget">
478
- Loading widgets...
479
- </button>
480
- </div>
481
-
482
- </div>
483
-
484
- </div>
485
- </div>
486
-
487
- </div>
488
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
489
- <div class="text_cell_render border-box-sizing rendered_html">
490
- <h3 id="nbinteract.bar"><code>nbinteract.bar</code><a class="anchor-link" href="#nbinteract.bar">&#182;</a></h3><p>The widgetr bar generates an bar plot that allows interaction with the parameters for the response functions.</p>
491
- <p>The first two arguments of bar are response functions that return the x and y-axis data arrays, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to bar in the format expected by interact. The response function for the y-axis data will be called with the x-axis data as its first argument.</p>
492
- <p>For example, in the bar plot below categories generates the categories to plot on the x-axis and heights generates the y-axis heights. The heights function uses the parameter xs which is the array of x-axis data points.</p>
493
-
494
- </div>
495
- </div>
496
- </div>
497
-
498
-
499
-
500
- <div class="
501
- cell border-box-sizing code_cell rendered">
502
- <div class="input">
503
-
504
- <div class="inner_cell">
505
- <div class="input_area">
506
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">categories</span><span class="p">(</span><span class="n">n</span><span class="p">):</span>
507
- <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="n">n</span><span class="p">)</span>
508
-
509
- <span class="k">def</span> <span class="nf">heights</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">offset</span><span class="p">):</span>
510
- <span class="k">return</span> <span class="n">xs</span> <span class="o">+</span> <span class="n">offset</span>
511
-
512
- <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
513
- <span class="s1">&#39;ylim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">20</span><span class="p">),</span>
514
- <span class="p">}</span>
515
-
516
- <span class="n">nbi</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span><span class="n">categories</span><span class="p">,</span> <span class="n">heights</span><span class="p">,</span> <span class="n">n</span><span class="o">=</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">offset</span><span class="o">=</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">options</span><span class="o">=</span><span class="n">opts</span><span class="p">)</span>
517
- </pre></div>
518
-
519
- </div>
520
- </div>
521
- </div>
522
-
523
- <div class="output_wrapper">
524
- <div class="output">
525
-
526
-
527
- <div class="output_area">
528
-
529
-
530
-
531
-
532
-
533
- <div class="output_subarea output_widget_view ">
534
- <button class="js-nbinteract-widget">
535
- Loading widgets...
536
- </button>
537
- </div>
538
-
539
- </div>
540
-
541
- </div>
542
- </div>
543
-
544
- </div>
545
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
546
- <div class="text_cell_render border-box-sizing rendered_html">
547
- <h3 id="nbinteract.scatter_drag">nbinteract.scatter_drag<a class="anchor-link" href="#nbinteract.scatter_drag">&#182;</a></h3><p>The widget scatter_drag generates a scatter plot that allows interaction through clicking and dragging the points on the graph.</p>
548
- <p>scatter_drag takes in two lists/arrays consisting of the x-coordinates and y-coordinates of the points to plot. It generates an interactive scatter plot where the points can be dragged by the user and a best fit line is updated automatically according to the placement of the points.</p>
549
- <p>scatter_drag does not allow response functions as inputs.</p>
550
-
551
- </div>
552
- </div>
553
- </div>
554
-
555
-
556
-
557
- <div class="
558
- cell border-box-sizing code_cell rendered">
559
- <div class="input">
560
-
561
- <div class="inner_cell">
562
- <div class="input_area">
563
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">x_coords</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
564
- <span class="n">y_coords</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span> <span class="o">+</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
565
-
566
- <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;xlim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">9</span><span class="p">),</span> <span class="s1">&#39;ylim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">11</span><span class="p">),</span> <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">250</span><span class="p">}</span>
567
-
568
- <span class="n">nbi</span><span class="o">.</span><span class="n">scatter_drag</span><span class="p">(</span><span class="n">x_coords</span><span class="p">,</span> <span class="n">y_coords</span><span class="p">,</span> <span class="n">options</span><span class="o">=</span><span class="n">opts</span><span class="p">)</span>
569
- </pre></div>
570
-
571
- </div>
572
- </div>
573
- </div>
574
-
575
- <div class="output_wrapper">
576
- <div class="output">
577
-
578
-
579
- <div class="output_area">
580
-
581
-
582
-
583
-
584
-
585
- <div class="output_subarea output_widget_view ">
586
- <button class="js-nbinteract-widget">
587
- Loading widgets...
588
- </button>
589
- </div>
590
-
591
- </div>
592
-
593
- </div>
594
- </div>
595
-
596
- </div>
597
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
598
- <div class="text_cell_render border-box-sizing rendered_html">
599
- <h3 id="nbinteract.scatter"><code>nbinteract.scatter</code><a class="anchor-link" href="#nbinteract.scatter">&#182;</a></h3><p>The scatter widgetr generates a scatter plot that allows interaction with the parameters to the response functions. This is different from scatter_drag which facilitates interaction using click and drag actions.</p>
600
- <p>The first two arguments of scatter are response functions that return the x and y-axis coordinates, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to scatter in the format expected by interact. The response function for the y-coordinates will be called with the x-coordinates as its first argument.</p>
601
-
602
- </div>
603
- </div>
604
- </div>
605
-
606
-
607
-
608
- <div class="
609
- cell border-box-sizing code_cell rendered">
610
- <div class="input">
611
-
612
- <div class="inner_cell">
613
- <div class="input_area">
614
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">x_values</span><span class="p">(</span><span class="n">n</span><span class="p">):</span> <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
615
- <span class="k">def</span> <span class="nf">y_values</span><span class="p">(</span><span class="n">xs</span><span class="p">):</span> <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">xs</span><span class="p">))</span>
616
-
617
- <span class="n">nbi</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="n">x_values</span><span class="p">,</span> <span class="n">y_values</span><span class="p">,</span> <span class="n">n</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">200</span><span class="p">))</span>
618
- </pre></div>
619
-
620
- </div>
621
- </div>
622
- </div>
623
-
624
- <div class="output_wrapper">
625
- <div class="output">
626
-
627
-
628
- <div class="output_area">
629
-
630
-
631
-
632
-
633
-
634
- <div class="output_subarea output_widget_view ">
635
- <button class="js-nbinteract-widget">
636
- Loading widgets...
637
- </button>
638
- </div>
639
-
640
- </div>
641
-
642
- </div>
643
- </div>
644
-
645
- </div>
646
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
647
- <div class="text_cell_render border-box-sizing rendered_html">
648
- <h3 id="nbinteract.line"><code>nbinteract.line</code><a class="anchor-link" href="#nbinteract.line">&#182;</a></h3><p>The line widget generates a line plot that allows interaction with the parameters to the response functions.</p>
649
- <p>The first two arguments of line are response functions that return the x and y-axis coordinates, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to line in the format expected by interact. The response function for the y-coordinates will be called with the x-coordinates as its first argument.</p>
650
-
651
- </div>
652
- </div>
653
- </div>
654
-
655
-
656
-
657
- <div class="
658
- cell border-box-sizing code_cell rendered">
659
- <div class="input">
660
-
661
- <div class="inner_cell">
662
- <div class="input_area">
663
- <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">x_values</span><span class="p">(</span><span class="nb">max</span><span class="p">):</span> <span class="k">return</span> <span class="n">np</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="nb">max</span><span class="p">)</span>
664
- <span class="k">def</span> <span class="nf">y_values</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">sd</span><span class="p">):</span>
665
- <span class="k">return</span> <span class="n">xs</span> <span class="o">+</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">normal</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">sd</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="nb">len</span><span class="p">(</span><span class="n">xs</span><span class="p">))</span>
666
-
667
- <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
668
- <span class="s1">&#39;xlim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">50</span><span class="p">),</span>
669
- <span class="s1">&#39;ylim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">55</span><span class="p">),</span>
670
- <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">250</span><span class="p">,</span>
671
- <span class="p">}</span>
672
-
673
- <span class="n">nbi</span><span class="o">.</span><span class="n">line</span><span class="p">(</span><span class="n">x_values</span><span class="p">,</span> <span class="n">y_values</span><span class="p">,</span> <span class="nb">max</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">50</span><span class="p">),</span> <span class="n">sd</span><span class="o">=</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">options</span><span class="o">=</span><span class="n">opts</span><span class="p">)</span>
674
- </pre></div>
675
-
676
- </div>
677
- </div>
678
- </div>
679
-
680
- <div class="output_wrapper">
681
- <div class="output">
682
-
683
-
684
- <div class="output_area">
685
-
686
-
687
-
688
-
689
-
690
- <div class="output_subarea output_widget_view ">
691
- <button class="js-nbinteract-widget">
692
- Loading widgets...
693
- </button>
694
- </div>
695
-
696
- </div>
697
-
698
- </div>
699
- </div>
700
-
701
- </div>
702
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
703
- <div class="text_cell_render border-box-sizing rendered_html">
704
- <h2 id="Interactive-Questions-from-nbinteract">Interactive Questions from nbinteract<a class="anchor-link" href="#Interactive-Questions-from-nbinteract">&#182;</a></h2><p>nbinteract also provides built-in methods to easily create multiple choice and short answer questions.</p>
705
-
706
- </div>
707
- </div>
708
- </div>
709
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
710
- <div class="text_cell_render border-box-sizing rendered_html">
711
- <h3 id="nbinteract.multiple_choice">nbinteract.multiple_choice<a class="anchor-link" href="#nbinteract.multiple_choice">&#182;</a></h3><p><code>nbinteract.multiple_choice</code> takes a question, a list of possible answer choices, and the correct answer. Clicking the buttons shows whether the choice was correct.</p>
712
-
713
- </div>
714
- </div>
715
- </div>
716
-
717
-
718
-
719
- <div class="
720
- cell border-box-sizing code_cell rendered">
721
- <div class="input">
722
-
723
- <div class="inner_cell">
724
- <div class="input_area">
725
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">multiple_choice</span><span class="p">(</span><span class="n">question</span><span class="o">=</span><span class="s2">&quot;What is 10 + 2 * 5?&quot;</span><span class="p">,</span>
726
- <span class="n">choices</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;12&#39;</span><span class="p">,</span> <span class="s1">&#39;60&#39;</span><span class="p">,</span> <span class="s1">&#39;20&#39;</span><span class="p">],</span>
727
- <span class="n">answers</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
728
- </pre></div>
729
-
730
- </div>
731
- </div>
732
- </div>
733
-
734
- <div class="output_wrapper">
735
- <div class="output">
736
-
737
-
738
- <div class="output_area">
739
-
740
-
741
-
742
-
743
-
744
- <div class="output_subarea output_widget_view ">
745
- <button class="js-nbinteract-widget">
746
- Loading widgets...
747
- </button>
748
- </div>
749
-
750
- </div>
751
-
752
- </div>
753
- </div>
754
-
755
- </div>
756
-
757
-
758
-
759
- <div class="
760
- cell border-box-sizing code_cell rendered">
761
- <div class="input">
762
-
763
- <div class="inner_cell">
764
- <div class="input_area">
765
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">multiple_choice</span><span class="p">(</span><span class="n">question</span><span class="o">=</span><span class="s2">&quot;Select all prime numbers.&quot;</span><span class="p">,</span>
766
- <span class="n">choices</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;12&#39;</span><span class="p">,</span> <span class="s1">&#39;3&#39;</span><span class="p">,</span> <span class="s1">&#39;31&#39;</span><span class="p">],</span>
767
- <span class="n">answers</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">])</span>
768
- </pre></div>
769
-
770
- </div>
771
- </div>
772
- </div>
773
-
774
- <div class="output_wrapper">
775
- <div class="output">
776
-
777
-
778
- <div class="output_area">
779
-
780
-
781
-
782
-
783
-
784
- <div class="output_subarea output_widget_view ">
785
- <button class="js-nbinteract-widget">
786
- Loading widgets...
787
- </button>
788
- </div>
789
-
790
- </div>
791
-
792
- </div>
793
- </div>
794
-
795
- </div>
796
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
797
- <div class="text_cell_render border-box-sizing rendered_html">
798
- <h3 id="nbinteract.short_answer">nbinteract.short_answer<a class="anchor-link" href="#nbinteract.short_answer">&#182;</a></h3><p><code>nbinteract.short_answer</code> takes a question and an answer.</p>
799
- <p>The answer can either be a string, a list of strings, or a function that returns <code>True</code> when called with the user's input. If the function errors, an error message will be displayed.</p>
800
-
801
- </div>
802
- </div>
803
- </div>
804
-
805
-
806
-
807
- <div class="
808
- cell border-box-sizing code_cell rendered">
809
- <div class="input">
810
-
811
- <div class="inner_cell">
812
- <div class="input_area">
813
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">short_answer</span><span class="p">(</span><span class="s1">&#39;What is 1+1?&#39;</span><span class="p">,</span> <span class="n">answers</span><span class="o">=</span><span class="s1">&#39;2&#39;</span><span class="p">,</span> <span class="n">explanation</span><span class="o">=</span><span class="s1">&#39;1+1 is 2&#39;</span><span class="p">)</span>
814
- </pre></div>
815
-
816
- </div>
817
- </div>
818
- </div>
819
-
820
- <div class="output_wrapper">
821
- <div class="output">
822
-
823
-
824
- <div class="output_area">
825
-
826
-
827
-
828
-
829
-
830
- <div class="output_subarea output_widget_view ">
831
- <button class="js-nbinteract-widget">
832
- Loading widgets...
833
- </button>
834
- </div>
835
-
836
- </div>
837
-
838
- </div>
839
- </div>
840
-
841
- </div>
842
-
843
-
844
-
845
- <div class="
846
- cell border-box-sizing code_cell rendered">
847
- <div class="input">
848
-
849
- <div class="inner_cell">
850
- <div class="input_area">
851
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">short_answer</span><span class="p">(</span><span class="s1">&#39;Enter the first name of a member of the Beatles.&#39;</span><span class="p">,</span>
852
- <span class="p">[</span><span class="s1">&#39;John&#39;</span><span class="p">,</span> <span class="s1">&#39;Paul&#39;</span><span class="p">,</span> <span class="s1">&#39;George&#39;</span><span class="p">,</span> <span class="s1">&#39;Ringo&#39;</span><span class="p">])</span>
853
- </pre></div>
854
-
855
- </div>
856
- </div>
857
- </div>
858
-
859
- <div class="output_wrapper">
860
- <div class="output">
861
-
862
-
863
- <div class="output_area">
864
-
865
-
866
-
867
-
868
-
869
- <div class="output_subarea output_widget_view ">
870
- <button class="js-nbinteract-widget">
871
- Loading widgets...
872
- </button>
873
- </div>
874
-
875
- </div>
876
-
877
- </div>
878
- </div>
879
-
880
- </div>
881
-
882
-
883
-
884
- <div class="
885
- cell border-box-sizing code_cell rendered">
886
- <div class="input">
887
-
888
- <div class="inner_cell">
889
- <div class="input_area">
890
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">short_answer</span><span class="p">(</span><span class="s1">&#39;Enter an even number.&#39;</span><span class="p">,</span> <span class="k">lambda</span> <span class="n">x</span><span class="p">:</span> <span class="nb">int</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span>
891
- </pre></div>
892
-
893
- </div>
894
- </div>
895
- </div>
896
-
897
- <div class="output_wrapper">
898
- <div class="output">
899
-
900
-
901
- <div class="output_area">
902
-
903
-
904
-
905
-
906
-
907
- <div class="output_subarea output_widget_view ">
908
- <button class="js-nbinteract-widget">
909
- Loading widgets...
910
- </button>
911
- </div>
912
-
913
- </div>
914
-
915
- </div>
916
- </div>
917
-
918
- </div>
919
-
1
+ <div class="cell text_cell">
2
+ <button class="js-nbinteract-widget">
3
+ Loading widgets...
4
+ </button>
5
+ </div>
6
+
7
+
8
+
9
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
10
+ <div class="text_cell_render border-box-sizing rendered_html">
11
+ <h2 id="Widgets-from-ipywidgets">Widgets from ipywidgets<a class="anchor-link" href="#Widgets-from-ipywidgets">&#182;</a></h2><p>The library <em>ipywidgets</em>, also known as <em>jupyter-widgets</em>, are interactive
12
+ HTML widgets for Jupyter notebooks and the IPython kernel. Notebooks come
13
+ alive when interactive widgets are used. Users gain control of their data
14
+ and can visualize changes in the data.</p>
15
+
16
+ </div>
17
+ </div>
18
+ </div>
19
+
20
+
21
+
22
+ <div class="
23
+ cell border-box-sizing code_cell rendered">
24
+ <div class="input">
25
+
26
+ <div class="inner_cell">
27
+ <div class="input_area">
28
+ <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>
29
+ <span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
30
+ <span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">interact</span>
31
+ <span class="kn">import</span> <span class="nn">nbinteract</span> <span class="k">as</span> <span class="nn">nbi</span>
32
+ <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
33
+ <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>
34
+ </pre></div>
35
+
36
+ </div>
37
+ </div>
38
+ </div>
39
+
40
+ </div>
41
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
42
+ <div class="text_cell_render border-box-sizing rendered_html">
43
+ <h3 id="Base-slider">Base slider<a class="anchor-link" href="#Base-slider">&#182;</a></h3>
44
+ </div>
45
+ </div>
46
+ </div>
47
+
48
+
49
+
50
+ <div class="
51
+ cell border-box-sizing code_cell rendered">
52
+ <div class="input">
53
+
54
+ <div class="inner_cell">
55
+ <div class="input_area">
56
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># Testing Interact from ipywidgets</span>
57
+ <span class="k">def</span> <span class="nf">square</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
58
+ <span class="k">return</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span>
59
+
60
+ <span class="n">interact</span><span class="p">(</span><span class="n">square</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="mi">10</span><span class="p">);</span>
61
+ </pre></div>
62
+
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="output_wrapper">
68
+ <div class="output">
69
+
70
+
71
+ <div class="output_area">
72
+
73
+
74
+
75
+
76
+
77
+ <div class="output_subarea output_widget_view ">
78
+ <button class="js-nbinteract-widget">
79
+ Loading widgets...
80
+ </button>
81
+ </div>
82
+
83
+ </div>
84
+
85
+ </div>
86
+ </div>
87
+
88
+ </div>
89
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
90
+ <div class="text_cell_render border-box-sizing rendered_html">
91
+ <h3 id="Slider-for-widget-control">Slider for widget control<a class="anchor-link" href="#Slider-for-widget-control">&#182;</a></h3>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+
97
+
98
+ <div class="
99
+ cell border-box-sizing code_cell rendered">
100
+ <div class="input">
101
+
102
+ <div class="inner_cell">
103
+ <div class="input_area">
104
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># Definiere myplot-Funktion </span>
105
+ <span class="k">def</span> <span class="nf">myplot</span><span class="p">(</span><span class="n">xmax</span><span class="p">):</span>
106
+ <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">xmax</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">);</span><span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="mi">2</span><span class="o">*</span><span class="n">pi</span><span class="o">*</span><span class="n">x</span><span class="p">);</span>
107
+ <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>
108
+
109
+ <span class="c1"># Erstelle ein Widget für den Plot mit Hilfe von interact </span>
110
+ <span class="n">interact</span><span class="p">(</span><span class="n">myplot</span><span class="p">,</span> <span class="n">xmax</span> <span class="o">=</span> <span class="p">(</span><span class="n">pi</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span><span class="mi">4</span><span class="o">*</span><span class="n">pi</span><span class="p">));</span>
111
+ </pre></div>
112
+
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="output_wrapper">
118
+ <div class="output">
119
+
120
+
121
+ <div class="output_area">
122
+
123
+
124
+
125
+
126
+
127
+ <div class="output_subarea output_widget_view ">
128
+ <button class="js-nbinteract-widget">
129
+ Loading widgets...
130
+ </button>
131
+ </div>
132
+
133
+ </div>
134
+
135
+ </div>
136
+ </div>
137
+
138
+ </div>
139
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
140
+ <div class="text_cell_render border-box-sizing rendered_html">
141
+ <h3 id="Select-box">Select box<a class="anchor-link" href="#Select-box">&#182;</a></h3>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+
147
+
148
+ <div class="
149
+ cell border-box-sizing code_cell rendered">
150
+ <div class="input">
151
+
152
+ <div class="inner_cell">
153
+ <div class="input_area">
154
+ <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>
155
+ <span class="sd">&quot;&quot;&quot;</span>
156
+ <span class="sd"> Print the current widget value in short sentence</span>
157
+ <span class="sd"> &quot;&quot;&quot;</span>
158
+ <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>
159
+
160
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_my_name</span><span class="p">,</span> <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>
161
+ </pre></div>
162
+
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="output_wrapper">
168
+ <div class="output">
169
+
170
+
171
+ <div class="output_area">
172
+
173
+
174
+
175
+
176
+
177
+ <div class="output_subarea output_widget_view ">
178
+ <button class="js-nbinteract-widget">
179
+ Loading widgets...
180
+ </button>
181
+ </div>
182
+
183
+ </div>
184
+
185
+ </div>
186
+ </div>
187
+
188
+ </div>
189
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
190
+ <div class="text_cell_render border-box-sizing rendered_html">
191
+ <h3 id="Combined-widgets">Combined widgets<a class="anchor-link" href="#Combined-widgets">&#182;</a></h3>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+
197
+
198
+ <div class="
199
+ cell border-box-sizing code_cell rendered">
200
+ <div class="input">
201
+
202
+ <div class="inner_cell">
203
+ <div class="input_area">
204
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">say_something</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
205
+ <span class="sd">&quot;&quot;&quot;</span>
206
+ <span class="sd"> Print the current widget value in short sentence</span>
207
+ <span class="sd"> &quot;&quot;&quot;</span>
208
+ <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>
209
+
210
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_something</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>
211
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_something</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>
212
+ <span class="n">widgets</span><span class="o">.</span><span class="n">interact</span><span class="p">(</span><span class="n">say_something</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>
213
+ <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">say_something</span><span class="p">,</span> <span class="n">x</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
214
+ </pre></div>
215
+
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="output_wrapper">
221
+ <div class="output">
222
+
223
+
224
+ <div class="output_area">
225
+
226
+
227
+
228
+
229
+
230
+ <div class="output_subarea output_widget_view ">
231
+ <button class="js-nbinteract-widget">
232
+ Loading widgets...
233
+ </button>
234
+ </div>
235
+
236
+ </div>
237
+
238
+ <div class="output_area">
239
+
240
+
241
+
242
+
243
+
244
+ <div class="output_subarea output_widget_view ">
245
+ <button class="js-nbinteract-widget">
246
+ Loading widgets...
247
+ </button>
248
+ </div>
249
+
250
+ </div>
251
+
252
+ <div class="output_area">
253
+
254
+
255
+
256
+
257
+
258
+ <div class="output_subarea output_widget_view ">
259
+ <button class="js-nbinteract-widget">
260
+ Loading widgets...
261
+ </button>
262
+ </div>
263
+
264
+ </div>
265
+
266
+ <div class="output_area">
267
+
268
+
269
+
270
+
271
+
272
+ <div class="output_subarea output_widget_view ">
273
+ <button class="js-nbinteract-widget">
274
+ Loading widgets...
275
+ </button>
276
+ </div>
277
+
278
+ </div>
279
+
280
+ </div>
281
+ </div>
282
+
283
+ </div>
284
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
285
+ <div class="text_cell_render border-box-sizing rendered_html">
286
+ <h3 id="Complex-widget-configs">Complex widget configs<a class="anchor-link" href="#Complex-widget-configs">&#182;</a></h3>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+
292
+
293
+ <div class="
294
+ cell border-box-sizing code_cell rendered">
295
+ <div class="input">
296
+
297
+ <div class="inner_cell">
298
+ <div class="input_area">
299
+ <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>
300
+ <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span>
301
+ <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>
302
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;slider&#39;</span>
303
+ <span class="p">)</span>
304
+
305
+ <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>
306
+ <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>
307
+ <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">100</span><span class="p">,</span> <span class="n">step</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span>
308
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;range slider&#39;</span>
309
+ <span class="p">)</span>
310
+
311
+ <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>
312
+ <span class="n">value</span><span class="o">=</span><span class="s1">&#39;feb&#39;</span><span class="p">,</span>
313
+ <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>
314
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;dropdown&#39;</span>
315
+ <span class="p">)</span>
316
+
317
+ <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>
318
+ <span class="n">value</span><span class="o">=</span><span class="s1">&#39;feb&#39;</span><span class="p">,</span>
319
+ <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>
320
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;radio buttons&#39;</span>
321
+ <span class="p">)</span>
322
+
323
+ <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>
324
+ <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>
325
+ <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>
326
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;combo box&#39;</span>
327
+ <span class="p">)</span>
328
+
329
+ <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>
330
+ <span class="n">description</span><span class="o">=</span><span class="s1">&#39;checkbox&#39;</span><span class="p">,</span>
331
+ <span class="n">value</span><span class="o">=</span><span class="kc">True</span>
332
+ <span class="p">)</span>
333
+
334
+
335
+ <span class="c1"># a VBox container to pack widgets vertically</span>
336
+ <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">(</span>
337
+ <span class="p">[</span>
338
+ <span class="n">int_slider</span><span class="p">,</span>
339
+ <span class="n">int_range_slider</span><span class="p">,</span>
340
+ <span class="n">dropdown</span><span class="p">,</span>
341
+ <span class="n">radiobuttons</span><span class="p">,</span>
342
+ <span class="n">checkbox</span><span class="p">,</span>
343
+ <span class="n">combobox</span><span class="p">,</span>
344
+ <span class="p">]</span>
345
+ <span class="p">)</span>
346
+ </pre></div>
347
+
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="output_wrapper">
353
+ <div class="output">
354
+
355
+
356
+ <div class="output_area">
357
+
358
+
359
+
360
+
361
+
362
+ <div class="output_subarea output_widget_view ">
363
+ <button class="js-nbinteract-widget">
364
+ Loading widgets...
365
+ </button>
366
+ </div>
367
+
368
+ </div>
369
+
370
+ </div>
371
+ </div>
372
+
373
+ </div>
374
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
375
+ <div class="text_cell_render border-box-sizing rendered_html">
376
+ <h3 id="Connected-sliders">Connected sliders<a class="anchor-link" href="#Connected-sliders">&#182;</a></h3>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+
382
+
383
+ <div class="
384
+ cell border-box-sizing code_cell rendered">
385
+ <div class="input">
386
+
387
+ <div class="inner_cell">
388
+ <div class="input_area">
389
+ <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><span class="n">description</span><span class="o">=</span><span class="s1">&#39;slider 1&#39;</span><span class="p">,</span> <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>
390
+ <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><span class="n">description</span><span class="o">=</span><span class="s1">&#39;slider 2&#39;</span><span class="p">,</span> <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>
391
+
392
+ <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>
393
+ <span class="p">(</span><span class="n">sl1</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="p">),</span>
394
+ <span class="p">(</span><span class="n">sl2</span><span class="p">,</span> <span class="s1">&#39;min&#39;</span><span class="p">)</span>
395
+ <span class="p">)</span>
396
+
397
+ <span class="n">sl1</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="mi">5</span>
398
+ <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span><span class="n">sl1</span><span class="p">,</span> <span class="n">sl2</span><span class="p">])</span>
399
+ </pre></div>
400
+
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="output_wrapper">
406
+ <div class="output">
407
+
408
+
409
+ <div class="output_area">
410
+
411
+
412
+
413
+
414
+
415
+ <div class="output_subarea output_widget_view ">
416
+ <button class="js-nbinteract-widget">
417
+ Loading widgets...
418
+ </button>
419
+ </div>
420
+
421
+ </div>
422
+
423
+ </div>
424
+ </div>
425
+
426
+ </div>
427
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
428
+ <div class="text_cell_render border-box-sizing rendered_html">
429
+ <h2 id="Widgets-from-nbinteract">Widgets from nbinteract<a class="anchor-link" href="#Widgets-from-nbinteract">&#182;</a></h2><p>The library <em>nbinteract</em> comes with a set of functions that produce Javascript-based plots designed for interaction. The package combines the <em>ipywidgets</em> library and the <em>bqplot</em>
430
+ plotting library to implement function-driven interfaces to interactive plotting.</p>
431
+ <p>The nbinteract plotting methods use <strong>ipywidgets</strong> to generate and display widgets, inferring the widget type as needed. When a user interacts with a widget, a Python callback updates the visualization <strong>without</strong> a complete rerender. This noticeably lowers visualization update time compared to using ipywidgets alone to render static images.</p>
432
+
433
+ </div>
434
+ </div>
435
+ </div>
436
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
437
+ <div class="text_cell_render border-box-sizing rendered_html">
438
+ <h3 id="nbinteract.hist"><code>nbinteract.hist</code><a class="anchor-link" href="#nbinteract.hist">&#182;</a></h3><p>The widget hist generates a histogram that allows interaction with the parameters for the response function. The widget takes in a single response function. The response function returns the array of numerical values that will be shown in the histogram. The hist function allows interaction with the response function's parameters by specifying them as keyword arguments in the same format as ipywidgets.interact. Any argument that can be used for ipywidgets.interact can be used for hist.</p>
439
+
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+
445
+
446
+ <div class="
447
+ cell border-box-sizing code_cell rendered">
448
+ <div class="input">
449
+
450
+ <div class="inner_cell">
451
+ <div class="input_area">
452
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">hist_response_function</span><span class="p">(</span><span class="n">mean</span><span class="p">,</span> <span class="n">sd</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">1000</span><span class="p">):</span>
453
+ <span class="sd">&#39;&#39;&#39;</span>
454
+ <span class="sd"> Returns 1000 values picked at random from the normal</span>
455
+ <span class="sd"> distribution with the mean and SD given.</span>
456
+ <span class="sd"> &#39;&#39;&#39;</span>
457
+ <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">normal</span><span class="p">(</span><span class="n">loc</span><span class="o">=</span><span class="n">mean</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">sd</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">1000</span><span class="p">)</span>
458
+
459
+ <span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span><span class="n">hist_response_function</span><span class="p">,</span> <span class="n">mean</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="n">sd</span><span class="o">=</span><span class="p">(</span><span class="mf">0.2</span><span class="p">,</span> <span class="mf">2.0</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">))</span>
460
+ </pre></div>
461
+
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="output_wrapper">
467
+ <div class="output">
468
+
469
+
470
+ <div class="output_area">
471
+
472
+
473
+
474
+
475
+
476
+ <div class="output_subarea output_widget_view ">
477
+ <button class="js-nbinteract-widget">
478
+ Loading widgets...
479
+ </button>
480
+ </div>
481
+
482
+ </div>
483
+
484
+ </div>
485
+ </div>
486
+
487
+ </div>
488
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
489
+ <div class="text_cell_render border-box-sizing rendered_html">
490
+ <h3 id="nbinteract.bar"><code>nbinteract.bar</code><a class="anchor-link" href="#nbinteract.bar">&#182;</a></h3><p>The widgetr bar generates an bar plot that allows interaction with the parameters for the response functions.</p>
491
+ <p>The first two arguments of bar are response functions that return the x and y-axis data arrays, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to bar in the format expected by interact. The response function for the y-axis data will be called with the x-axis data as its first argument.</p>
492
+ <p>For example, in the bar plot below categories generates the categories to plot on the x-axis and heights generates the y-axis heights. The heights function uses the parameter xs which is the array of x-axis data points.</p>
493
+
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+
499
+
500
+ <div class="
501
+ cell border-box-sizing code_cell rendered">
502
+ <div class="input">
503
+
504
+ <div class="inner_cell">
505
+ <div class="input_area">
506
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">categories</span><span class="p">(</span><span class="n">n</span><span class="p">):</span>
507
+ <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="n">n</span><span class="p">)</span>
508
+
509
+ <span class="k">def</span> <span class="nf">heights</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">offset</span><span class="p">):</span>
510
+ <span class="k">return</span> <span class="n">xs</span> <span class="o">+</span> <span class="n">offset</span>
511
+
512
+ <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
513
+ <span class="s1">&#39;ylim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">20</span><span class="p">),</span>
514
+ <span class="p">}</span>
515
+
516
+ <span class="n">nbi</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span><span class="n">categories</span><span class="p">,</span> <span class="n">heights</span><span class="p">,</span> <span class="n">n</span><span class="o">=</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">offset</span><span class="o">=</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">options</span><span class="o">=</span><span class="n">opts</span><span class="p">)</span>
517
+ </pre></div>
518
+
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="output_wrapper">
524
+ <div class="output">
525
+
526
+
527
+ <div class="output_area">
528
+
529
+
530
+
531
+
532
+
533
+ <div class="output_subarea output_widget_view ">
534
+ <button class="js-nbinteract-widget">
535
+ Loading widgets...
536
+ </button>
537
+ </div>
538
+
539
+ </div>
540
+
541
+ </div>
542
+ </div>
543
+
544
+ </div>
545
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
546
+ <div class="text_cell_render border-box-sizing rendered_html">
547
+ <h3 id="nbinteract.scatter_drag">nbinteract.scatter_drag<a class="anchor-link" href="#nbinteract.scatter_drag">&#182;</a></h3><p>The widget scatter_drag generates a scatter plot that allows interaction through clicking and dragging the points on the graph.</p>
548
+ <p>scatter_drag takes in two lists/arrays consisting of the x-coordinates and y-coordinates of the points to plot. It generates an interactive scatter plot where the points can be dragged by the user and a best fit line is updated automatically according to the placement of the points.</p>
549
+ <p>scatter_drag does not allow response functions as inputs.</p>
550
+
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+
556
+
557
+ <div class="
558
+ cell border-box-sizing code_cell rendered">
559
+ <div class="input">
560
+
561
+ <div class="inner_cell">
562
+ <div class="input_area">
563
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">x_coords</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
564
+ <span class="n">y_coords</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span> <span class="o">+</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
565
+
566
+ <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;xlim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">9</span><span class="p">),</span> <span class="s1">&#39;ylim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">11</span><span class="p">),</span> <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">250</span><span class="p">}</span>
567
+
568
+ <span class="n">nbi</span><span class="o">.</span><span class="n">scatter_drag</span><span class="p">(</span><span class="n">x_coords</span><span class="p">,</span> <span class="n">y_coords</span><span class="p">,</span> <span class="n">options</span><span class="o">=</span><span class="n">opts</span><span class="p">)</span>
569
+ </pre></div>
570
+
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="output_wrapper">
576
+ <div class="output">
577
+
578
+
579
+ <div class="output_area">
580
+
581
+
582
+
583
+
584
+
585
+ <div class="output_subarea output_widget_view ">
586
+ <button class="js-nbinteract-widget">
587
+ Loading widgets...
588
+ </button>
589
+ </div>
590
+
591
+ </div>
592
+
593
+ </div>
594
+ </div>
595
+
596
+ </div>
597
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
598
+ <div class="text_cell_render border-box-sizing rendered_html">
599
+ <h3 id="nbinteract.scatter"><code>nbinteract.scatter</code><a class="anchor-link" href="#nbinteract.scatter">&#182;</a></h3><p>The scatter widgetr generates a scatter plot that allows interaction with the parameters to the response functions. This is different from scatter_drag which facilitates interaction using click and drag actions.</p>
600
+ <p>The first two arguments of scatter are response functions that return the x and y-axis coordinates, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to scatter in the format expected by interact. The response function for the y-coordinates will be called with the x-coordinates as its first argument.</p>
601
+
602
+ </div>
603
+ </div>
604
+ </div>
605
+
606
+
607
+
608
+ <div class="
609
+ cell border-box-sizing code_cell rendered">
610
+ <div class="input">
611
+
612
+ <div class="inner_cell">
613
+ <div class="input_area">
614
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">x_values</span><span class="p">(</span><span class="n">n</span><span class="p">):</span> <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
615
+ <span class="k">def</span> <span class="nf">y_values</span><span class="p">(</span><span class="n">xs</span><span class="p">):</span> <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">xs</span><span class="p">))</span>
616
+
617
+ <span class="n">nbi</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="n">x_values</span><span class="p">,</span> <span class="n">y_values</span><span class="p">,</span> <span class="n">n</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">200</span><span class="p">))</span>
618
+ </pre></div>
619
+
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="output_wrapper">
625
+ <div class="output">
626
+
627
+
628
+ <div class="output_area">
629
+
630
+
631
+
632
+
633
+
634
+ <div class="output_subarea output_widget_view ">
635
+ <button class="js-nbinteract-widget">
636
+ Loading widgets...
637
+ </button>
638
+ </div>
639
+
640
+ </div>
641
+
642
+ </div>
643
+ </div>
644
+
645
+ </div>
646
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
647
+ <div class="text_cell_render border-box-sizing rendered_html">
648
+ <h3 id="nbinteract.line"><code>nbinteract.line</code><a class="anchor-link" href="#nbinteract.line">&#182;</a></h3><p>The line widget generates a line plot that allows interaction with the parameters to the response functions.</p>
649
+ <p>The first two arguments of line are response functions that return the x and y-axis coordinates, respectively. Either argument can be arrays themselves. Arguments for the response functions must be passed in as keyword arguments to line in the format expected by interact. The response function for the y-coordinates will be called with the x-coordinates as its first argument.</p>
650
+
651
+ </div>
652
+ </div>
653
+ </div>
654
+
655
+
656
+
657
+ <div class="
658
+ cell border-box-sizing code_cell rendered">
659
+ <div class="input">
660
+
661
+ <div class="inner_cell">
662
+ <div class="input_area">
663
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">x_values</span><span class="p">(</span><span class="nb">max</span><span class="p">):</span> <span class="k">return</span> <span class="n">np</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="nb">max</span><span class="p">)</span>
664
+ <span class="k">def</span> <span class="nf">y_values</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">sd</span><span class="p">):</span>
665
+ <span class="k">return</span> <span class="n">xs</span> <span class="o">+</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">normal</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">sd</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="nb">len</span><span class="p">(</span><span class="n">xs</span><span class="p">))</span>
666
+
667
+ <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
668
+ <span class="s1">&#39;xlim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">50</span><span class="p">),</span>
669
+ <span class="s1">&#39;ylim&#39;</span><span class="p">:</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">55</span><span class="p">),</span>
670
+ <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">250</span><span class="p">,</span>
671
+ <span class="p">}</span>
672
+
673
+ <span class="n">nbi</span><span class="o">.</span><span class="n">line</span><span class="p">(</span><span class="n">x_values</span><span class="p">,</span> <span class="n">y_values</span><span class="p">,</span> <span class="nb">max</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">50</span><span class="p">),</span> <span class="n">sd</span><span class="o">=</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">options</span><span class="o">=</span><span class="n">opts</span><span class="p">)</span>
674
+ </pre></div>
675
+
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <div class="output_wrapper">
681
+ <div class="output">
682
+
683
+
684
+ <div class="output_area">
685
+
686
+
687
+
688
+
689
+
690
+ <div class="output_subarea output_widget_view ">
691
+ <button class="js-nbinteract-widget">
692
+ Loading widgets...
693
+ </button>
694
+ </div>
695
+
696
+ </div>
697
+
698
+ </div>
699
+ </div>
700
+
701
+ </div>
702
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
703
+ <div class="text_cell_render border-box-sizing rendered_html">
704
+ <h2 id="Interactive-Questions-from-nbinteract">Interactive Questions from nbinteract<a class="anchor-link" href="#Interactive-Questions-from-nbinteract">&#182;</a></h2><p>nbinteract also provides built-in methods to easily create multiple choice and short answer questions.</p>
705
+
706
+ </div>
707
+ </div>
708
+ </div>
709
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
710
+ <div class="text_cell_render border-box-sizing rendered_html">
711
+ <h3 id="nbinteract.multiple_choice">nbinteract.multiple_choice<a class="anchor-link" href="#nbinteract.multiple_choice">&#182;</a></h3><p><code>nbinteract.multiple_choice</code> takes a question, a list of possible answer choices, and the correct answer. Clicking the buttons shows whether the choice was correct.</p>
712
+
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+
718
+
719
+ <div class="
720
+ cell border-box-sizing code_cell rendered">
721
+ <div class="input">
722
+
723
+ <div class="inner_cell">
724
+ <div class="input_area">
725
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">multiple_choice</span><span class="p">(</span><span class="n">question</span><span class="o">=</span><span class="s2">&quot;What is 10 + 2 * 5?&quot;</span><span class="p">,</span>
726
+ <span class="n">choices</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;12&#39;</span><span class="p">,</span> <span class="s1">&#39;60&#39;</span><span class="p">,</span> <span class="s1">&#39;20&#39;</span><span class="p">],</span>
727
+ <span class="n">answers</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
728
+ </pre></div>
729
+
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="output_wrapper">
735
+ <div class="output">
736
+
737
+
738
+ <div class="output_area">
739
+
740
+
741
+
742
+
743
+
744
+ <div class="output_subarea output_widget_view ">
745
+ <button class="js-nbinteract-widget">
746
+ Loading widgets...
747
+ </button>
748
+ </div>
749
+
750
+ </div>
751
+
752
+ </div>
753
+ </div>
754
+
755
+ </div>
756
+
757
+
758
+
759
+ <div class="
760
+ cell border-box-sizing code_cell rendered">
761
+ <div class="input">
762
+
763
+ <div class="inner_cell">
764
+ <div class="input_area">
765
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">multiple_choice</span><span class="p">(</span><span class="n">question</span><span class="o">=</span><span class="s2">&quot;Select all prime numbers.&quot;</span><span class="p">,</span>
766
+ <span class="n">choices</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;12&#39;</span><span class="p">,</span> <span class="s1">&#39;3&#39;</span><span class="p">,</span> <span class="s1">&#39;31&#39;</span><span class="p">],</span>
767
+ <span class="n">answers</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">])</span>
768
+ </pre></div>
769
+
770
+ </div>
771
+ </div>
772
+ </div>
773
+
774
+ <div class="output_wrapper">
775
+ <div class="output">
776
+
777
+
778
+ <div class="output_area">
779
+
780
+
781
+
782
+
783
+
784
+ <div class="output_subarea output_widget_view ">
785
+ <button class="js-nbinteract-widget">
786
+ Loading widgets...
787
+ </button>
788
+ </div>
789
+
790
+ </div>
791
+
792
+ </div>
793
+ </div>
794
+
795
+ </div>
796
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
797
+ <div class="text_cell_render border-box-sizing rendered_html">
798
+ <h3 id="nbinteract.short_answer">nbinteract.short_answer<a class="anchor-link" href="#nbinteract.short_answer">&#182;</a></h3><p><code>nbinteract.short_answer</code> takes a question and an answer.</p>
799
+ <p>The answer can either be a string, a list of strings, or a function that returns <code>True</code> when called with the user's input. If the function errors, an error message will be displayed.</p>
800
+
801
+ </div>
802
+ </div>
803
+ </div>
804
+
805
+
806
+
807
+ <div class="
808
+ cell border-box-sizing code_cell rendered">
809
+ <div class="input">
810
+
811
+ <div class="inner_cell">
812
+ <div class="input_area">
813
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">short_answer</span><span class="p">(</span><span class="s1">&#39;What is 1+1?&#39;</span><span class="p">,</span> <span class="n">answers</span><span class="o">=</span><span class="s1">&#39;2&#39;</span><span class="p">,</span> <span class="n">explanation</span><span class="o">=</span><span class="s1">&#39;1+1 is 2&#39;</span><span class="p">)</span>
814
+ </pre></div>
815
+
816
+ </div>
817
+ </div>
818
+ </div>
819
+
820
+ <div class="output_wrapper">
821
+ <div class="output">
822
+
823
+
824
+ <div class="output_area">
825
+
826
+
827
+
828
+
829
+
830
+ <div class="output_subarea output_widget_view ">
831
+ <button class="js-nbinteract-widget">
832
+ Loading widgets...
833
+ </button>
834
+ </div>
835
+
836
+ </div>
837
+
838
+ </div>
839
+ </div>
840
+
841
+ </div>
842
+
843
+
844
+
845
+ <div class="
846
+ cell border-box-sizing code_cell rendered">
847
+ <div class="input">
848
+
849
+ <div class="inner_cell">
850
+ <div class="input_area">
851
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">short_answer</span><span class="p">(</span><span class="s1">&#39;Enter the first name of a member of the Beatles.&#39;</span><span class="p">,</span>
852
+ <span class="p">[</span><span class="s1">&#39;John&#39;</span><span class="p">,</span> <span class="s1">&#39;Paul&#39;</span><span class="p">,</span> <span class="s1">&#39;George&#39;</span><span class="p">,</span> <span class="s1">&#39;Ringo&#39;</span><span class="p">])</span>
853
+ </pre></div>
854
+
855
+ </div>
856
+ </div>
857
+ </div>
858
+
859
+ <div class="output_wrapper">
860
+ <div class="output">
861
+
862
+
863
+ <div class="output_area">
864
+
865
+
866
+
867
+
868
+
869
+ <div class="output_subarea output_widget_view ">
870
+ <button class="js-nbinteract-widget">
871
+ Loading widgets...
872
+ </button>
873
+ </div>
874
+
875
+ </div>
876
+
877
+ </div>
878
+ </div>
879
+
880
+ </div>
881
+
882
+
883
+
884
+ <div class="
885
+ cell border-box-sizing code_cell rendered">
886
+ <div class="input">
887
+
888
+ <div class="inner_cell">
889
+ <div class="input_area">
890
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">short_answer</span><span class="p">(</span><span class="s1">&#39;Enter an even number.&#39;</span><span class="p">,</span> <span class="k">lambda</span> <span class="n">x</span><span class="p">:</span> <span class="nb">int</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span>
891
+ </pre></div>
892
+
893
+ </div>
894
+ </div>
895
+ </div>
896
+
897
+ <div class="output_wrapper">
898
+ <div class="output">
899
+
900
+
901
+ <div class="output_area">
902
+
903
+
904
+
905
+
906
+
907
+ <div class="output_subarea output_widget_view ">
908
+ <button class="js-nbinteract-widget">
909
+ Loading widgets...
910
+ </button>
911
+ </div>
912
+
913
+ </div>
914
+
915
+ </div>
916
+ </div>
917
+
918
+ </div>
919
+