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