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.

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)