"
23 | ]
24 | },
25 | {
26 | "cell_type": "markdown",
27 | "metadata": {},
28 | "source": [
29 | "# Additional resources\n",
30 | "\n",
31 | "There are lots of things we haven't had time to tell you about. In general to learn more about bokeh, the following resources will hopefully be helpful:\n",
32 | "\n"
33 | ]
34 | },
35 | {
36 | "cell_type": "markdown",
37 | "metadata": {},
38 | "source": [
39 | "## Doumentation\n",
40 | "\n",
41 | "##### Main Page - https://bokeh.org \n",
42 | "\n",
43 | "The main front page, with links to many other resources\n",
44 | "\n",
45 | "---\n",
46 | "\n",
47 | "##### Documentation - https://docs.bokeh.org/en/latest \n",
48 | "\n",
49 | "The documentation toplevel page\n",
50 | "\n",
51 | "---\n",
52 | "\n",
53 | "##### User's Guide - https://docs.bokeh.org/en/latest/docs/user_guide.html\n",
54 | "\n",
55 | "The user's guide has many top-oriented subsections, for example \"Plotting with Basic Glyphs\", \"Configuring Plot Tools\", or \"Adding Interactions\". Each user's guide section typically example code and corresponding live plots that demonstrate how to accomplish various tasks. \n",
56 | "\n",
57 | "---\n",
58 | "\n",
59 | "##### Gallery - https://docs.bokeh.org/en/latest/docs/gallery.html\n",
60 | "\n",
61 | "One of the best ways to learn is to find an existing example similar to what you want, and to study it and then use it as a starting place. Starting from a known working example can often save time and effort when getting started by allowing you to make small, incremental changes and observing the outcome. The Bokeh docs have a large thumbnail gallery that links to live plots and apps with corresponding code. \n",
62 | "\n",
63 | "\n",
64 | "---\n",
65 | "\n",
66 | "##### Reference Guide - https://docs.bokeh.org/en/latest/docs/reference.html\n",
67 | "\n",
68 | "If you are already familiar with Bokeh and have questions about specific details of the obejcts you are already using, the reference guide is a good resource for finding information. The reference guide is automatically generated from the project source code and is a complete resources for all bokeh models and their properties. \n",
69 | "\n",
70 | "---\n",
71 | "\n",
72 | "\n",
73 | "\n",
74 | "##### Issue tracker - https://github.com/bokeh/bokeh/issues\n",
75 | "\n",
76 | "The GitHub issue tracker is the place to go to submit ***bug reports*** and ***feature requests***. It it NOT the right place for general support questions (see the *General Community Support* links below).\n",
77 | "\n"
78 | ]
79 | },
80 | {
81 | "cell_type": "markdown",
82 | "metadata": {},
83 | "source": [
84 | "## Example apps and Scripts\n",
85 | "\n",
86 | "In addition to all the live gallery examples, Bokeh has many additional scripts and apps that can be instructive to study and emulate. \n",
87 | "\n",
88 | "##### Examples folder - https://github.com/bokeh/bokeh/tree/master/examples/\n",
89 | "\n",
90 | "The `examples` directory has many subfolders dedicated to different kinds of topics. Some of the hightlights are:\n",
91 | "\n",
92 | "* `app` - example Bokeh apps, run with \"`bokeh serve`\"\n",
93 | "* `howto` - some examples arranged around specific topics such as layout or notebook comms\n",
94 | "* `models` - examples that demonstrate the low-level `bokeh.models` API\n",
95 | "* `plotting` - a large collections of examples using the `bokeh.plotting` interface\n",
96 | "* `webgl` - some examples demonstrating WebGL usage\n",
97 | "\n",
98 | "---\n",
99 | "\n"
100 | ]
101 | },
102 | {
103 | "cell_type": "markdown",
104 | "metadata": {},
105 | "source": [
106 | "## General Commnity Support\n",
107 | "\n",
108 | "Bokeh has a large and growing community. The best place to go for general support questions (either to ask, or to answer!) is https://discourse.bokeh.org\n",
109 | "\n"
110 | ]
111 | },
112 | {
113 | "cell_type": "markdown",
114 | "metadata": {},
115 | "source": [
116 | "## Contributor Resources\n",
117 | "\n",
118 | "Bokeh has a small but growing developer community. We are always looking to have new contributors. Below are some resources for people involved in working on Bokeh itself.\n",
119 | "\n",
120 | "##### Source code - https://github.com/bokeh/bokeh\n",
121 | "\n",
122 | "Go here to clone the GitHub repo (in order to contribute or get the examples), or to submit issues to the issue tracker \n",
123 | "\n",
124 | "---\n",
125 | "\n",
126 | "##### Issue tracker - https://github.com/bokeh/bokeh/issues\n",
127 | "\n",
128 | "The GitHub issue tracker is the place to go to submit ***bug reports*** and ***feature requests***. For general support questions, see the *General Community Support* links above.\n",
129 | "\n",
130 | "---\n",
131 | "\n",
132 | "#### Developer's Guide - https://bokeh.pydata.org/en/latest/docs/dev_guide.html\n",
133 | "\n",
134 | "If you are interesting in becoming a contributor to Bokeh, the developer's guide is the place to start. It has information about getting a development environment set up, the library architecture, writing and running tests, \n",
135 | "\n",
136 | "---\n",
137 | "\n",
138 | "#### Dev Channel in Discourse - https://discourse.bokeh.org/c/development\n",
139 | "\n",
140 | "Come here for assistance with any questions about developing Bokeh itself. \n"
141 | ]
142 | },
143 | {
144 | "cell_type": "markdown",
145 | "metadata": {},
146 | "source": [
147 | "# Next Section"
148 | ]
149 | },
150 | {
151 | "cell_type": "markdown",
152 | "metadata": {},
153 | "source": [
154 | "This is the last section of the appendices.\n",
155 | "\n",
156 | "To go back to the overview, click [here](00%20-%20Introduction%20and%20Setup.ipynb)."
157 | ]
158 | },
159 | {
160 | "cell_type": "code",
161 | "execution_count": null,
162 | "metadata": {},
163 | "outputs": [],
164 | "source": []
165 | }
166 | ],
167 | "metadata": {
168 | "kernelspec": {
169 | "display_name": "Python 3",
170 | "language": "python",
171 | "name": "python3"
172 | },
173 | "language_info": {
174 | "codemirror_mode": {
175 | "name": "ipython",
176 | "version": 3
177 | },
178 | "file_extension": ".py",
179 | "mimetype": "text/x-python",
180 | "name": "python",
181 | "nbconvert_exporter": "python",
182 | "pygments_lexer": "ipython3",
183 | "version": "3.7.6"
184 | }
185 | },
186 | "nbformat": 4,
187 | "nbformat_minor": 4
188 | }
189 |
--------------------------------------------------------------------------------
/tutorial/11 - Running Bokeh Applications.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "metadata": {},
6 | "source": [
7 | "
"
24 | ]
25 | },
26 | {
27 | "cell_type": "markdown",
28 | "metadata": {},
29 | "source": [
30 | "The architecture of Bokeh is such that high-level “model objects” (representing things like plots, ranges, axes, glyphs, etc.) are created in Python, and then converted to a JSON format that is consumed by the client library, BokehJS. Using the Bokeh Server, it is possible to keep the “model objects” in python and in the browser in sync with one another, creating powerful capabilities:\n",
31 | "\n",
32 | "* respond to UI and tool events generated in a browser with computations or queries using the full power of python\n",
33 | "* automatically push updates the UI (i.e. widgets or plots), in a browser\n",
34 | "* use periodic, timeout, and asychronous callbacks drive streaming updates\n",
35 | "\n",
36 | "***This capability to synchronize between python and the browser is the main purpose of the Bokeh Server.***"
37 | ]
38 | },
39 | {
40 | "cell_type": "code",
41 | "execution_count": null,
42 | "metadata": {},
43 | "outputs": [],
44 | "source": [
45 | "from bokeh.io import output_notebook, show\n",
46 | "output_notebook()"
47 | ]
48 | },
49 | {
50 | "cell_type": "markdown",
51 | "metadata": {},
52 | "source": [
53 | "## Bokeh Apps in Notebooks\n",
54 | "\n",
55 | "The easiest way to embed a Bokeh application in a notebook is to make a function `modify_doc(doc)` that creates Bokeh content, and adds it to the document. This function can be passed to `show`, and the app defined by the function will be displayed inline. A short complete example is below"
56 | ]
57 | },
58 | {
59 | "cell_type": "code",
60 | "execution_count": null,
61 | "metadata": {},
62 | "outputs": [],
63 | "source": [
64 | "from bokeh.layouts import column\n",
65 | "from bokeh.models import TextInput, Button, Paragraph\n",
66 | "\n",
67 | "def modify_doc(doc):\n",
68 | " \n",
69 | " # create some widgets\n",
70 | " button = Button(label=\"Say HI\")\n",
71 | " input = TextInput(value=\"Bokeh\")\n",
72 | " output = Paragraph()\n",
73 | "\n",
74 | " # add a callback to a widget\n",
75 | " def update():\n",
76 | " output.text = \"Hello, \" + input.value\n",
77 | " button.on_click(update)\n",
78 | "\n",
79 | " # create a layout for everything\n",
80 | " layout = column(button, input, output)\n",
81 | "\n",
82 | " # add the layout to curdoc\n",
83 | " doc.add_root(layout)\n",
84 | " \n",
85 | "# In the notebook, just pass the function that defines the app to show\n",
86 | "# You may need to supply notebook_url, e.g notebook_url=\"http://localhost:8889\" \n",
87 | "show(modify_doc) "
88 | ]
89 | },
90 | {
91 | "cell_type": "code",
92 | "execution_count": null,
93 | "metadata": {},
94 | "outputs": [],
95 | "source": [
96 | "# EXERCISE: add a Select widget to this example that offers several different greetings\n",
97 | "\n"
98 | ]
99 | },
100 | {
101 | "cell_type": "markdown",
102 | "metadata": {},
103 | "source": [
104 | "## Bokeh Apps with `bokeh serve`\n",
105 | "\n",
106 | "It's also possible to define Bokeh applications by creating a standard Python script. In this case, there is no need to make a function like `modify_doc`. Typically, the script should simply create all the bokeh cotent, then add it to the doc with a line like\n",
107 | "```python\n",
108 | "curdoc().add_root(layout)\n",
109 | "```\n",
110 | "\n",
111 | "To try out the example below, copy the code into a file ``hello.py`` and then execute:\n",
112 | "```bash\n",
113 | "bokeh serve --show hello.py \n",
114 | "```\n",
115 | "\n",
116 | "
NOTE: The exercise below require work outside the notebook
"
117 | ]
118 | },
119 | {
120 | "cell_type": "markdown",
121 | "metadata": {},
122 | "source": [
123 | "```python\n",
124 | "# hello.py \n",
125 | "\n",
126 | "from bokeh.io import curdoc\n",
127 | "from bokeh.layouts import column\n",
128 | "from bokeh.models.widgets import TextInput, Button, Paragraph\n",
129 | "\n",
130 | "# create some widgets\n",
131 | "button = Button(label=\"Say HI\")\n",
132 | "input = TextInput(value=\"Bokeh\")\n",
133 | "output = Paragraph()\n",
134 | "\n",
135 | "# add a callback to a widget\n",
136 | "def update():\n",
137 | " output.text = \"Hello, \" + input.value\n",
138 | "button.on_click(update)\n",
139 | "\n",
140 | "# create a layout for everything\n",
141 | "layout = column(button, input, output)\n",
142 | "\n",
143 | "# add the layout to curdoc\n",
144 | "curdoc().add_root(layout)\n",
145 | "```"
146 | ]
147 | },
148 | {
149 | "cell_type": "markdown",
150 | "metadata": {},
151 | "source": [
152 | "Copy this code to a script `hello.py` and run it with the Bokeh server."
153 | ]
154 | },
155 | {
156 | "cell_type": "markdown",
157 | "metadata": {},
158 | "source": [
159 | "## Linking Plots and Widgets\n",
160 | "\n",
161 | "Lets take a look at a more involved example that links several widgets to a plot. "
162 | ]
163 | },
164 | {
165 | "cell_type": "code",
166 | "execution_count": null,
167 | "metadata": {},
168 | "outputs": [],
169 | "source": [
170 | "from numpy.random import random\n",
171 | "\n",
172 | "from bokeh.layouts import column, row\n",
173 | "from bokeh.plotting import figure\n",
174 | "from bokeh.models import ColumnDataSource, Select, TextInput\n",
175 | "\n",
176 | "def get_data(N):\n",
177 | " return dict(x=random(size=N), y=random(size=N), r=random(size=N) * 0.03)\n",
178 | "\n",
179 | "COLORS = [\"black\", \"firebrick\", \"navy\", \"olive\", \"goldenrod\"]\n",
180 | "\n",
181 | "def modify_doc(doc):\n",
182 | " source = ColumnDataSource(data=get_data(200))\n",
183 | "\n",
184 | " p = figure(tools=\"\", toolbar_location=None)\n",
185 | " r = p.circle(x='x', y='y', radius='r', source=source,\n",
186 | " color=\"navy\", alpha=0.6, line_color=\"white\")\n",
187 | "\n",
188 | " \n",
189 | " select = Select(title=\"Color\", value=\"navy\", options=COLORS)\n",
190 | " input = TextInput(title=\"Number of points\", value=\"200\")\n",
191 | "\n",
192 | " def update_color(attrname, old, new):\n",
193 | " r.glyph.fill_color = select.value\n",
194 | " select.on_change('value', update_color)\n",
195 | "\n",
196 | " def update_points(attrname, old, new):\n",
197 | " N = int(input.value)\n",
198 | " source.data = get_data(N)\n",
199 | " input.on_change('value', update_points)\n",
200 | "\n",
201 | " layout = column(row(select, input, width=400), row(p))\n",
202 | "\n",
203 | " doc.add_root(layout)\n",
204 | "\n",
205 | "show(modify_doc)"
206 | ]
207 | },
208 | {
209 | "cell_type": "code",
210 | "execution_count": null,
211 | "metadata": {},
212 | "outputs": [],
213 | "source": [
214 | "# EXERCISE: add more widgets to change more aspects of this plot\n"
215 | ]
216 | },
217 | {
218 | "cell_type": "markdown",
219 | "metadata": {},
220 | "source": [
221 | "# Streaming Data\n",
222 | "\n",
223 | "It is possible to efficiently stream new data to column data sources by using the ``stream`` method. This method accepts two argmuments:\n",
224 | "* ``new_data`` — a dictionary with the same structure as the column data source\n",
225 | "* ``rollover`` — a maximum column length on the client (earlier data is dropped) *[optional]*\n",
226 | "\n",
227 | "If no ``rollover`` is specified, data is never dropped on the client and columns grow without bound.\n",
228 | "\n",
229 | "It is often useful to use periodic callbacks in conjuction with streaming data The ``add_periodic_callback`` method of ``curdoc()`` accepts a callback function, and a time interval (in ms) to repeatedly execute the callback. \n"
230 | ]
231 | },
232 | {
233 | "cell_type": "code",
234 | "execution_count": null,
235 | "metadata": {},
236 | "outputs": [],
237 | "source": [
238 | "from math import cos, sin\n",
239 | "\n",
240 | "from bokeh.models import ColumnDataSource\n",
241 | "\n",
242 | "def modify_doc(doc):\n",
243 | " p = figure(match_aspect=True)\n",
244 | " p.circle(x=0, y=0, radius=1, fill_color=None, line_width=2)\n",
245 | " \n",
246 | " # this is just to help the auto-datarange\n",
247 | " p.rect(0, 0, 2, 2, alpha=0)\n",
248 | "\n",
249 | " # this is the data source we will stream to\n",
250 | " source = ColumnDataSource(data=dict(x=[1], y=[0]))\n",
251 | " p.circle(x='x', y='y', size=12, fill_color='white', source=source)\n",
252 | "\n",
253 | " def update():\n",
254 | " x, y = source.data['x'][-1], source.data['y'][-1]\n",
255 | "\n",
256 | " # construct the new values for all columns, and pass to stream\n",
257 | " new_data = dict(x=[x*cos(0.1) - y*sin(0.1)], y=[x*sin(0.1) + y*cos(0.1)])\n",
258 | " source.stream(new_data, rollover=8)\n",
259 | "\n",
260 | " doc.add_periodic_callback(update, 150)\n",
261 | " doc.add_root(p)\n",
262 | " \n",
263 | "show(modify_doc)"
264 | ]
265 | },
266 | {
267 | "cell_type": "code",
268 | "execution_count": null,
269 | "metadata": {},
270 | "outputs": [],
271 | "source": [
272 | "### EXERCISE: starting with the above example, create your own streaming plot\n"
273 | ]
274 | },
275 | {
276 | "cell_type": "markdown",
277 | "metadata": {},
278 | "source": [
279 | "Bokeh column data sources also support a `patch` method that can be used to efficiently update subsets of data."
280 | ]
281 | },
282 | {
283 | "cell_type": "markdown",
284 | "metadata": {},
285 | "source": [
286 | "## Directory Format Apps and Templates\n",
287 | "\n",
288 | "Bokeh apps can also be defined with a directory format. This format affords the use of extra modules, data files, templates, theme files, and other features. The directory should contain a `main.py` which is the \"entry point\" for the app, but ay contain extra parts:\n",
289 | "```\n",
290 | "myapp\n",
291 | " |\n",
292 | " +---main.py\n",
293 | " +---server_lifecycle.py\n",
294 | " +---static\n",
295 | " +---theme.yaml\n",
296 | " +---templates\n",
297 | " +---index.html\n",
298 | "```\n",
299 | "The [Directory Format](https://bokeh.pydata.org/en/latest/docs/user_guide/server.html#directory-format) section of the User's Guide has more information. \n",
300 | "\n",
301 | "See a complete sophisticated example at: https://github.com/bokeh/bokeh/tree/master/examples/app/dash\n",
302 | "\n",
303 | ""
304 | ]
305 | },
306 | {
307 | "cell_type": "markdown",
308 | "metadata": {},
309 | "source": [
310 | "## Tips and Tricks\n",
311 | "\n",
312 | " \n",
313 | "* Real Python callbacks *require* a Bokeh server application. They cannot work with `output_file`, `components` or other functions that generate standalone output. Standalone content can only use `CustomJS` callbacks. \n",
314 | "\n",
315 | "\n",
316 | "* Try to update data sources \"all at once\" whenever possible, i.e. prefer this:\n",
317 | " ```python\n",
318 | " source.data = new_data_dict # GOOD\n",
319 | " ```\n",
320 | " rather then updating individual columns sequentially:\n",
321 | " ```python\n",
322 | " # LESS GOOD\n",
323 | " source.data['foo'] = new_foo_column\n",
324 | " source.data['bar'] = new_bar_column \n",
325 | " ```\n",
326 | " If the new columns are exactly the same length as the old ones, then updating sequentially will trigger extra updates and may result in bad visual effects. \n",
327 | " If the new columns are a different length than the old ones, then updating \"all at once\" is **mandatory**.\n",
328 | " \n",
329 | "\n",
330 | "* Each time a session is started, the Bokeh server runs the script (or `modify_doc`) function, and the code that is run ***must return completely new Bokeh objects every time***. It is not possible to share Bokeh objects between sessions. As a concrete example, this is what NOT to do:\n",
331 | " ```python\n",
332 | " source = ColumnDataSource(data) # VERY BAD - global outside modify_doc\n",
333 | " \n",
334 | " def modify_doc(doc):\n",
335 | " p = figure()\n",
336 | " p.circle('x', 'y', source=source)\n",
337 | " doc.add_root(p)\n",
338 | " \n",
339 | " ```\n",
340 | " The analogous situation would occur with a script if the script imports a global Bokeh object from a separate module (due to the way Python caches imports)."
341 | ]
342 | },
343 | {
344 | "cell_type": "markdown",
345 | "metadata": {},
346 | "source": [
347 | "# Next Section"
348 | ]
349 | },
350 | {
351 | "cell_type": "markdown",
352 | "metadata": {},
353 | "source": [
354 | "This is the last section of the main tutorial. To explore some extra topics, see the appendices:\n",
355 | "\n",
356 | "[A1 - Models and Primitives](A1%20-%20Models%20and%20Primitives.ipynb) \n",
357 | "[A2 - Visualizing Big Data with Datashader](A2%20-%20Visualizing%20Big%20Data%20with%20Datashader.ipynb) \n",
358 | "[A3 - High-Level Charting with Holoviews](A3%20-%20High-Level%20Charting%20with%20Holoviews.ipynb) \n",
359 | "[A4 - Additional Resources](A4%20-%20Additional%20Resources.ipynb)\n",
360 | "\n",
361 | "To go back to the overview, click [here](00%20-%20Introduction%20and%20Setup.ipynb)."
362 | ]
363 | },
364 | {
365 | "cell_type": "code",
366 | "execution_count": null,
367 | "metadata": {},
368 | "outputs": [],
369 | "source": []
370 | }
371 | ],
372 | "metadata": {
373 | "kernelspec": {
374 | "display_name": "Python 3",
375 | "language": "python",
376 | "name": "python3"
377 | },
378 | "language_info": {
379 | "codemirror_mode": {
380 | "name": "ipython",
381 | "version": 3
382 | },
383 | "file_extension": ".py",
384 | "mimetype": "text/x-python",
385 | "name": "python",
386 | "nbconvert_exporter": "python",
387 | "pygments_lexer": "ipython3",
388 | "version": "3.8.2"
389 | }
390 | },
391 | "nbformat": 4,
392 | "nbformat_minor": 4
393 | }
394 |
--------------------------------------------------------------------------------
/tutorial/assets/document.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tutorial/08 - Graph and Network Plots.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "metadata": {},
6 | "source": [
7 | "
"
46 | ]
47 | },
48 | "metadata": {},
49 | "output_type": "display_data"
50 | },
51 | {
52 | "data": {
53 | "application/javascript": [
54 | "\n",
55 | "(function(root) {\n",
56 | " function now() {\n",
57 | " return new Date();\n",
58 | " }\n",
59 | "\n",
60 | " var force = true;\n",
61 | "\n",
62 | " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
63 | " root._bokeh_onload_callbacks = [];\n",
64 | " root._bokeh_is_loading = undefined;\n",
65 | " }\n",
66 | "\n",
67 | " var JS_MIME_TYPE = 'application/javascript';\n",
68 | " var HTML_MIME_TYPE = 'text/html';\n",
69 | " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
70 | " var CLASS_NAME = 'output_bokeh rendered_html';\n",
71 | "\n",
72 | " /**\n",
73 | " * Render data to the DOM node\n",
74 | " */\n",
75 | " function render(props, node) {\n",
76 | " var script = document.createElement(\"script\");\n",
77 | " node.appendChild(script);\n",
78 | " }\n",
79 | "\n",
80 | " /**\n",
81 | " * Handle when an output is cleared or removed\n",
82 | " */\n",
83 | " function handleClearOutput(event, handle) {\n",
84 | " var cell = handle.cell;\n",
85 | "\n",
86 | " var id = cell.output_area._bokeh_element_id;\n",
87 | " var server_id = cell.output_area._bokeh_server_id;\n",
88 | " // Clean up Bokeh references\n",
89 | " if (id != null && id in Bokeh.index) {\n",
90 | " Bokeh.index[id].model.document.clear();\n",
91 | " delete Bokeh.index[id];\n",
92 | " }\n",
93 | "\n",
94 | " if (server_id !== undefined) {\n",
95 | " // Clean up Bokeh references\n",
96 | " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
97 | " cell.notebook.kernel.execute(cmd, {\n",
98 | " iopub: {\n",
99 | " output: function(msg) {\n",
100 | " var id = msg.content.text.trim();\n",
101 | " if (id in Bokeh.index) {\n",
102 | " Bokeh.index[id].model.document.clear();\n",
103 | " delete Bokeh.index[id];\n",
104 | " }\n",
105 | " }\n",
106 | " }\n",
107 | " });\n",
108 | " // Destroy server and session\n",
109 | " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
110 | " cell.notebook.kernel.execute(cmd);\n",
111 | " }\n",
112 | " }\n",
113 | "\n",
114 | " /**\n",
115 | " * Handle when a new output is added\n",
116 | " */\n",
117 | " function handleAddOutput(event, handle) {\n",
118 | " var output_area = handle.output_area;\n",
119 | " var output = handle.output;\n",
120 | "\n",
121 | " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
122 | " if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
123 | " return\n",
124 | " }\n",
125 | "\n",
126 | " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
127 | "\n",
128 | " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
129 | " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
130 | " // store reference to embed id on output_area\n",
131 | " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
132 | " }\n",
133 | " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
134 | " var bk_div = document.createElement(\"div\");\n",
135 | " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
136 | " var script_attrs = bk_div.children[0].attributes;\n",
137 | " for (var i = 0; i < script_attrs.length; i++) {\n",
138 | " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
139 | " toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
140 | " }\n",
141 | " // store reference to server id on output_area\n",
142 | " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
143 | " }\n",
144 | " }\n",
145 | "\n",
146 | " function register_renderer(events, OutputArea) {\n",
147 | "\n",
148 | " function append_mime(data, metadata, element) {\n",
149 | " // create a DOM node to render to\n",
150 | " var toinsert = this.create_output_subarea(\n",
151 | " metadata,\n",
152 | " CLASS_NAME,\n",
153 | " EXEC_MIME_TYPE\n",
154 | " );\n",
155 | " this.keyboard_manager.register_events(toinsert);\n",
156 | " // Render to node\n",
157 | " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
158 | " render(props, toinsert[toinsert.length - 1]);\n",
159 | " element.append(toinsert);\n",
160 | " return toinsert\n",
161 | " }\n",
162 | "\n",
163 | " /* Handle when an output is cleared or removed */\n",
164 | " events.on('clear_output.CodeCell', handleClearOutput);\n",
165 | " events.on('delete.Cell', handleClearOutput);\n",
166 | "\n",
167 | " /* Handle when a new output is added */\n",
168 | " events.on('output_added.OutputArea', handleAddOutput);\n",
169 | "\n",
170 | " /**\n",
171 | " * Register the mime type and append_mime function with output_area\n",
172 | " */\n",
173 | " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
174 | " /* Is output safe? */\n",
175 | " safe: true,\n",
176 | " /* Index of renderer in `output_area.display_order` */\n",
177 | " index: 0\n",
178 | " });\n",
179 | " }\n",
180 | "\n",
181 | " // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
182 | " if (root.Jupyter !== undefined) {\n",
183 | " var events = require('base/js/events');\n",
184 | " var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
185 | "\n",
186 | " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
187 | " register_renderer(events, OutputArea);\n",
188 | " }\n",
189 | " }\n",
190 | "\n",
191 | " \n",
192 | " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
193 | " root._bokeh_timeout = Date.now() + 5000;\n",
194 | " root._bokeh_failed_load = false;\n",
195 | " }\n",
196 | "\n",
197 | " var NB_LOAD_WARNING = {'data': {'text/html':\n",
198 | " \"
\\n\"+\n",
199 | " \"
\\n\"+\n",
200 | " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
201 | " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
202 | " \"
\\n\"+\n",
203 | " \"
\\n\"+\n",
204 | " \"
re-rerun `output_notebook()` to attempt to load from CDN again, or
\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"
\\n\"+\n \"
\\n\"+\n \"
re-rerun `output_notebook()` to attempt to load from CDN again, or
"
39 | ]
40 | },
41 | "metadata": {},
42 | "output_type": "display_data"
43 | },
44 | {
45 | "data": {
46 | "application/javascript": [
47 | "\n",
48 | "(function(root) {\n",
49 | " function now() {\n",
50 | " return new Date();\n",
51 | " }\n",
52 | "\n",
53 | " var force = true;\n",
54 | "\n",
55 | " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
56 | " root._bokeh_onload_callbacks = [];\n",
57 | " root._bokeh_is_loading = undefined;\n",
58 | " }\n",
59 | "\n",
60 | " var JS_MIME_TYPE = 'application/javascript';\n",
61 | " var HTML_MIME_TYPE = 'text/html';\n",
62 | " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
63 | " var CLASS_NAME = 'output_bokeh rendered_html';\n",
64 | "\n",
65 | " /**\n",
66 | " * Render data to the DOM node\n",
67 | " */\n",
68 | " function render(props, node) {\n",
69 | " var script = document.createElement(\"script\");\n",
70 | " node.appendChild(script);\n",
71 | " }\n",
72 | "\n",
73 | " /**\n",
74 | " * Handle when an output is cleared or removed\n",
75 | " */\n",
76 | " function handleClearOutput(event, handle) {\n",
77 | " var cell = handle.cell;\n",
78 | "\n",
79 | " var id = cell.output_area._bokeh_element_id;\n",
80 | " var server_id = cell.output_area._bokeh_server_id;\n",
81 | " // Clean up Bokeh references\n",
82 | " if (id != null && id in Bokeh.index) {\n",
83 | " Bokeh.index[id].model.document.clear();\n",
84 | " delete Bokeh.index[id];\n",
85 | " }\n",
86 | "\n",
87 | " if (server_id !== undefined) {\n",
88 | " // Clean up Bokeh references\n",
89 | " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
90 | " cell.notebook.kernel.execute(cmd, {\n",
91 | " iopub: {\n",
92 | " output: function(msg) {\n",
93 | " var id = msg.content.text.trim();\n",
94 | " if (id in Bokeh.index) {\n",
95 | " Bokeh.index[id].model.document.clear();\n",
96 | " delete Bokeh.index[id];\n",
97 | " }\n",
98 | " }\n",
99 | " }\n",
100 | " });\n",
101 | " // Destroy server and session\n",
102 | " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
103 | " cell.notebook.kernel.execute(cmd);\n",
104 | " }\n",
105 | " }\n",
106 | "\n",
107 | " /**\n",
108 | " * Handle when a new output is added\n",
109 | " */\n",
110 | " function handleAddOutput(event, handle) {\n",
111 | " var output_area = handle.output_area;\n",
112 | " var output = handle.output;\n",
113 | "\n",
114 | " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
115 | " if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
116 | " return\n",
117 | " }\n",
118 | "\n",
119 | " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
120 | "\n",
121 | " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
122 | " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
123 | " // store reference to embed id on output_area\n",
124 | " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
125 | " }\n",
126 | " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
127 | " var bk_div = document.createElement(\"div\");\n",
128 | " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
129 | " var script_attrs = bk_div.children[0].attributes;\n",
130 | " for (var i = 0; i < script_attrs.length; i++) {\n",
131 | " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
132 | " toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
133 | " }\n",
134 | " // store reference to server id on output_area\n",
135 | " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
136 | " }\n",
137 | " }\n",
138 | "\n",
139 | " function register_renderer(events, OutputArea) {\n",
140 | "\n",
141 | " function append_mime(data, metadata, element) {\n",
142 | " // create a DOM node to render to\n",
143 | " var toinsert = this.create_output_subarea(\n",
144 | " metadata,\n",
145 | " CLASS_NAME,\n",
146 | " EXEC_MIME_TYPE\n",
147 | " );\n",
148 | " this.keyboard_manager.register_events(toinsert);\n",
149 | " // Render to node\n",
150 | " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
151 | " render(props, toinsert[toinsert.length - 1]);\n",
152 | " element.append(toinsert);\n",
153 | " return toinsert\n",
154 | " }\n",
155 | "\n",
156 | " /* Handle when an output is cleared or removed */\n",
157 | " events.on('clear_output.CodeCell', handleClearOutput);\n",
158 | " events.on('delete.Cell', handleClearOutput);\n",
159 | "\n",
160 | " /* Handle when a new output is added */\n",
161 | " events.on('output_added.OutputArea', handleAddOutput);\n",
162 | "\n",
163 | " /**\n",
164 | " * Register the mime type and append_mime function with output_area\n",
165 | " */\n",
166 | " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
167 | " /* Is output safe? */\n",
168 | " safe: true,\n",
169 | " /* Index of renderer in `output_area.display_order` */\n",
170 | " index: 0\n",
171 | " });\n",
172 | " }\n",
173 | "\n",
174 | " // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
175 | " if (root.Jupyter !== undefined) {\n",
176 | " var events = require('base/js/events');\n",
177 | " var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
178 | "\n",
179 | " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
180 | " register_renderer(events, OutputArea);\n",
181 | " }\n",
182 | " }\n",
183 | "\n",
184 | " \n",
185 | " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
186 | " root._bokeh_timeout = Date.now() + 5000;\n",
187 | " root._bokeh_failed_load = false;\n",
188 | " }\n",
189 | "\n",
190 | " var NB_LOAD_WARNING = {'data': {'text/html':\n",
191 | " \"
\\n\"+\n",
192 | " \"
\\n\"+\n",
193 | " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
194 | " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
195 | " \"
\\n\"+\n",
196 | " \"
\\n\"+\n",
197 | " \"
re-rerun `output_notebook()` to attempt to load from CDN again, or
\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"
\\n\"+\n \"
\\n\"+\n \"
re-rerun `output_notebook()` to attempt to load from CDN again, or
"
39 | ]
40 | },
41 | "metadata": {},
42 | "output_type": "display_data"
43 | },
44 | {
45 | "data": {
46 | "application/javascript": [
47 | "\n",
48 | "(function(root) {\n",
49 | " function now() {\n",
50 | " return new Date();\n",
51 | " }\n",
52 | "\n",
53 | " var force = true;\n",
54 | "\n",
55 | " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
56 | " root._bokeh_onload_callbacks = [];\n",
57 | " root._bokeh_is_loading = undefined;\n",
58 | " }\n",
59 | "\n",
60 | " var JS_MIME_TYPE = 'application/javascript';\n",
61 | " var HTML_MIME_TYPE = 'text/html';\n",
62 | " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
63 | " var CLASS_NAME = 'output_bokeh rendered_html';\n",
64 | "\n",
65 | " /**\n",
66 | " * Render data to the DOM node\n",
67 | " */\n",
68 | " function render(props, node) {\n",
69 | " var script = document.createElement(\"script\");\n",
70 | " node.appendChild(script);\n",
71 | " }\n",
72 | "\n",
73 | " /**\n",
74 | " * Handle when an output is cleared or removed\n",
75 | " */\n",
76 | " function handleClearOutput(event, handle) {\n",
77 | " var cell = handle.cell;\n",
78 | "\n",
79 | " var id = cell.output_area._bokeh_element_id;\n",
80 | " var server_id = cell.output_area._bokeh_server_id;\n",
81 | " // Clean up Bokeh references\n",
82 | " if (id != null && id in Bokeh.index) {\n",
83 | " Bokeh.index[id].model.document.clear();\n",
84 | " delete Bokeh.index[id];\n",
85 | " }\n",
86 | "\n",
87 | " if (server_id !== undefined) {\n",
88 | " // Clean up Bokeh references\n",
89 | " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
90 | " cell.notebook.kernel.execute(cmd, {\n",
91 | " iopub: {\n",
92 | " output: function(msg) {\n",
93 | " var id = msg.content.text.trim();\n",
94 | " if (id in Bokeh.index) {\n",
95 | " Bokeh.index[id].model.document.clear();\n",
96 | " delete Bokeh.index[id];\n",
97 | " }\n",
98 | " }\n",
99 | " }\n",
100 | " });\n",
101 | " // Destroy server and session\n",
102 | " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
103 | " cell.notebook.kernel.execute(cmd);\n",
104 | " }\n",
105 | " }\n",
106 | "\n",
107 | " /**\n",
108 | " * Handle when a new output is added\n",
109 | " */\n",
110 | " function handleAddOutput(event, handle) {\n",
111 | " var output_area = handle.output_area;\n",
112 | " var output = handle.output;\n",
113 | "\n",
114 | " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
115 | " if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
116 | " return\n",
117 | " }\n",
118 | "\n",
119 | " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
120 | "\n",
121 | " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
122 | " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
123 | " // store reference to embed id on output_area\n",
124 | " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
125 | " }\n",
126 | " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
127 | " var bk_div = document.createElement(\"div\");\n",
128 | " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
129 | " var script_attrs = bk_div.children[0].attributes;\n",
130 | " for (var i = 0; i < script_attrs.length; i++) {\n",
131 | " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
132 | " toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
133 | " }\n",
134 | " // store reference to server id on output_area\n",
135 | " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
136 | " }\n",
137 | " }\n",
138 | "\n",
139 | " function register_renderer(events, OutputArea) {\n",
140 | "\n",
141 | " function append_mime(data, metadata, element) {\n",
142 | " // create a DOM node to render to\n",
143 | " var toinsert = this.create_output_subarea(\n",
144 | " metadata,\n",
145 | " CLASS_NAME,\n",
146 | " EXEC_MIME_TYPE\n",
147 | " );\n",
148 | " this.keyboard_manager.register_events(toinsert);\n",
149 | " // Render to node\n",
150 | " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
151 | " render(props, toinsert[toinsert.length - 1]);\n",
152 | " element.append(toinsert);\n",
153 | " return toinsert\n",
154 | " }\n",
155 | "\n",
156 | " /* Handle when an output is cleared or removed */\n",
157 | " events.on('clear_output.CodeCell', handleClearOutput);\n",
158 | " events.on('delete.Cell', handleClearOutput);\n",
159 | "\n",
160 | " /* Handle when a new output is added */\n",
161 | " events.on('output_added.OutputArea', handleAddOutput);\n",
162 | "\n",
163 | " /**\n",
164 | " * Register the mime type and append_mime function with output_area\n",
165 | " */\n",
166 | " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
167 | " /* Is output safe? */\n",
168 | " safe: true,\n",
169 | " /* Index of renderer in `output_area.display_order` */\n",
170 | " index: 0\n",
171 | " });\n",
172 | " }\n",
173 | "\n",
174 | " // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
175 | " if (root.Jupyter !== undefined) {\n",
176 | " var events = require('base/js/events');\n",
177 | " var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
178 | "\n",
179 | " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
180 | " register_renderer(events, OutputArea);\n",
181 | " }\n",
182 | " }\n",
183 | "\n",
184 | " \n",
185 | " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
186 | " root._bokeh_timeout = Date.now() + 5000;\n",
187 | " root._bokeh_failed_load = false;\n",
188 | " }\n",
189 | "\n",
190 | " var NB_LOAD_WARNING = {'data': {'text/html':\n",
191 | " \"
\\n\"+\n",
192 | " \"
\\n\"+\n",
193 | " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
194 | " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
195 | " \"
\\n\"+\n",
196 | " \"
\\n\"+\n",
197 | " \"
re-rerun `output_notebook()` to attempt to load from CDN again, or
\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"
\\n\"+\n \"
\\n\"+\n \"
re-rerun `output_notebook()` to attempt to load from CDN again, or
![](\"assets/bokeh-transparent.png\"){kind=spacer}
\n",
15 | " \n",
16 | " ![](\"https://blog.bokeh.org/images/release-0-13-0/dash.png\")
"
304 | ]
305 | },
306 | {
307 | "cell_type": "markdown",
308 | "metadata": {},
309 | "source": [
310 | "## Tips and Tricks\n",
311 | "\n",
312 | " \n",
313 | "* Real Python callbacks *require* a Bokeh server application. They cannot work with `output_file`, `components` or other functions that generate standalone output. Standalone content can only use `CustomJS` callbacks. \n",
314 | "\n",
315 | "\n",
316 | "* Try to update data sources \"all at once\" whenever possible, i.e. prefer this:\n",
317 | " ```python\n",
318 | " source.data = new_data_dict # GOOD\n",
319 | " ```\n",
320 | " rather then updating individual columns sequentially:\n",
321 | " ```python\n",
322 | " # LESS GOOD\n",
323 | " source.data['foo'] = new_foo_column\n",
324 | " source.data['bar'] = new_bar_column \n",
325 | " ```\n",
326 | " If the new columns are exactly the same length as the old ones, then updating sequentially will trigger extra updates and may result in bad visual effects. \n",
327 | " If the new columns are a different length than the old ones, then updating \"all at once\" is **mandatory**.\n",
328 | " \n",
329 | "\n",
330 | "* Each time a session is started, the Bokeh server runs the script (or `modify_doc`) function, and the code that is run ***must return completely new Bokeh objects every time***. It is not possible to share Bokeh objects between sessions. As a concrete example, this is what NOT to do:\n",
331 | " ```python\n",
332 | " source = ColumnDataSource(data) # VERY BAD - global outside modify_doc\n",
333 | " \n",
334 | " def modify_doc(doc):\n",
335 | " p = figure()\n",
336 | " p.circle('x', 'y', source=source)\n",
337 | " doc.add_root(p)\n",
338 | " \n",
339 | " ```\n",
340 | " The analogous situation would occur with a script if the script imports a global Bokeh object from a separate module (due to the way Python caches imports)."
341 | ]
342 | },
343 | {
344 | "cell_type": "markdown",
345 | "metadata": {},
346 | "source": [
347 | "# Next Section"
348 | ]
349 | },
350 | {
351 | "cell_type": "markdown",
352 | "metadata": {},
353 | "source": [
354 | "This is the last section of the main tutorial. To explore some extra topics, see the appendices:\n",
355 | "\n",
356 | "[A1 - Models and Primitives](A1%20-%20Models%20and%20Primitives.ipynb)