|
| 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 | +} |
0 commit comments