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

Bokeh’s WebGL support covers a subset of glyphs. This includes the line() glyph, and most markers:

You can 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 the 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)

Similarly, 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)