Skip to content

Commit 4fb05f7

Browse files
jubajuba
committed
doc: update Colab notebooks
1 parent 5ecffe1 commit 4fb05f7

File tree

2 files changed

+167
-159
lines changed

2 files changed

+167
-159
lines changed

‎examples/interactivity.ipynb

+155-151
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,157 @@
11
{
2-
"cells": [
3-
{
4-
"attachments": {},
5-
"cell_type": "markdown",
6-
"metadata": {},
7-
"source": [
8-
"# pyobsplot - jupyter interactivity\n",
9-
"\n",
10-
"**Note :** this notebook is designed to be used on [Google Colab](https://colab.research.google.com/github/juba/pyobsplot/blob/main/examples/introduction.ipynb).\n",
11-
"\n",
12-
"[pyobsplot](https://github.com/juba/pyobsplot) is a Python package which allows to use Observable Plot in Jupyter notebooks with a syntax as close as possible to the JavaScript one. For more information, see the [documentation website](https://juba.github.io/pyobsplot).\n",
13-
"\n",
14-
"When using the `widget` renderer, the fact that plots are generated as Jupyter widgets allow for basic interactivity. More specifically, you can set the spec attribute of an existing `pyobsplot` plot to another plot specification and it will update it.\n",
15-
"\n",
16-
"First we install the `pyobsplot` package in the Colab environment:\n"
17-
]
18-
},
19-
{
20-
"cell_type": "code",
21-
"execution_count": null,
22-
"metadata": {},
23-
"outputs": [],
24-
"source": [
25-
"# Only needed in Colab, cleanup environment\n",
26-
"! pip uninstall -y pandas-gbq\n",
27-
"# Install pyobsplot\n",
28-
"! pip install pyobsplot"
29-
]
30-
},
31-
{
32-
"attachments": {},
33-
"cell_type": "markdown",
34-
"metadata": {},
35-
"source": [
36-
"Then we load the needed modules and data:\n"
37-
]
38-
},
39-
{
40-
"cell_type": "code",
41-
"execution_count": 1,
42-
"metadata": {},
43-
"outputs": [],
44-
"source": [
45-
"import polars as pl\n",
46-
"from IPython.display import display\n",
47-
"from ipywidgets import IntSlider\n",
48-
"\n",
49-
"from pyobsplot import Plot\n",
50-
"\n",
51-
"penguins = pl.read_csv(\n",
52-
" \"https://github.com/juba/pyobsplot/raw/main/doc/data/penguins.csv\"\n",
53-
")"
54-
]
55-
},
56-
{
57-
"attachments": {},
58-
"cell_type": "markdown",
59-
"metadata": {},
60-
"source": [
61-
"The next step is to create a `generate_plot` function which takes an opacity value as input and returns a plot specification. We create our starting plot with an opacity value of 1.\n"
62-
]
63-
},
64-
{
65-
"cell_type": "code",
66-
"execution_count": 2,
67-
"metadata": {},
68-
"outputs": [],
69-
"source": [
70-
"def generate_plot_spec(opacity):\n",
71-
" return {\n",
72-
" \"grid\": True,\n",
73-
" \"marks\": [\n",
74-
" Plot.rectY(\n",
75-
" penguins,\n",
76-
" Plot.binX(\n",
77-
" {\"y\": \"count\"},\n",
78-
" {\"x\": \"body_mass_g\", \"fill\": \"steelblue\", \"fillOpacity\": opacity},\n",
79-
" ),\n",
80-
" ),\n",
81-
" Plot.ruleY([0]),\n",
82-
" ],\n",
83-
" }\n",
84-
"\n",
85-
"\n",
86-
"plot = Plot.plot(generate_plot_spec(1))"
87-
]
88-
},
89-
{
90-
"attachments": {},
91-
"cell_type": "markdown",
92-
"metadata": {},
93-
"source": [
94-
"Now we create an `IntSlider` input widget and observe its value with a new `update_plot` function which generates a new specification with the updated opacity value, and stores it as the `spec` plot attribute.\n"
95-
]
96-
},
97-
{
98-
"cell_type": "code",
99-
"execution_count": 3,
100-
"metadata": {},
101-
"outputs": [],
102-
"source": [
103-
"def update_plot(change):\n",
104-
" new = change[\"new\"]\n",
105-
" plot.spec = generate_plot_spec(new / 100) # type: ignore\n",
106-
"\n",
107-
"\n",
108-
"w = IntSlider(value=100, min=0, max=100)\n",
109-
"w.observe(update_plot, names=\"value\")"
110-
]
111-
},
112-
{
113-
"attachments": {},
114-
"cell_type": "markdown",
115-
"metadata": {},
116-
"source": [
117-
"Finally we can display both our input widget and our plot.\n"
118-
]
119-
},
120-
{
121-
"cell_type": "code",
122-
"execution_count": null,
123-
"metadata": {},
124-
"outputs": [],
125-
"source": [
126-
"display(w)\n",
127-
"display(plot)"
128-
]
129-
}
130-
],
131-
"metadata": {
132-
"kernelspec": {
133-
"display_name": "Python 3",
134-
"language": "python",
135-
"name": "python3"
136-
},
137-
"language_info": {
138-
"codemirror_mode": {
139-
"name": "ipython",
140-
"version": 3
141-
},
142-
"file_extension": ".py",
143-
"mimetype": "text/x-python",
144-
"name": "python",
145-
"nbconvert_exporter": "python",
146-
"pygments_lexer": "ipython3",
147-
"version": "3.11.9"
148-
},
149-
"orig_nbformat": 4
150-
},
151-
"nbformat": 4,
152-
"nbformat_minor": 2
2+
"cells": [
3+
{
4+
"attachments": {},
5+
"cell_type": "markdown",
6+
"metadata": {},
7+
"source": [
8+
"# pyobsplot - jupyter interactivity\n",
9+
"\n",
10+
"**Note :** this notebook is designed to be used on [Google Colab](https://colab.research.google.com/github/juba/pyobsplot/blob/main/examples/introduction.ipynb).\n",
11+
"\n",
12+
"[pyobsplot](https://github.com/juba/pyobsplot) is a Python package which allows to use Observable Plot in Jupyter notebooks with a syntax as close as possible to the JavaScript one. For more information, see the [documentation website](https://juba.github.io/pyobsplot).\n",
13+
"\n",
14+
"When using the `widget` renderer, the fact that plots are generated as Jupyter widgets allow for basic interactivity. More specifically, you can set the spec attribute of an existing `pyobsplot` plot to another plot specification and it will update it.\n",
15+
"\n",
16+
"First we install the `pyobsplot` package in the Colab environment:\n"
17+
]
18+
},
19+
{
20+
"cell_type": "code",
21+
"execution_count": null,
22+
"metadata": {},
23+
"outputs": [],
24+
"source": [
25+
"# Install pyobsplot\n",
26+
"! pip install pyobsplot[typst]"
27+
]
28+
},
29+
{
30+
"attachments": {},
31+
"cell_type": "markdown",
32+
"metadata": {},
33+
"source": [
34+
"Then we load the needed modules and data:\n"
35+
]
36+
},
37+
{
38+
"cell_type": "code",
39+
"execution_count": 1,
40+
"metadata": {},
41+
"outputs": [],
42+
"source": [
43+
"import polars as pl\n",
44+
"from IPython.display import display\n",
45+
"from ipywidgets import IntSlider\n",
46+
"\n",
47+
"from pyobsplot import Plot\n",
48+
"\n",
49+
"penguins = pl.read_csv(\n",
50+
" \"https://github.com/juba/pyobsplot/raw/main/doc/data/penguins.csv\"\n",
51+
")"
52+
]
53+
},
54+
{
55+
"attachments": {},
56+
"cell_type": "markdown",
57+
"metadata": {},
58+
"source": [
59+
"The next step is to create a `generate_plot` function which takes an opacity value as input and returns a plot specification. We create our starting plot with an opacity value of 1.\n"
60+
]
61+
},
62+
{
63+
"cell_type": "code",
64+
"execution_count": 2,
65+
"metadata": {},
66+
"outputs": [],
67+
"source": [
68+
"def generate_plot_spec(opacity):\n",
69+
" return {\n",
70+
" \"grid\": True,\n",
71+
" \"marks\": [\n",
72+
" Plot.rectY(\n",
73+
" penguins,\n",
74+
" Plot.binX(\n",
75+
" {\"y\": \"count\"},\n",
76+
" {\"x\": \"body_mass_g\", \"fill\": \"steelblue\", \"fillOpacity\": opacity},\n",
77+
" ),\n",
78+
" ),\n",
79+
" Plot.ruleY([0]),\n",
80+
" ],\n",
81+
" }\n",
82+
"\n",
83+
"\n",
84+
"plot = Plot.plot(generate_plot_spec(1))"
85+
]
86+
},
87+
{
88+
"attachments": {},
89+
"cell_type": "markdown",
90+
"metadata": {},
91+
"source": [
92+
"Now we create an `IntSlider` input widget and observe its value with a new `update_plot` function which generates a new specification with the updated opacity value, and stores it as the `spec` plot attribute.\n"
93+
]
94+
},
95+
{
96+
"cell_type": "code",
97+
"execution_count": 3,
98+
"metadata": {},
99+
"outputs": [],
100+
"source": [
101+
"def update_plot(change):\n",
102+
" new = change[\"new\"]\n",
103+
" plot.spec = generate_plot_spec(new / 100) # type: ignore\n",
104+
"\n",
105+
"\n",
106+
"w = IntSlider(value=100, min=0, max=100)\n",
107+
"w.observe(update_plot, names=\"value\")"
108+
]
109+
},
110+
{
111+
"attachments": {},
112+
"cell_type": "markdown",
113+
"metadata": {},
114+
"source": [
115+
"Finally we can display both our input widget and our plot.\n"
116+
]
117+
},
118+
{
119+
"cell_type": "code",
120+
"execution_count": null,
121+
"metadata": {},
122+
"outputs": [],
123+
"source": [
124+
"display(w)\n",
125+
"display(plot)"
126+
]
127+
}
128+
],
129+
"metadata": {
130+
"kernelspec": {
131+
"display_name": "Python 3 (ipykernel)",
132+
"language": "python",
133+
"name": "python3"
134+
},
135+
"language_info": {
136+
"codemirror_mode": {
137+
"name": "ipython",
138+
"version": 3
139+
},
140+
"file_extension": ".py",
141+
"mimetype": "text/x-python",
142+
"name": "python",
143+
"nbconvert_exporter": "python",
144+
"pygments_lexer": "ipython3",
145+
"version": "3.12.9"
146+
},
147+
"widgets": {
148+
"application/vnd.jupyter.widget-state+json": {
149+
"state": {},
150+
"version_major": 2,
151+
"version_minor": 0
152+
}
153+
}
154+
},
155+
"nbformat": 4,
156+
"nbformat_minor": 4
153157
}

‎examples/introduction.ipynb

+12-8
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,8 @@
2222
"metadata": {},
2323
"outputs": [],
2424
"source": [
25-
"# Only needed in Colab, cleanup environment\n",
26-
"! pip uninstall -y pandas-gbq\n",
2725
"# Install pyobsplot\n",
28-
"! pip install pyobsplot"
26+
"! pip install pyobsplot[typst]"
2927
]
3028
},
3129
{
@@ -198,7 +196,7 @@
198196
"cell_type": "markdown",
199197
"metadata": {},
200198
"source": [
201-
"Sometimes a plot specification includes some JavaScript code. To add those to a plot specification we have to pass it as a string and wrap it into the `js()` method:\n"
199+
"Sometimes an Observable Plot specification includes some JavaScript code. To add those to a `pyobsplot` specification we have to pass it as a string and wrap it into the `js()` method:\n"
202200
]
203201
},
204202
{
@@ -246,7 +244,7 @@
246244
],
247245
"metadata": {
248246
"kernelspec": {
249-
"display_name": "pyobsplot-IeWpVr3Z-py3.10",
247+
"display_name": "Python 3 (ipykernel)",
250248
"language": "python",
251249
"name": "python3"
252250
},
@@ -260,10 +258,16 @@
260258
"name": "python",
261259
"nbconvert_exporter": "python",
262260
"pygments_lexer": "ipython3",
263-
"version": "3.11.9"
261+
"version": "3.12.9"
264262
},
265-
"orig_nbformat": 4
263+
"widgets": {
264+
"application/vnd.jupyter.widget-state+json": {
265+
"state": {},
266+
"version_major": 2,
267+
"version_minor": 0
268+
}
269+
}
266270
},
267271
"nbformat": 4,
268-
"nbformat_minor": 2
272+
"nbformat_minor": 4
269273
}

0 commit comments

Comments
 (0)