Skip to content

Commit 651b2a0

Browse files
authored
Add new appendices on WebGL, contouring and LaTeX (#5)
* Add appendices on WebGL, contouring and LaTeX * Pin jupyter-client<8 * Satisfy black's complaints * Set lod_threshold=None in webgl example
1 parent 7b2d725 commit 651b2a0

File tree

4 files changed

+409
-0
lines changed

4 files changed

+409
-0
lines changed

environment.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ dependencies:
77
- flake8
88
- geojson
99
- geopandas
10+
- jupyter_client<8
1011
- nbqa
1112
- notebook
1213
- pandas

notebooks/appendix_a_webgl.ipynb

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"metadata": {},
6+
"source": [
7+
"<table style=\"float:left; border:none\">\n",
8+
" <tr style=\"border:none\">\n",
9+
" <td style=\"border:none\">\n",
10+
" <a href=\"https://bokeh.org/\" target=\"_blank\">\n",
11+
" <img\n",
12+
" src=\"assets/bokeh-transparent.png\"\n",
13+
" style=\"width:50px\"\n",
14+
" >\n",
15+
" </a>\n",
16+
" </td>\n",
17+
" <td style=\"border:none\">\n",
18+
" <h1>Bokeh Tutorial</h1>\n",
19+
" </td>\n",
20+
" </tr>\n",
21+
"</table>\n",
22+
"\n",
23+
"<div style=\"float:right;\"><a href=\"TOC.ipynb\" target=\"_blank\">Table of contents</a><br><h2>Appendix A: WebGL</h2></div>"
24+
]
25+
},
26+
{
27+
"cell_type": "markdown",
28+
"metadata": {},
29+
"source": [
30+
"Bokeh draws graphics on web pages using HTML Canvas by default. For larger datasets there is another option which is to use WebGL. This provides hardware acceleration of graphics if you have a processor or graphics cards that supports it.\n",
31+
"\n",
32+
"Let's look at an example that compares Canvas and WebGL side-by-side, using a ``hex_tile`` plot which is 2D histogram using hexagons."
33+
]
34+
},
35+
{
36+
"cell_type": "code",
37+
"execution_count": null,
38+
"metadata": {},
39+
"outputs": [],
40+
"source": [
41+
"from bokeh.io import output_notebook, show\n",
42+
"from bokeh.layouts import row\n",
43+
"from bokeh.plotting import figure\n",
44+
"from bokeh.transform import linear_cmap\n",
45+
"from bokeh.util.hex import hexbin\n",
46+
"import numpy as np\n",
47+
"\n",
48+
"output_notebook()"
49+
]
50+
},
51+
{
52+
"cell_type": "code",
53+
"execution_count": null,
54+
"metadata": {},
55+
"outputs": [],
56+
"source": [
57+
"n = 5_000_000\n",
58+
"x = np.random.standard_normal(n)\n",
59+
"y = np.random.standard_normal(n)\n",
60+
"\n",
61+
"bins = hexbin(x, y, 0.01)\n",
62+
"print(f\"Number of hexagons: {len(bins):,}\")"
63+
]
64+
},
65+
{
66+
"cell_type": "code",
67+
"execution_count": null,
68+
"metadata": {},
69+
"outputs": [],
70+
"source": [
71+
"ps = []\n",
72+
"for backend in ([\"canvas\", \"webgl\"]):\n",
73+
" p = figure(title=backend, tools=\"pan, wheel_zoom, box_select, reset\",\n",
74+
" output_backend=backend, width=450, height=450, lod_threshold=None)\n",
75+
" p.grid.visible = False\n",
76+
" p.hex_tile(q=\"q\", r=\"r\", size=1, line_color=None, source=bins,\n",
77+
" fill_color=linear_cmap('counts', 'Plasma256', 0, max(bins.counts)))\n",
78+
" ps.append(p)\n",
79+
"show(row(ps))"
80+
]
81+
},
82+
{
83+
"cell_type": "markdown",
84+
"metadata": {},
85+
"source": [
86+
"Interact with the plots to see how much faster WebGL is in your browser. Things to try:\n",
87+
"\n",
88+
"* Pan using the mouse\n",
89+
"* Zoom using the mouse wheel\n",
90+
"* Select a region of the plot such as one quarter of it, and repeat the pan and zoom"
91+
]
92+
},
93+
{
94+
"cell_type": "markdown",
95+
"metadata": {},
96+
"source": [
97+
"### How much faster is WebGL?\n",
98+
"\n",
99+
"It is difficult to generalize, it depends on the graphics processing hardware you have available. Try it out to see.\n",
100+
"\n",
101+
"\n",
102+
"### How do you enable WebGL?\n",
103+
"\n",
104+
"By using the ``output_backend=\"webgl\"`` keyword argument when creating a ``figure``.\n",
105+
"\n",
106+
"\n",
107+
"### What glyphs are supported by WebGL?\n",
108+
"\n",
109+
"Not all Bokeh glyphs have WebGL support yet, but we are adding more all the time. If you have chosen to use WebGL then Bokeh will use WebGL for the glyphs that it can, and drop back to using Canvas for those not yet supported.\n",
110+
"\n",
111+
"For a full list of glyphs supported using WebGL see the [latest Bokeh documentation](https://docs.bokeh.org/en/latest/docs/user_guide/output/webgl.html#supported-glyphs)"
112+
]
113+
}
114+
],
115+
"metadata": {
116+
"kernelspec": {
117+
"display_name": "Python 3 (ipykernel)",
118+
"language": "python",
119+
"name": "python3"
120+
},
121+
"language_info": {
122+
"codemirror_mode": {
123+
"name": "ipython",
124+
"version": 3
125+
},
126+
"file_extension": ".py",
127+
"mimetype": "text/x-python",
128+
"name": "python",
129+
"nbconvert_exporter": "python",
130+
"pygments_lexer": "ipython3",
131+
"version": "3.11.4"
132+
},
133+
"vscode": {
134+
"interpreter": {
135+
"hash": "0494a81e5f69860dcb844ce8e12eb9c88a7e813ddbfb0fbade72137f5ce45437"
136+
}
137+
}
138+
},
139+
"nbformat": 4,
140+
"nbformat_minor": 2
141+
}
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"metadata": {},
6+
"source": [
7+
"<table style=\"float:left; border:none\">\n",
8+
" <tr style=\"border:none\">\n",
9+
" <td style=\"border:none\">\n",
10+
" <a href=\"https://bokeh.org/\" target=\"_blank\">\n",
11+
" <img\n",
12+
" src=\"assets/bokeh-transparent.png\"\n",
13+
" style=\"width:50px\"\n",
14+
" >\n",
15+
" </a>\n",
16+
" </td>\n",
17+
" <td style=\"border:none\">\n",
18+
" <h1>Bokeh Tutorial</h1>\n",
19+
" </td>\n",
20+
" </tr>\n",
21+
"</table>\n",
22+
"\n",
23+
"<div style=\"float:right;\"><a href=\"TOC.ipynb\" target=\"_blank\">Table of contents</a><br><h2>Appendix B: Contour plots</h2></div>"
24+
]
25+
},
26+
{
27+
"cell_type": "markdown",
28+
"metadata": {},
29+
"source": [
30+
"Bokeh includes contour plots. You can plot both contour lines and filled regions between contour lines with a single ``contour`` call."
31+
]
32+
},
33+
{
34+
"cell_type": "code",
35+
"execution_count": null,
36+
"metadata": {},
37+
"outputs": [],
38+
"source": [
39+
"from bokeh.io import output_notebook, show\n",
40+
"from bokeh.palettes import Sunset\n",
41+
"from bokeh.plotting import figure\n",
42+
"import numpy as np\n",
43+
"\n",
44+
"output_notebook()"
45+
]
46+
},
47+
{
48+
"cell_type": "code",
49+
"execution_count": null,
50+
"metadata": {},
51+
"outputs": [],
52+
"source": [
53+
"# Data to contour is the sum of two Gaussian functions.\n",
54+
"x, y = np.meshgrid(np.linspace(0, 3, 40), np.linspace(0, 2, 30))\n",
55+
"z = 1.3 * np.exp(-2.5 * ((x - 1.3) ** 2 + (y - 0.8) ** 2)) - 1.2 * np.exp(-2 * ((x - 1.8) ** 2 + (y - 1.3) ** 2))"
56+
]
57+
},
58+
{
59+
"cell_type": "code",
60+
"execution_count": null,
61+
"metadata": {},
62+
"outputs": [],
63+
"source": [
64+
"p = figure(width=700, height=400, x_range=(0, 3), y_range=(0, 2))\n",
65+
"\n",
66+
"levels = np.linspace(-1, 1, 9)\n",
67+
"contour_renderer = p.contour(x, y, z, levels, fill_color=Sunset, line_color=\"black\")\n",
68+
"\n",
69+
"colorbar = contour_renderer.construct_color_bar()\n",
70+
"p.add_layout(colorbar, \"right\")\n",
71+
"\n",
72+
"show(p)"
73+
]
74+
},
75+
{
76+
"cell_type": "markdown",
77+
"metadata": {},
78+
"source": [
79+
"Contour lines are calculated and displayed if ``line_color`` is something other than ``None``, and filled contour regions are calculated and displayed if ``fill_color`` is something other than ``None``.\n",
80+
"\n",
81+
"Visual properties (``line``, ``fill`` and ``hatch``) can be specified as scalar or vector properties as usual, such as ``line_width`` and ``hatch_pattern``.\n",
82+
"\n",
83+
"For more information see the Contour plots [topic guide](https://docs.bokeh.org/en/latest/docs/user_guide/topics/contour.html) in the latest Bokeh documentation."
84+
]
85+
}
86+
],
87+
"metadata": {
88+
"kernelspec": {
89+
"display_name": "Python 3 (ipykernel)",
90+
"language": "python",
91+
"name": "python3"
92+
},
93+
"language_info": {
94+
"codemirror_mode": {
95+
"name": "ipython",
96+
"version": 3
97+
},
98+
"file_extension": ".py",
99+
"mimetype": "text/x-python",
100+
"name": "python",
101+
"nbconvert_exporter": "python",
102+
"pygments_lexer": "ipython3",
103+
"version": "3.11.4"
104+
},
105+
"vscode": {
106+
"interpreter": {
107+
"hash": "0494a81e5f69860dcb844ce8e12eb9c88a7e813ddbfb0fbade72137f5ce45437"
108+
}
109+
}
110+
},
111+
"nbformat": 4,
112+
"nbformat_minor": 2
113+
}

0 commit comments

Comments
 (0)