Skip to content

Commit 55af325

Browse files
fperezfperez
committed
First dump of materials
0 parents  commit 55af325

24 files changed

+6961
-0
lines changed

‎00.00-introduction.ipynb‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"metadata": {},
6+
"source": [
7+
"# Introduction\n",
8+
"\n",
9+
"The notebook comes alive with the interactive widgets"
10+
]
11+
},
12+
{
13+
"cell_type": "markdown",
14+
"metadata": {},
15+
"source": [
16+
"## Speeding up the bottleneck in the REPL\n",
17+
"\n",
18+
"<img src=\"images/Flow.svg\"></img>"
19+
]
20+
},
21+
{
22+
"cell_type": "code",
23+
"execution_count": 1,
24+
"metadata": {},
25+
"outputs": [
26+
{
27+
"data": {
28+
"text/plain": [
29+
"81"
30+
]
31+
},
32+
"execution_count": 1,
33+
"metadata": {},
34+
"output_type": "execute_result"
35+
}
36+
],
37+
"source": [
38+
"9*9"
39+
]
40+
},
41+
{
42+
"cell_type": "code",
43+
"execution_count": 2,
44+
"metadata": {},
45+
"outputs": [],
46+
"source": [
47+
"def f(x):\n",
48+
" print(x * x)"
49+
]
50+
},
51+
{
52+
"cell_type": "code",
53+
"execution_count": 3,
54+
"metadata": {},
55+
"outputs": [
56+
{
57+
"name": "stdout",
58+
"output_type": "stream",
59+
"text": [
60+
"81\n"
61+
]
62+
}
63+
],
64+
"source": [
65+
"f(9)"
66+
]
67+
},
68+
{
69+
"cell_type": "code",
70+
"execution_count": 4,
71+
"metadata": {},
72+
"outputs": [],
73+
"source": [
74+
"from ipywidgets import *"
75+
]
76+
},
77+
{
78+
"cell_type": "code",
79+
"execution_count": 6,
80+
"metadata": {},
81+
"outputs": [
82+
{
83+
"name": "stdout",
84+
"output_type": "stream",
85+
"text": [
86+
"2500\n"
87+
]
88+
}
89+
],
90+
"source": [
91+
"interact(f, x=(0, 100));"
92+
]
93+
},
94+
{
95+
"cell_type": "markdown",
96+
"metadata": {},
97+
"source": [
98+
"# Interactive Jupyter widgets\n",
99+
"\n",
100+
"A Python widget is an object that represents a control on the front end, like a slider. A single control can be displayed multiple times - they all represent the same python object."
101+
]
102+
},
103+
{
104+
"cell_type": "code",
105+
"execution_count": 8,
106+
"metadata": {},
107+
"outputs": [
108+
{
109+
"data": {
110+
"application/vnd.jupyter.widget-view+json": {
111+
"model_id": "a42ce83f9eb64c89bd792578c8373a34",
112+
"version_major": 2,
113+
"version_minor": 0
114+
},
115+
"text/plain": [
116+
"FloatSlider(value=7.5, description='Input:', max=10.0, min=5.0)"
117+
]
118+
},
119+
"metadata": {},
120+
"output_type": "display_data"
121+
}
122+
],
123+
"source": [
124+
"slider = FloatSlider(\n",
125+
" value=7.5,\n",
126+
" min=5.0,\n",
127+
" max=10.0,\n",
128+
" step=0.1,\n",
129+
" description='Input:',\n",
130+
")\n",
131+
"\n",
132+
"slider"
133+
]
134+
},
135+
{
136+
"cell_type": "code",
137+
"execution_count": 9,
138+
"metadata": {},
139+
"outputs": [
140+
{
141+
"data": {
142+
"application/vnd.jupyter.widget-view+json": {
143+
"model_id": "a42ce83f9eb64c89bd792578c8373a34",
144+
"version_major": 2,
145+
"version_minor": 0
146+
},
147+
"text/plain": [
148+
"FloatSlider(value=7.5, description='Input:', max=10.0, min=5.0)"
149+
]
150+
},
151+
"metadata": {},
152+
"output_type": "display_data"
153+
}
154+
],
155+
"source": [
156+
"slider"
157+
]
158+
},
159+
{
160+
"cell_type": "markdown",
161+
"metadata": {},
162+
"source": [
163+
"The control attributes, like its value, are automatically synced between the frontend and the kernel."
164+
]
165+
},
166+
{
167+
"cell_type": "code",
168+
"execution_count": 10,
169+
"metadata": {},
170+
"outputs": [
171+
{
172+
"data": {
173+
"text/plain": [
174+
"7.5"
175+
]
176+
},
177+
"execution_count": 10,
178+
"metadata": {},
179+
"output_type": "execute_result"
180+
}
181+
],
182+
"source": [
183+
"slider.value"
184+
]
185+
},
186+
{
187+
"cell_type": "code",
188+
"execution_count": 11,
189+
"metadata": {},
190+
"outputs": [],
191+
"source": [
192+
"slider.value = 8"
193+
]
194+
},
195+
{
196+
"cell_type": "markdown",
197+
"metadata": {},
198+
"source": [
199+
"You can trigger actions in the kernel when a control value changes by \"observing\" the value. Here we set a global variable when the slider value changes."
200+
]
201+
},
202+
{
203+
"cell_type": "code",
204+
"execution_count": null,
205+
"metadata": {
206+
"collapsed": true,
207+
"jupyter": {
208+
"outputs_hidden": true
209+
},
210+
"scrolled": true
211+
},
212+
"outputs": [],
213+
"source": [
214+
"square = slider.value * slider.value\n",
215+
"def handle_change(change):\n",
216+
" global square\n",
217+
" square = change.new * change.new\n",
218+
"slider.observe(handle_change, 'value')"
219+
]
220+
},
221+
{
222+
"cell_type": "code",
223+
"execution_count": null,
224+
"metadata": {},
225+
"outputs": [],
226+
"source": [
227+
"square"
228+
]
229+
},
230+
{
231+
"cell_type": "markdown",
232+
"metadata": {},
233+
"source": [
234+
"You can link control attributes and lay them out together."
235+
]
236+
},
237+
{
238+
"cell_type": "code",
239+
"execution_count": null,
240+
"metadata": {},
241+
"outputs": [],
242+
"source": [
243+
"text = FloatText(description='Value')\n",
244+
"link((slider, 'value'), (text, 'value'))\n",
245+
"VBox([slider, text])"
246+
]
247+
},
248+
{
249+
"cell_type": "markdown",
250+
"metadata": {},
251+
"source": [
252+
"# Jupyter widgets as a framework\n",
253+
"\n",
254+
"Jupyter widgets forms a framework for representing python objects interactively. Some large open-source interactive controls based on Jupyter widgets include:\n",
255+
"\n",
256+
" - bqplot - 2d plotting library\n",
257+
" - pythreejs - low-level 3d graphics library\n",
258+
" - ipyvolume - high-level 3d graphics library\n",
259+
" - ipyleaflet - maps"
260+
]
261+
}
262+
],
263+
"metadata": {
264+
"kernelspec": {
265+
"display_name": "Python 3",
266+
"language": "python",
267+
"name": "python3"
268+
},
269+
"language_info": {
270+
"codemirror_mode": {
271+
"name": "ipython",
272+
"version": 3
273+
},
274+
"file_extension": ".py",
275+
"mimetype": "text/x-python",
276+
"name": "python",
277+
"nbconvert_exporter": "python",
278+
"pygments_lexer": "ipython3",
279+
"version": "3.7.3"
280+
},
281+
"widgets": {
282+
"state": {
283+
"0cb2d81d826b4e25aba3b1d39711ef3f": {
284+
"views": [
285+
{
286+
"cell_index": 6
287+
}
288+
]
289+
},
290+
"2cfe6521f9834ca69e54518716104cd2": {
291+
"views": [
292+
{
293+
"cell_index": 8
294+
},
295+
{
296+
"cell_index": 9
297+
},
298+
{
299+
"cell_index": 12
300+
}
301+
]
302+
},
303+
"889356d59ac543a49da33d134d791c3f": {
304+
"views": [
305+
{
306+
"cell_index": 11
307+
}
308+
]
309+
}
310+
},
311+
"version": "2.0.0-dev"
312+
}
313+
},
314+
"nbformat": 4,
315+
"nbformat_minor": 4
316+
}

‎01.00-overview.ipynb‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"metadata": {},
6+
"source": [
7+
"# Overview\n",
8+
"\n",
9+
"Behind the scenes, even pure Python widgets are composed of two pieces:\n",
10+
"\n",
11+
"+ Python, which runs in the notebook kernel.\n",
12+
"+ Javascript, which runs in the browser.\n",
13+
"\n",
14+
"When writing your own widgets, that means making a choice: write only in Python or write in both Python and Javascript.\n",
15+
"\n",
16+
"Which to choose depends on what you are trying to accomplish. This tutorial will focus on writing your own widgets in pure Python. An example of a pure-Python package that includes some interesting interfaces is [reducer](http://reducer.readthedocs.io), a package for calibrating astronomical data.\n",
17+
"\n",
18+
"What you can accomplish with just Python has increased quite a bit in the last year or two as more sophisticated tools that plug in to the Jupyter widget ecosystem have been written.\n",
19+
"\n",
20+
"One of those tools is [bqplot](https://github.com/bloomberg/bqplot/blob/master/examples/Index.ipynb), which provides a plotting tools in which the plot, and the lines, markers, labels and legend, all act as widgets. That required both Python *and* javascript. On the javacsript side bqplot uses [d3](https://d3js.org/) to do the drawing in the browser. \n",
21+
"\n",
22+
"Another example is [ipyvolume](https://ipyvolume.readthedocs.io/en/latest/), which does three-dimensional renderings of point or volumetric data in the browser. It has both Python and javascript pieces.\n",
23+
"\n",
24+
"One last addition is in `ipywidgets` itself: the new `Output` widget can display any content which can be rendered in a Jupyter notebook. That means that anything you can show in a notebook you can include in a widget using only Python."
25+
]
26+
},
27+
{
28+
"cell_type": "markdown",
29+
"metadata": {},
30+
"source": [
31+
"## Our destination, in a nutshell\n",
32+
"\n",
33+
"+ Green: [pythreejs](https://github.com/jupyter-widgets/pythreejs)\n",
34+
"+ Blue: [bqplot](https://github.com/bloomberg/bqplot/blob/master/examples/Index.ipynb)\n",
35+
"+ Everything else: [ipywidgets](https://github.com/jupyter-widgets/ipywidgets)\n",
36+
"+ Serving it up to users during development on [mybinder.org](https://mybinder.org/)\n",
37+
"\n",
38+
"![Binary Star Simulator](images/Binary_Star_Sim.png)\n",
39+
"\n",
40+
"### Source for this example (including links to binder): https://github.com/JuanCab/AstroInteractives\n",
41+
"\n",
42+
"[Video](https://youtu.be/kbgST0uifvM)"
43+
]
44+
}
45+
],
46+
"metadata": {
47+
"kernelspec": {
48+
"display_name": "Python 3",
49+
"language": "python",
50+
"name": "python3"
51+
},
52+
"language_info": {
53+
"codemirror_mode": {
54+
"name": "ipython",
55+
"version": 3
56+
},
57+
"file_extension": ".py",
58+
"mimetype": "text/x-python",
59+
"name": "python",
60+
"nbconvert_exporter": "python",
61+
"pygments_lexer": "ipython3",
62+
"version": "3.7.3"
63+
}
64+
},
65+
"nbformat": 4,
66+
"nbformat_minor": 4
67+
}

0 commit comments

Comments
 (0)