Accelerating with WebGL

Bokeh provides limited support for rendering with WebGL. This can be useful when visualizing larger data sets.

What is WebGL?

WebGL is a JavaScript API that allows rendering content in the browser using hardware acceleration from a Graphics Processing Unit (GPU). WebGL is standardized and available in all modern browsers.

How to Enable WebGL

To enable WebGL in Bokeh, set the plot’s output_backend property to "webgl":

p = figure(output_backend="webgl")

Support

Only a subset of Bokeh’s objects are capable of rendering in WebGL. Currently supported are the circle and line glyphs, and many markers: asterisk, circle, square, diamond, triangle, inverted_triangle, cross, circle_cross, square_cross, diamond_cross, x, square_x, and circle_x. You can safely combine multiple glyphs in a plot, even if some are rendered in WebGL, and some are not.

Examples

Here is an example of plotting ten thousand scatter circles with WebGL enabled. Notice that that plot can be panned and zoomed smoothly, even without any Level-of-Detail downsampling.

import numpy as np

from bokeh.plotting import figure, output_file, show

output_file("scatter10k.html", title="scatter 10k points")

N = 10000

x = np.random.normal(0, np.pi, N)
y = np.sin(x) + np.random.normal(0, 0.2, N)

TOOLS = "pan,wheel_zoom,box_zoom,reset,save,box_select"

p = figure(tools=TOOLS, output_backend="webgl")
p.circle(x, y, alpha=0.1, nonselection_alpha=0.001)

show(p)

Simlilary, the plot below demonstrates plotting a single line with ten thousand points.

import numpy as np

from bokeh.plotting import figure, output_file, show

output_file("line10k.html", title="line10k.py example")

N = 10000
x = np.linspace(0, 10*np.pi, N)
y = np.cos(x) + np.sin(2*x+1.25) + np.random.normal(0, 0.001, (N, ))

p = figure(title="A line consisting of 10k points", output_backend="webgl")
p.line(x, y, color="#22aa22", line_width=3)

show(p)