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/nbi_docs_recipes_graphing.html CHANGED
@@ -1,473 +1,473 @@
1
- <div class="cell text_cell">
2
- <button class="js-nbinteract-widget">
3
- Loading widgets...
4
- </button>
5
- </div>
6
-
7
-
8
-
9
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
10
- <div class="text_cell_render border-box-sizing rendered_html">
11
- <h3 id="Plotting-using-nbinteract">Plotting using <code>nbinteract</code><a class="anchor-link" href="#Plotting-using-nbinteract">&#182;</a></h3>
12
- </div>
13
- </div>
14
- </div>
15
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
16
- <div class="text_cell_render border-box-sizing rendered_html">
17
- <p><code>nbinteract</code> comes with a set of functions that produce Javascript-based plots designed for interaction.</p>
18
- <p>Most plotting functions that come with <code>nbinteract</code> take in response functions that return the <strong>data</strong> to be plotted.</p>
19
-
20
- </div>
21
- </div>
22
- </div>
23
-
24
-
25
-
26
- <div class="
27
- cell border-box-sizing code_cell rendered">
28
- <div class="input">
29
-
30
- <div class="inner_cell">
31
- <div class="input_area">
32
- <div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">nbinteract</span> <span class="k">as</span> <span class="nn">nbi</span>
33
- <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</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
- <p>For a complete API reference for each function, you may type the function name in a cell and add a <code>?</code> at the end. For example, to view the API reference for <code>nbi.hist</code>:</p>
44
-
45
- </div>
46
- </div>
47
- </div>
48
-
49
-
50
-
51
- <div class="
52
- cell border-box-sizing code_cell rendered">
53
- <div class="input">
54
-
55
- <div class="inner_cell">
56
- <div class="input_area">
57
- <div class=" highlight hl-ipython3"><pre><span></span>nbi.hist<span class="o">?</span>
58
- </pre></div>
59
-
60
- </div>
61
- </div>
62
- </div>
63
-
64
- </div>
65
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
66
- <div class="text_cell_render border-box-sizing rendered_html">
67
- <h4 id="nbinteract.hist"><code>nbinteract.hist</code><a class="anchor-link" href="#nbinteract.hist">&#182;</a></h4>
68
- </div>
69
- </div>
70
- </div>
71
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
72
- <div class="text_cell_render border-box-sizing rendered_html">
73
- <p><code>hist</code> generates a histogram that allows interaction with the parameters for the response function.</p>
74
- <p><code>hist</code> takes in a single response function. The response function returns the array of numerical values that will be shown in the histogram. The <code>hist</code> function allows interaction with the response function's parameters by specifying them as keyword arguments in the same format as <code>ipywidgets.interact</code>. Any argument that can be used for <code>ipywidgets.interact</code> can be used for <code>hist</code>.</p>
75
-
76
- </div>
77
- </div>
78
- </div>
79
-
80
-
81
-
82
- <div class="
83
- cell border-box-sizing code_cell rendered">
84
- <div class="input">
85
-
86
- <div class="inner_cell">
87
- <div class="input_area">
88
- <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>
89
- <span class="sd">&#39;&#39;&#39;</span>
90
- <span class="sd"> Returns 1000 values picked at random from the normal</span>
91
- <span class="sd"> distribution with the mean and SD given.</span>
92
- <span class="sd"> &#39;&#39;&#39;</span>
93
- <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>
94
- </pre></div>
95
-
96
- </div>
97
- </div>
98
- </div>
99
-
100
- </div>
101
-
102
-
103
-
104
- <div class="
105
- cell border-box-sizing code_cell rendered">
106
- <div class="input">
107
-
108
- <div class="inner_cell">
109
- <div class="input_area">
110
- <div class=" highlight hl-ipython3"><pre><span></span><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>
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
- <p>If you interact with the above plot, you may notice that the plot's x and y-axes will automatically scale to match the input data. You can change plot parameters like the axes limits through the <code>options</code> parameter of the plotting functions:</p>
142
-
143
- </div>
144
- </div>
145
- </div>
146
-
147
-
148
-
149
- <div class="
150
- cell border-box-sizing code_cell rendered">
151
- <div class="input">
152
-
153
- <div class="inner_cell">
154
- <div class="input_area">
155
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">options</span> <span class="o">=</span> <span class="p">{</span>
156
- <span class="s1">&#39;title&#39;</span><span class="p">:</span> <span class="s1">&#39;1000 random points from normal distribution&#39;</span><span class="p">,</span>
157
- <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">15</span><span class="p">),</span>
158
- <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="mf">0.4</span><span class="p">),</span>
159
- <span class="p">}</span>
160
- <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">options</span><span class="o">=</span><span class="n">options</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>
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
- <p>You may call <code>nbinteract</code> plotting functions with plain data as the input as well:</p>
192
-
193
- </div>
194
- </div>
195
- </div>
196
-
197
-
198
-
199
- <div class="
200
- cell border-box-sizing code_cell rendered">
201
- <div class="input">
202
-
203
- <div class="inner_cell">
204
- <div class="input_area">
205
- <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</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">size</span><span class="o">=</span><span class="mi">1000</span><span class="p">))</span>
206
- </pre></div>
207
-
208
- </div>
209
- </div>
210
- </div>
211
-
212
- <div class="output_wrapper">
213
- <div class="output">
214
-
215
-
216
- <div class="output_area">
217
-
218
-
219
-
220
-
221
-
222
- <div class="output_subarea output_widget_view ">
223
- <button class="js-nbinteract-widget">
224
- Loading widgets...
225
- </button>
226
- </div>
227
-
228
- </div>
229
-
230
- </div>
231
- </div>
232
-
233
- </div>
234
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
235
- <div class="text_cell_render border-box-sizing rendered_html">
236
- <h4 id="nbinteract.bar"><code>nbinteract.bar</code><a class="anchor-link" href="#nbinteract.bar">&#182;</a></h4>
237
- </div>
238
- </div>
239
- </div>
240
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
241
- <div class="text_cell_render border-box-sizing rendered_html">
242
- <p><code>bar</code> generates an bar plot that allows interaction with the parameters for the response functions.</p>
243
- <p>The first two arguments of <code>bar</code> 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 <code>bar</code> 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>
244
- <p>For example, in the bar plot below <code>categories</code> generates the categories to plot on the x-axis and <code>heights</code> generates the y-axis heights. The <code>heights</code> function uses the parameter <code>xs</code> which is the array of x-axis data points.</p>
245
-
246
- </div>
247
- </div>
248
- </div>
249
-
250
-
251
-
252
- <div class="
253
- cell border-box-sizing code_cell rendered">
254
- <div class="input">
255
-
256
- <div class="inner_cell">
257
- <div class="input_area">
258
- <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>
259
- <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>
260
-
261
- <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>
262
- <span class="k">return</span> <span class="n">xs</span> <span class="o">+</span> <span class="n">offset</span>
263
-
264
- <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
265
- <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>
266
- <span class="p">}</span>
267
-
268
- <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>
269
- </pre></div>
270
-
271
- </div>
272
- </div>
273
- </div>
274
-
275
- <div class="output_wrapper">
276
- <div class="output">
277
-
278
-
279
- <div class="output_area">
280
-
281
-
282
-
283
-
284
-
285
- <div class="output_subarea output_widget_view ">
286
- <button class="js-nbinteract-widget">
287
- Loading widgets...
288
- </button>
289
- </div>
290
-
291
- </div>
292
-
293
- </div>
294
- </div>
295
-
296
- </div>
297
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
298
- <div class="text_cell_render border-box-sizing rendered_html">
299
- <h4 id="nbinteract.scatter_drag"><code>nbinteract.scatter_drag</code><a class="anchor-link" href="#nbinteract.scatter_drag">&#182;</a></h4>
300
- </div>
301
- </div>
302
- </div>
303
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
304
- <div class="text_cell_render border-box-sizing rendered_html">
305
- <p><code>scatter_drag</code> generates a scatter plot that allows interaction through clicking and dragging the points on the graph.</p>
306
- <p><code>scatter_drag</code> 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>
307
- <p><code>scatter_drag</code> does not allow response functions as inputs.</p>
308
-
309
- </div>
310
- </div>
311
- </div>
312
-
313
-
314
-
315
- <div class="
316
- cell border-box-sizing code_cell rendered">
317
- <div class="input">
318
-
319
- <div class="inner_cell">
320
- <div class="input_area">
321
- <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>
322
- <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>
323
-
324
- <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>
325
-
326
- <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>
327
- </pre></div>
328
-
329
- </div>
330
- </div>
331
- </div>
332
-
333
- <div class="output_wrapper">
334
- <div class="output">
335
-
336
-
337
- <div class="output_area">
338
-
339
-
340
-
341
-
342
-
343
- <div class="output_subarea output_widget_view ">
344
- <button class="js-nbinteract-widget">
345
- Loading widgets...
346
- </button>
347
- </div>
348
-
349
- </div>
350
-
351
- </div>
352
- </div>
353
-
354
- </div>
355
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
356
- <div class="text_cell_render border-box-sizing rendered_html">
357
- <h4 id="nbinteract.scatter"><code>nbinteract.scatter</code><a class="anchor-link" href="#nbinteract.scatter">&#182;</a></h4>
358
- </div>
359
- </div>
360
- </div>
361
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
362
- <div class="text_cell_render border-box-sizing rendered_html">
363
- <p><code>scatter</code> generates a scatter plot that allows interaction with the parameters to the response functions.
364
- This is different from scatter_drag which facilitates interaction using click and drag actions.</p>
365
- <p>The first two arguments of <code>scatter</code> 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 <code>scatter</code> 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>
366
-
367
- </div>
368
- </div>
369
- </div>
370
-
371
-
372
-
373
- <div class="
374
- cell border-box-sizing code_cell rendered">
375
- <div class="input">
376
-
377
- <div class="inner_cell">
378
- <div class="input_area">
379
- <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>
380
- <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>
381
-
382
- <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>
383
- </pre></div>
384
-
385
- </div>
386
- </div>
387
- </div>
388
-
389
- <div class="output_wrapper">
390
- <div class="output">
391
-
392
-
393
- <div class="output_area">
394
-
395
-
396
-
397
-
398
-
399
- <div class="output_subarea output_widget_view ">
400
- <button class="js-nbinteract-widget">
401
- Loading widgets...
402
- </button>
403
- </div>
404
-
405
- </div>
406
-
407
- </div>
408
- </div>
409
-
410
- </div>
411
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
412
- <div class="text_cell_render border-box-sizing rendered_html">
413
- <h4 id="nbinteract.line"><code>nbinteract.line</code><a class="anchor-link" href="#nbinteract.line">&#182;</a></h4>
414
- </div>
415
- </div>
416
- </div>
417
- <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
418
- <div class="text_cell_render border-box-sizing rendered_html">
419
- <p><code>line</code> generates a scatter plot that allows interaction with the parameters to the response functions.</p>
420
- <p>The first two arguments of <code>line</code> 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 <code>line</code> 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>
421
-
422
- </div>
423
- </div>
424
- </div>
425
-
426
-
427
-
428
- <div class="
429
- cell border-box-sizing code_cell rendered">
430
- <div class="input">
431
-
432
- <div class="inner_cell">
433
- <div class="input_area">
434
- <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>
435
- <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>
436
- <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>
437
-
438
- <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
439
- <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>
440
- <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>
441
- <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">250</span><span class="p">,</span>
442
- <span class="p">}</span>
443
-
444
- <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>
445
- </pre></div>
446
-
447
- </div>
448
- </div>
449
- </div>
450
-
451
- <div class="output_wrapper">
452
- <div class="output">
453
-
454
-
455
- <div class="output_area">
456
-
457
-
458
-
459
-
460
-
461
- <div class="output_subarea output_widget_view ">
462
- <button class="js-nbinteract-widget">
463
- Loading widgets...
464
- </button>
465
- </div>
466
-
467
- </div>
468
-
469
- </div>
470
- </div>
471
-
472
- </div>
473
-
1
+ <div class="cell text_cell">
2
+ <button class="js-nbinteract-widget">
3
+ Loading widgets...
4
+ </button>
5
+ </div>
6
+
7
+
8
+
9
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
10
+ <div class="text_cell_render border-box-sizing rendered_html">
11
+ <h3 id="Plotting-using-nbinteract">Plotting using <code>nbinteract</code><a class="anchor-link" href="#Plotting-using-nbinteract">&#182;</a></h3>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
16
+ <div class="text_cell_render border-box-sizing rendered_html">
17
+ <p><code>nbinteract</code> comes with a set of functions that produce Javascript-based plots designed for interaction.</p>
18
+ <p>Most plotting functions that come with <code>nbinteract</code> take in response functions that return the <strong>data</strong> to be plotted.</p>
19
+
20
+ </div>
21
+ </div>
22
+ </div>
23
+
24
+
25
+
26
+ <div class="
27
+ cell border-box-sizing code_cell rendered">
28
+ <div class="input">
29
+
30
+ <div class="inner_cell">
31
+ <div class="input_area">
32
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">nbinteract</span> <span class="k">as</span> <span class="nn">nbi</span>
33
+ <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</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
+ <p>For a complete API reference for each function, you may type the function name in a cell and add a <code>?</code> at the end. For example, to view the API reference for <code>nbi.hist</code>:</p>
44
+
45
+ </div>
46
+ </div>
47
+ </div>
48
+
49
+
50
+
51
+ <div class="
52
+ cell border-box-sizing code_cell rendered">
53
+ <div class="input">
54
+
55
+ <div class="inner_cell">
56
+ <div class="input_area">
57
+ <div class=" highlight hl-ipython3"><pre><span></span>nbi.hist<span class="o">?</span>
58
+ </pre></div>
59
+
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ </div>
65
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
66
+ <div class="text_cell_render border-box-sizing rendered_html">
67
+ <h4 id="nbinteract.hist"><code>nbinteract.hist</code><a class="anchor-link" href="#nbinteract.hist">&#182;</a></h4>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
72
+ <div class="text_cell_render border-box-sizing rendered_html">
73
+ <p><code>hist</code> generates a histogram that allows interaction with the parameters for the response function.</p>
74
+ <p><code>hist</code> takes in a single response function. The response function returns the array of numerical values that will be shown in the histogram. The <code>hist</code> function allows interaction with the response function's parameters by specifying them as keyword arguments in the same format as <code>ipywidgets.interact</code>. Any argument that can be used for <code>ipywidgets.interact</code> can be used for <code>hist</code>.</p>
75
+
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+
81
+
82
+ <div class="
83
+ cell border-box-sizing code_cell rendered">
84
+ <div class="input">
85
+
86
+ <div class="inner_cell">
87
+ <div class="input_area">
88
+ <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>
89
+ <span class="sd">&#39;&#39;&#39;</span>
90
+ <span class="sd"> Returns 1000 values picked at random from the normal</span>
91
+ <span class="sd"> distribution with the mean and SD given.</span>
92
+ <span class="sd"> &#39;&#39;&#39;</span>
93
+ <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>
94
+ </pre></div>
95
+
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ </div>
101
+
102
+
103
+
104
+ <div class="
105
+ cell border-box-sizing code_cell rendered">
106
+ <div class="input">
107
+
108
+ <div class="inner_cell">
109
+ <div class="input_area">
110
+ <div class=" highlight hl-ipython3"><pre><span></span><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>
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
+ <p>If you interact with the above plot, you may notice that the plot's x and y-axes will automatically scale to match the input data. You can change plot parameters like the axes limits through the <code>options</code> parameter of the plotting functions:</p>
142
+
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+
148
+
149
+ <div class="
150
+ cell border-box-sizing code_cell rendered">
151
+ <div class="input">
152
+
153
+ <div class="inner_cell">
154
+ <div class="input_area">
155
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">options</span> <span class="o">=</span> <span class="p">{</span>
156
+ <span class="s1">&#39;title&#39;</span><span class="p">:</span> <span class="s1">&#39;1000 random points from normal distribution&#39;</span><span class="p">,</span>
157
+ <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">15</span><span class="p">),</span>
158
+ <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="mf">0.4</span><span class="p">),</span>
159
+ <span class="p">}</span>
160
+ <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">options</span><span class="o">=</span><span class="n">options</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>
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
+ <p>You may call <code>nbinteract</code> plotting functions with plain data as the input as well:</p>
192
+
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+
198
+
199
+ <div class="
200
+ cell border-box-sizing code_cell rendered">
201
+ <div class="input">
202
+
203
+ <div class="inner_cell">
204
+ <div class="input_area">
205
+ <div class=" highlight hl-ipython3"><pre><span></span><span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</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">size</span><span class="o">=</span><span class="mi">1000</span><span class="p">))</span>
206
+ </pre></div>
207
+
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="output_wrapper">
213
+ <div class="output">
214
+
215
+
216
+ <div class="output_area">
217
+
218
+
219
+
220
+
221
+
222
+ <div class="output_subarea output_widget_view ">
223
+ <button class="js-nbinteract-widget">
224
+ Loading widgets...
225
+ </button>
226
+ </div>
227
+
228
+ </div>
229
+
230
+ </div>
231
+ </div>
232
+
233
+ </div>
234
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
235
+ <div class="text_cell_render border-box-sizing rendered_html">
236
+ <h4 id="nbinteract.bar"><code>nbinteract.bar</code><a class="anchor-link" href="#nbinteract.bar">&#182;</a></h4>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
241
+ <div class="text_cell_render border-box-sizing rendered_html">
242
+ <p><code>bar</code> generates an bar plot that allows interaction with the parameters for the response functions.</p>
243
+ <p>The first two arguments of <code>bar</code> 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 <code>bar</code> 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>
244
+ <p>For example, in the bar plot below <code>categories</code> generates the categories to plot on the x-axis and <code>heights</code> generates the y-axis heights. The <code>heights</code> function uses the parameter <code>xs</code> which is the array of x-axis data points.</p>
245
+
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+
251
+
252
+ <div class="
253
+ cell border-box-sizing code_cell rendered">
254
+ <div class="input">
255
+
256
+ <div class="inner_cell">
257
+ <div class="input_area">
258
+ <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>
259
+ <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>
260
+
261
+ <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>
262
+ <span class="k">return</span> <span class="n">xs</span> <span class="o">+</span> <span class="n">offset</span>
263
+
264
+ <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
265
+ <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>
266
+ <span class="p">}</span>
267
+
268
+ <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>
269
+ </pre></div>
270
+
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="output_wrapper">
276
+ <div class="output">
277
+
278
+
279
+ <div class="output_area">
280
+
281
+
282
+
283
+
284
+
285
+ <div class="output_subarea output_widget_view ">
286
+ <button class="js-nbinteract-widget">
287
+ Loading widgets...
288
+ </button>
289
+ </div>
290
+
291
+ </div>
292
+
293
+ </div>
294
+ </div>
295
+
296
+ </div>
297
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
298
+ <div class="text_cell_render border-box-sizing rendered_html">
299
+ <h4 id="nbinteract.scatter_drag"><code>nbinteract.scatter_drag</code><a class="anchor-link" href="#nbinteract.scatter_drag">&#182;</a></h4>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
304
+ <div class="text_cell_render border-box-sizing rendered_html">
305
+ <p><code>scatter_drag</code> generates a scatter plot that allows interaction through clicking and dragging the points on the graph.</p>
306
+ <p><code>scatter_drag</code> 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>
307
+ <p><code>scatter_drag</code> does not allow response functions as inputs.</p>
308
+
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+
314
+
315
+ <div class="
316
+ cell border-box-sizing code_cell rendered">
317
+ <div class="input">
318
+
319
+ <div class="inner_cell">
320
+ <div class="input_area">
321
+ <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>
322
+ <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>
323
+
324
+ <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>
325
+
326
+ <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>
327
+ </pre></div>
328
+
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="output_wrapper">
334
+ <div class="output">
335
+
336
+
337
+ <div class="output_area">
338
+
339
+
340
+
341
+
342
+
343
+ <div class="output_subarea output_widget_view ">
344
+ <button class="js-nbinteract-widget">
345
+ Loading widgets...
346
+ </button>
347
+ </div>
348
+
349
+ </div>
350
+
351
+ </div>
352
+ </div>
353
+
354
+ </div>
355
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
356
+ <div class="text_cell_render border-box-sizing rendered_html">
357
+ <h4 id="nbinteract.scatter"><code>nbinteract.scatter</code><a class="anchor-link" href="#nbinteract.scatter">&#182;</a></h4>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
362
+ <div class="text_cell_render border-box-sizing rendered_html">
363
+ <p><code>scatter</code> generates a scatter plot that allows interaction with the parameters to the response functions.
364
+ This is different from scatter_drag which facilitates interaction using click and drag actions.</p>
365
+ <p>The first two arguments of <code>scatter</code> 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 <code>scatter</code> 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>
366
+
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+
372
+
373
+ <div class="
374
+ cell border-box-sizing code_cell rendered">
375
+ <div class="input">
376
+
377
+ <div class="inner_cell">
378
+ <div class="input_area">
379
+ <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>
380
+ <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>
381
+
382
+ <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>
383
+ </pre></div>
384
+
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="output_wrapper">
390
+ <div class="output">
391
+
392
+
393
+ <div class="output_area">
394
+
395
+
396
+
397
+
398
+
399
+ <div class="output_subarea output_widget_view ">
400
+ <button class="js-nbinteract-widget">
401
+ Loading widgets...
402
+ </button>
403
+ </div>
404
+
405
+ </div>
406
+
407
+ </div>
408
+ </div>
409
+
410
+ </div>
411
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
412
+ <div class="text_cell_render border-box-sizing rendered_html">
413
+ <h4 id="nbinteract.line"><code>nbinteract.line</code><a class="anchor-link" href="#nbinteract.line">&#182;</a></h4>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ <div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
418
+ <div class="text_cell_render border-box-sizing rendered_html">
419
+ <p><code>line</code> generates a scatter plot that allows interaction with the parameters to the response functions.</p>
420
+ <p>The first two arguments of <code>line</code> 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 <code>line</code> 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>
421
+
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+
427
+
428
+ <div class="
429
+ cell border-box-sizing code_cell rendered">
430
+ <div class="input">
431
+
432
+ <div class="inner_cell">
433
+ <div class="input_area">
434
+ <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>
435
+ <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>
436
+ <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>
437
+
438
+ <span class="n">opts</span> <span class="o">=</span> <span class="p">{</span>
439
+ <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>
440
+ <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>
441
+ <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">250</span><span class="p">,</span>
442
+ <span class="p">}</span>
443
+
444
+ <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>
445
+ </pre></div>
446
+
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="output_wrapper">
452
+ <div class="output">
453
+
454
+
455
+ <div class="output_area">
456
+
457
+
458
+
459
+
460
+
461
+ <div class="output_subarea output_widget_view ">
462
+ <button class="js-nbinteract-widget">
463
+ Loading widgets...
464
+ </button>
465
+ </div>
466
+
467
+ </div>
468
+
469
+ </div>
470
+ </div>
471
+
472
+ </div>
473
+