First steps 5: Vectorizing glyph properties#

In the previous first steps guide, you customized various aspects of your plot by adding and changing attributes.

In this section, you will use vectors of data to influence aspects of your plot and its elements.

Vectorizing colors#

So far, you have assigned specific colors to a glyph by using properties such as fill_color.

To change colors depending on values in a variable, pass a variable containing color information to the fill_color attribute:

import random

from bokeh.plotting import figure, show

# generate some data (1-10 for x, random values for y)
x = list(range(0, 26))
y = random.sample(range(0, 100), 26)

# generate list of rgb hex colors in relation to y
colors = [f"#{255:02x}{int((value * 255) / 100):02x}{255:02x}" for value in y]

# create new plot
p = figure(
    title="Vectorized colors example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add circle and line renderers
line = p.line(x, y, line_color="blue", line_width=1)
circle = p.circle(x, y, fill_color=colors, line_color="blue", size=15)

# show the results
show(p)

In this example, the color of every circle corresponds to the y value of that circle.

See also

For more information on how to map data points to colors and color palettes, see Client-side color mapping in the user guide.

Vectorizing colors and sizes#

To create a plot with colors and sizes in relation to your data, apply the same principle to the radius argument of your renderer:

import numpy as np

from bokeh.plotting import figure, show

# generate some data
N = 1000
x = np.random.random(size=N) * 100
y = np.random.random(size=N) * 100

# generate radii and colors based on data
radii = y / 100 * 2
colors = [f"#{255:02x}{int((value * 255) / 100):02x}{255:02x}" for value in y]

# create a new plot with a specific size
p = figure(
    title="Vectorized colors and radii example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add circle renderer
p.circle(
    x,
    y,
    radius=radii,
    fill_color=colors,
    fill_alpha=0.6,
    line_color="lightgrey",
)

# show the results
show(p)

In this example, the color and diameter of every circle correspond to the y value of that circle.

Color mapping with palettes#

Bokeh comes with dozens of pre-defined color palettes that you can use to map colors to your data. This includes palettes from Brewer, D3, or Matplotlib. See palettes for a list of all available palettes.

First, use the linear_cmap() function to create a color map for your data. The required attributes for this function are:

  • field: the data sequence to map colors to

  • palette: the palette to use

  • low: the lowest value to map a color to

  • high: the highest value to map a color to

Then assign your color mapper to the color parameter of your renderer:

from bokeh.io import show
from bokeh.palettes import Turbo256
from bokeh.plotting import figure
from bokeh.transform import linear_cmap

# generate data
x = list(range(-32, 33))
y = [i**2 for i in x]

# create linear color mapper
mapper = linear_cmap(field_name="y", palette=Turbo256, low=min(y), high=max(y))

# create plot
p = figure(width=500, height=250)

# create circle renderer with color mapper
p.circle(x, y, color=mapper, size=10)

show(p)

See also

For more information about color mapping and other similar operations, see Client-side color mapping and Transforming data in the user guide. In addition to linear_cmap, this includes log_cmap and factor_cmap, for example.

To learn more about Bokeh’s color palettes, see palettes in the reference guide. This document contains an overview of all available palettes and the various ways you can make those palettes available to your plots.