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.