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, output_file, show

# create an array of RGBA data
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(255 * i / N)
        view[i, j, 1] = 158
        view[i, j, 2] = int(255 * j / N)
        view[i, j, 3] = 255

output_file("image_rgba.html")

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

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, output_file, show

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

x = np.linspace(0, 10, 250)
y = np.linspace(0, 10, 250)
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

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.