5 Best Ways to Work with Images in Bokeh Python

by

💡 Problem Formulation: When presenting data visually using Bokeh in Python, it is often necessary to incorporate images to enhance understanding or provide context. The following techniques detail how one might include images such as logos, photographs, or PNG data plots within a Bokeh plot. Assuming you have an image file or a stream of image data, we’ll explore how to render it accurately in a Bokeh figure.

Method 1: Using the ImageURL Glyph

The ImageURL glyph allows for easy display of images hosted on a web server or accessible via a URL. This method is ideal for rendering remote images without needing to handle the image data directly in your Bokeh app. You simply provide the URL(s) to where your images are hosted.

Here’s an example:

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource

data = ColumnDataSource(data=dict(url=['http://link_to_your_image.png']))
p = figure(x_range=(0, 1), y_range=(0, 1))
p.image_url(url='url', source=data, x=0, y=1, w=1, h=1)
show(p)

Output: A Bokeh plot displaying the image fetched from the given URL.

This example sets up a simple plot and uses the image_url function from the plotting API to position an image within the plot area based on the x, y, width, and height parameters defined.

Method 2: Embedding Local Images with ImageURL

Local images can also be displayed using the ImageURL glyph by serving them from a local web server. This can be particularly useful during development when you have images stored locally that you want to display in your Bokeh application.

Here’s an example:

# Assuming a local server is running at localhost:8000 that serves the image
img_url = 'http://localhost:8000/path_to_your_image.png'
p = figure(x_range=(0, 1), y_range=(0, 1))
p.image_url(url=[img_url], x=0, y=1, w=1, h=1)
show(p)

Output: A Bokeh plot rendering a locally served image.

In this code, a local image is displayed in a Bokeh plot by providing a URL that points to where the image is served locally (e.g., a local HTTP server).

Method 3: Displaying Images from NumPy Arrays with ImageRGBA

The ImageRGBA glyph enables the display of images directly from NumPy arrays. This method is useful when dealing with image data in array form that you wish to integrate into a Bokeh plot. RGBA (Red, Green, Blue, Alpha) values are expected in a 32-bit integer format.

Here’s an example:

import numpy as np
from bokeh.plotting import figure, show

img = np.array([[[255, 255, 255, 255]]], dtype=np.uint32)
p = figure(x_range=(0, 1), y_range=(0, 1), plot_width=400, plot_height=400)
p.image_rgba(image=[img], x=0, y=0, dw=1, dh=1)
show(p)

Output: A Bokeh plot displaying a white square image.

This snippet creates a simple white image using a NumPy array with RGBA values. The image_rgba function is then called, positioning the image within the figure based on the given dimensions and coordinates.

Method 4: Importing Images as Patches with Image

If you have grayscale image data (encoded as floats between 0 (black) and 1 (white)), you can display it using the Image glyph in Bokeh. This is beneficial for scientific visualizations where heatmaps or matrix representations are used.

Here’s an example:

import numpy as np
from bokeh.plotting import figure, show

# Assume img is your grayscale image as a 2D NumPy array
img = np.random.rand(250, 250)
p = figure()
p.image(image=[img], x=0, y=0, dw=10, dh=10, palette="Spectral11")
show(p)

Output: A heatmap representation of the grayscale image data in a Bokeh plot.

This example uses a 2D NumPy array of random floats to simulate grayscale image data, which is then displayed as a heatmap using the image function along with the desired palette.

Bonus One-Liner Method 5: Quick Image Integration with figure.image_url

The figure API in Bokeh provides a convenient one-liner function image_url specifically for quickly embedding images within a plot without needing additional configurations.

Here’s an example:

from bokeh.plotting import figure, show

p = figure(x_range=(0, 1), y_range=(0, 1))
p.image_url(url=['http://link_to_your_image.png'], x=0, y=1, w=1, h=1)
show(p)

Output: The image from the provided URL displayed neatly within your Bokeh plot.

This minimalist approach provides the most straightforward method to add an image, simply taking the URL and the desired dimensions to render it into a Bokeh plot seamlessly.

Summary/Discussion

  • Method 1: ImageURL Glyph. Best for remote images. Limited to web-hosted images.
  • Method 2: Local ImageURL. Suitable for development. Requires local server setup.
  • Method 3: ImageRGBA. Direct array integration. Requires specific data formatting.
  • Method 4: Image as Patches. Ideal for scientific data. Limited to grayscale.
  • Method 5: Quick figure.image_url. Quick and easy. Less control over formatting.