Images and raster data

You can display 2d image arrays on Bokeh plots using the image() and image_rgba() glyph methods. You can use hovering tooltips with image glyphs to let the user see the values of each pixel. For more information on how to enable hovering tooltips for images, see Image hover.

Raw RGBA data

The following example shows how to display images using raw RGBA data with the image_rgba() method.

import numpy as np

from bokeh.plotting import figure, show

N = 20
img = np.empty((N,N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4))
for i in range(N):
    for j in range(N):
        view[i, j, 0] = int(i/N*255)
        view[i, j, 1] = 158
        view[i, j, 2] = int(j/N*255)
        view[i, j, 3] = 255

p = figure(width=400, height=400)
p.x_range.range_padding = p.y_range.range_padding = 0

# must give a vector of images
p.image_rgba(image=[img], x=0, y=0, dw=10, dh=10)

show(p)

Color mapped images

The following example shows how to supply an array of scalar values and have Bokeh automatically color map the data in the browser with the image() glyph method.

import numpy as np

from bokeh.plotting import figure, show

x = np.linspace(0, 10, 300)
y = np.linspace(0, 10, 300)
xx, yy = np.meshgrid(x, y)
d = np.sin(xx) * np.cos(yy)

p = figure(width=400, height=400)
p.x_range.range_padding = p.y_range.range_padding = 0

# must give a vector of image data for image parameter
p.image(image=[d], x=0, y=0, dw=10, dh=10, palette="Sunset11", level="image")
p.grid.grid_line_width = 0.5

show(p)

Note that this example sets the render level to "image". Normally, Bokeh draws all glyphs above grid lines, but with this render level they appear below the grid lines.

Origin and Anchor

The image() and image_rgba() glyphs provide origin and anchor properties for controlling the relative position and orientation of the image.

When drawn, the image will cover a rectangular drawing region of size dw by dh.

The anchor property specifies where that rectangular drawing region is located, relative to the glyph coordinates x and y. It can be used to shift the image vertically or horizontally from x and y.

The origin property specifies which corner of the rectangular drawing region corresponds to the [0, 0] pixel of the image array. It can be used to flip the image vertically or horizontally within its drawing region.

The example below lets you explore all the different combinations of anchor an origin for a simple 2x2 image.