Python Bokeh scatter markers

Bokeh is a Python library used for creating interactive visualizations in a web browser. It provides powerful tools that offer flexibility, interactivity, and scalability for exploring various data insights.

What are scatter markers?

Scatter markers are used to represent data summary in different types of plots for the dataset visually e.g. scatter plots. Various types of markers are used according to the requirement and dataset domain.

Let's take a look at some of the common markers that are used widely during plotting.

Scatter marker types.
Scatter marker types.

Bokeh also provides functions to create variations of the same type of marker. For example, we can create visually different markers for circular markers by combining two different types of markers.

Variations of circular scatter marker.
Variations of circular scatter marker.

Let's create a simple scatter plot using three different types of markers :

  • Circular marker

  • Square marker

  • Image marker

Circular markers

Circular markers mark the coordinates corresponding to the dataset using a circle shape. For example, they are used in bubble charts where the size of the marker is also used as a dimension for interpretation.

The following scatter plot visual is created using it.

Circular markers.
Circular markers.

Example code

In this example, we create a simple plot using the circle markers and give hard-coded coordinates to be marked.

from bokeh.io import output_file, save
from bokeh.plotting import figure, show

myPlot = figure(width = 680, height = 400)

# add a circle renderer with a size, color, and alpha
myPlot.circle([1, 2, 3, 4, 5], 
              [6, 5, 1, 4, 3],
              size=20, 
              color="purple", 
              alpha=0.5)

# show the results
output_file("output.html")
show(myPlot)
Creating a simple plot using circular markers.

Code explanation

  • Lines 1–2: Import the required methods from bokeh.plotting and bokeh.io which are used to customize the plot and display it, respectively.

  • Line 4: Create a plot and assign the width and heigth to it using the figure() method.

  • Lines 7–11: Create a circle marker using the circle() method and pass the following parameters to it :

    • an array of x-axis coordinates for each marker.

    • an array of y-axis coordinates for each marker.

    • the size of each marker i.e. 20 in this case.

    • the color of the markers; you can assign a name or a hex code.

    • alpha to specify the opacity of the markers where ) represents completely transparent and 1 represents completely opaque.

  • Lines 14–15: Set the output to output.html to specify the endpoint where the plot will appear and use show() to display the created plot.

Square markers

Square markers mark the coordinates corresponding to the dataset using a circle shape. For example, they are used in geographical maps to mark landmarks and buildings, as the square shape provides a distinct visual representation.

The following scatter plot visual is created using it.

Square markers.
Square markers.

Example code

In this example, we create a simple plot using the square markers and give hard-coded coordinates to be marked.

from bokeh.io import output_file, save
from bokeh.plotting import figure, show

myPlot = figure(width = 680, height = 400)

# add a square renderer with a size, color, and alpha
myPlot.square([1, 2, 3, 4, 5], 
              [6, 4, 1, 5, 2], 
              size=20, 
              color="blue", 
              alpha=0.5)

# show the results
output_file("output.html")
show(myPlot)
Creating a simple plot using square markers.

Code explanation

  • Lines 1–2: Import the required methods from bokeh.plotting and bokeh.io which are used to customize the plot and display it, respectively.

  • Line 4: Create a plot and assign the width and heigth to it using the figure() method.

  • Lines 7–11: Create a circle marker using the square() method and pass the following parameters to it :

    • an array of x-axis coordinates for each marker.

    • an array of y-axis coordinates for each marker.

    • the size of each marker i.e. 20 in this case.

    • the color of the markers; you can assign a name or a hex code.

    • alpha to specify the opacity of the markers where ) represents completely transparent and 1 represents completely opaque.

  • Lines 14–15: Set the output to output.html to specify the endpoint where the plot will appear and use show() to display the created plot.

Image markers

Image markers mark the coordinates corresponding to the dataset using different images. For example, they are used in inventory management visualizations in which each data point, representing product quantity and cost analysis, can be associated with the product's image.

The following scatter plot visual is created using it.

Image markers.
Image markers.

Example code

In this example, we create a simple plot using the image markers. We use two images to represent different coordinates and specify a range in the grid to generate random coordinate points.

import numpy as np
from bokeh.io import curdoc, show, output_file, save
from bokeh.models import ColumnDataSource, Grid, ImageURL, LinearAxis, Plot, Range1d

#image url
url = "https://cdn.hashnode.com/res/hashnode/image/upload/v1636051888445/waf76pM6i.png"
url2 = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png"

N = 5

#create markers dictionary
source = ColumnDataSource(dict(
    url = [url]*N,
    x1  = np.linspace(  20, 150, N),
    y1  = np.linspace(  20, 150, N),
))

source2 = ColumnDataSource(dict(
    url2 = [url2]*N,
    x2  = np.linspace( 30,  180, N),
    y2  = np.linspace( 30,  180, N),
))

#plot range
xdr = Range1d(start= 0, end=200)
ydr = Range1d(start= 0, end=200)

#create plot
plot = Plot(
    title=None, x_range=xdr, y_range=ydr, width=650, height=400,
    min_border=0, toolbar_location=None)

#create images
image1 = ImageURL(url="url", x="x1", y="y1", w=10, h=20, anchor="center")
plot.add_glyph(source, image1)

image2 = ImageURL(url="url2", x="x2", y="y2", w=10, h=20, anchor="bottom_right")
plot.add_glyph(source2, image2)

#add axis
xaxis = LinearAxis()
plot.add_layout(xaxis, 'below')

yaxis = LinearAxis()
plot.add_layout(yaxis,'left')

#add layout
plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))

output_file("output.html")
show(plot)
Creating a simple plot using image markers.

Code explanation

  • Lines 1–3: Import numpy for random coordinates generation and required methods from bokeh.model and bokeh.io which are used to create customized visualization and display plots, respectively.

  • Lines 6–7: Create url and url2 variables and assign them the URLs of the images used in the plot.

  • Line 9: Specify the number of times each image is to be used and store it in N. In this case, we use each image 5 times.

  • Line 12,18: Create a dictionary using ColumnDataSource , which provides easy data access for visualization purposes.

  • Lines 13–15,19–21: Create a url list that contains N copies of the image and specify the coordinates range using linespace() and passing the starting coordinate, ending coordinate, and number of copies to the x-axis and y-axis keys.

Note: When using single image we can create single dictionary containing different coordinates ranges as well.

  • Lines 25–26: Specify the x-axis and y-axis range for the grid and assign it to xdr and ydr respectively.

  • Lines 29–31: Create a Plot object and pass the plot properties, including axis range, size, and border, as parameters.

  • Line 34,37: Create an imageURL object and pass the image properties, including the URL, x and y ranges, width, height, and reference point as parameters.

  • Line 35,38: Use add_glyph() and pass the source and corresponding image to it to add it to the plot.

  • Lines 41–45: Create linear axis for x and y and add them to the plot by passing the respective axis and its position to add_layout().

  • Lines 48–49: Create the grid for both the axis and add them to the plot by passing them to add_layout().

  • Lines 51–52: Set the output to output.html to specify the endpoint where the plot will appear and use show() to display the created plot.

Common query

Question

Can I create a plot using two different types of shapes, like the image plot that uses two images?

Show Answer

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved