5 Effective Ways to Visualize Axis-Aligned Rectangles with Python and Bokeh

Rate this post

πŸ’‘ Problem Formulation: In data visualization, it is often necessary to represent multidimensional numerical data graphically. One common requirement is to visualize axis-aligned rectangles, for instances such as spatial data, bounding boxes in images, or time periods in Gantt charts. Given a set of rectangles defined by their corners or center points with width and height, Python and Bokeh can visualize these rectangles effectively. The desired output is an interactive plot that renders these rectangles for analysis or presentation.

Method 1: Using quad() Glyph

The quad() glyph in Bokeh is specifically designed to draw axis-aligned rectangles by specifying their left, right, top, and bottom edges. It is well-suited for plotting histograms, bar charts, or any dataset where rectangles are defined by their edge coordinates.

Here’s an example:

from bokeh.plotting import figure, show

# Define data
lefts = [1, 2, 3]
rights = [1.5, 2.5, 3.5]
tops = [4, 5, 6]
bottoms = [2, 1, 3]

# Create plot
p = figure(plot_width=400, plot_height=400)
p.quad(top=tops, bottom=bottoms, left=lefts, right=rights, color="#B3DE69")

# Display plot
show(p)

The output of this code will be an interactive Bokeh plot depicting three axis-aligned rectangles, each with distinctive edge coordinates.

This code snippet sets up the coordinate data for three rectangles, creates a Bokeh figure, and then uses the quad() method to draw each rectangle on the figure. The color attribute is used to set the fill color of the rectangles. Finally, show() renders the figure in a browser window or inline if you’re using a Jupyter Notebook.

Method 2: Using rect() Glyph with Individual Rectangles

Bokeh’s rect() glyph allows drawing axis-aligned rectangles by specifying their center coordinates, width, and height. This approach is best when you already have the center points and dimensions of each rectangle.

Here’s an example:

from bokeh.plotting import figure, show

# Define data
centers_x = [1, 2, 3]
centers_y = [3, 2, 1]
widths = [0.5, 0.5, 0.5]
heights = [2, 2, 2]

# Create plot
p = figure(plot_width=400, plot_height=400)
p.rect(x=centers_x, y=centers_y, width=widths, height=heights, color="#CAB2D6")

# Display plot
show(p)

The output will be a Bokeh plot featuring three rectangles centered at the specified coordinates with the given widths and heights.

This snippet utilizes the rect() method to draw rectangles with designated center points, width, and height, effectively allowing for quick plotting when these parameters are known. The fill color is determined by the color keyword, providing an easy way to customize the appearance.

Method 3: Using Rect() Glyph with ColumnDataSource

For more complex data interaction or when using data from a dataframe, the ColumnDataSource can be combined with the Rect() glyph. This method provides additional flexibility and is ideal for integration with other parts of a Bokeh document or dashboard.

Here’s an example:

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

# Define data source
source = ColumnDataSource(data=dict(x=[1, 2, 3], y=[3, 2, 1], width=[0.5, 0.5, 0.5], height=[2, 2, 2]))

# Create plot
p = figure(plot_width=400, plot_height=400)
p.rect(x='x', y='y', width='width', height='height', source=source, color="#FA9FB5")

# Display plot
show(p)

The result is a Bokeh plot exhibiting the rectangles based on the data provided through the ColumnDataSource.

In this approach, data is encapsulated in a Bokeh ColumnDataSource, which is then leveraged in the rect() method by referring to column names. This abstraction allows for a more dynamic plot where rectangles can be easily updated, added, or interacted with in conjunction with widgets and callbacks.

Method 4: Using Patches for Irregular Shapes

While not specifically for axis-aligned rectangles, the patches() glyph can be used for drawing multiple irregular shapes, including rectangles. This can be useful when visual flexibility is required beyond strict axis alignment or when dealing with complex datasets.

Here’s an example:

from bokeh.plotting import figure, show

# Define data
xs = [[1, 1, 1.5, 1.5], [2, 2, 2.5, 2.5], [3, 3, 3.5, 3.5]]
ys = [[2, 4, 4, 2], [1, 5, 5, 1], [3, 6, 6, 3]]

# Create plot
p = figure(plot_width=400, plot_height=400)
p.patches(xs=xs, ys=ys, color="#A6CEE3")

# Display plot
show(p)

As expected, displaying this code presents a Bokeh plot illustrating rectangles, drawn using sets of x and y coordinates that trace their perimeters.

This method involves specifying the x and y coordinates for the corners of each shape to create complex patches. It becomes particularly powerful when dealing with non-rectangular shapes, as it can accommodate any polygonal form.

Bonus One-Liner Method 5: Using vbar() and hbar() Glyphs for Bar Charts

While vbar() and hbar() are primarily used for creating vertical and horizontal bar charts, they can also effectively visualize a series of axis-aligned rectangles with equal widths or heights, respectively.

Here’s an example:

from bokeh.plotting import figure, show

# Define data
tops = [4, 5, 6]
centers = [1, 2, 3]

# Create plot
p = figure(plot_width=400, plot_height=400)
p.vbar(x=centers, top=tops, width=0.5, bottom=0, color="#FB9A99")

# Display plot
show(p)

The Bokeh plot output features vertical bars, resembling rectangles aligned along the x-axis, with consistent widths.

This code creates a simple bar chart, which can be interpreted as rectangles with a common width. It’s an efficient method when rectangles form part of a histogram or similar chart.

Summary/Discussion

  • Method 1: Using quad() Glyph. Ideal for edge-defined rectangles. Simple data structure requirement. Less flexible than other methods when dealing with complex datasets.
  • Method 2: Using rect() Glyph with Individual Rectangles. Perfect for center-defined rectangles. Straightforward when dimensions are consistent. Not as data-driven as Glyphs with source.
  • Method 3: Using Rect() Glyph with ColumnDataSource. Flexible and dynamic, great for interactive visualizations. May be overkill for static or simple data visualizations.
  • Method 4: Using Patches for Irregular Shapes. Can handle non-rectangular shapes. Offers maximum flexibility. Potentially more complex data setup.
  • Bonus Method 5: Using vbar() and hbar() Glyphs for Bar Charts. Quick and easy for uniform-width or height rectangles. Limited to bar-style visualizations.