Colorbar binning based on unknown colorscale


I have a question regarding binning, plotly colorbars, and the plotly colorscales.

I’m looking to create colorbars with distinct color binnings, however, I’m also using the in-built colorscales from plotly.

I have seen a few examples regarding binning, but they use customly set color values. I was wondering if there was a simpler way to do so with the preset colorscales, as opposed to having to manually set multiple color combinations for each of the ~90 colorscales.

Thank you,

Hey @clairew , are you referring to discrete colormaps with that?

I’m referring to this:

1 Like


Thank you! Yes, that is similar to what I was referring to. I have been trying to find if there is a way to take the native colorscales (aggrnyl, bluered, etc) of an non-express Scatter plot, and divide them into discrete sections for binning. I will take a look at the link suggested, hopefully I won’t have to resort to creating associated color bins manually for each native scale.

Thank you,

Like so?

import plotly.graph_objects as go
import numpy as np
import as px
from typing import Iterable, List

def discrete_colorscale(num: int, pallete: Iterable)-> List:
    function creates a discrete colorscale for a given number of values
    # create spaced numbers between 0 and 1
    # double the values, i.e. 0, 0, 1, 1, 2, 2 
    color_bar_values = [val for val in np.linspace(0, 1, num) for _ in range(2)]

    # for pallete you could use a list of strings such as ['red', 'green'...] or a built-in colormap such as px.colors.qualitative.Alphabet
    # double the values, i.e. 'red', 'red', 'green', 'green'
    discrete_colors = [val for val in pallete for _ in range(2)]

    # combine values and colors, start colors at index 1
    colorscale = [[value, color] for value, color in zip(color_bar_values, discrete_colors[1:])]

    # delete first and last list item
    return colorscale

# data
points = 10
x = np.arange(points)
y = np.random.randint(0,10,size=points)

# values for the second color variable 
custom = np.arange(100,1100,100)

fig = go.Figure()

# trace 0, this trace defines the "lines" for the markers and it's colors
            color=custom, #set color equal to a 2nd variable

# trace 1, defines the "inner part" of the markers
            color=y, #set color equal to a variable
            colorscale='reds', # one of plotly colorscales

# move the first colorbar to the left
fig.update_traces({"marker_colorbar_x":-0.15}, selector=0)

fig.update_layout(width=800, height=800)


@clairew As I understood you need a discrete colorscale derived from a continuous one.
Unlike the matplotlib, a plotly continuous colorscale is defined by a number of colors much smaller than 256 (the usual number of colors in a matplotlib colormap).
To get a binned colorscale from a plotly continuous colorscale we have to find the colors of the new
discrete colorscale from those of the continuous one, through linear interpolation, using the function np.interp.

We can get the colors of a continuous colorscale by calling:
px.colors.sequential.ColorscaleName or px.colors.diverging.ColorscaleName.
As we can notice below these colors are either hex or rgb colors, and their number differ from colorscale to colorscale.

I define below a function that display the swatches corresponding to colors returned by px.colors…

from  plotly.colors import unlabel_rgb, hex_to_rgb
import plotly.graph_objects as go
import as px
import numpy as np

def colorscale_swatches(seq):
    data = [go.Bar(x=[k], y=[1], marker_color=c, hovertext=seq[k]) for k, c in enumerate(seq)]
    fig = go.Figure(data=data)
    fig.update_layout(bargap=0.02, template="none",
                      xaxis=dict(showticklabels=False, showgrid=False),
    return fig

Let us plot the swatches corresponding to Viridis:

seq1 = px.colors.sequential.Viridis

fig1 = colorscale_swatches(seq1)

Notice that we have 10 swatches, and their color is given in hex.

Now take the colors for the colormap cmocean.matter

seq2 = px.colors.sequential.matter
['rgb(253, 237, 176)',
 'rgb(250, 205, 145)',
 'rgb(246, 173, 119)',
 'rgb(240, 142, 98)',
 'rgb(231, 109, 84)',
 'rgb(216, 80, 83)',
 'rgb(195, 56, 90)',
 'rgb(168, 40, 96)',
 'rgb(138, 29, 99)',
 'rgb(107, 24, 93)',
 'rgb(76, 21, 80)',
 'rgb(47, 15, 61)']

In this case there are 12 rgb colors, and their swatches are:

fig2 = colorscale_swatches(seq2)

But in our projects we need a discrete colorscale derived from a continuous one containing different number of colors.
The following function does the job, i.e. from a given sequence of colors derived from a continuous colorscale it returns a discrete colorscale of nr_swatches colors.

def binned_colorscale(seq, nr_swatches=5):
    seq: a sequence of hex colors or rgb colors returned by  px.colors.sequential.ColorscaleName
     or px.colors.diverging.ColorscaleName
    nr_swatches: the number of swatches for the discrete colorscale, derived from ColorscaleName     
    if seq[0][0] == '#':
        arr_colors=np.array([hex_to_rgb(s) for s in seq])/255
    elif seq[0][0:3] == 'rgb':
        arr_colors = np.array([unlabel_rgb(s) for s in seq])/255 
        raise ValueError("a plotly colorscale is given either with hex colors or as rgb colors")
    n = len(seq)
    svals = [k/(n-1) for k in range(n)] #the scale values corresponding to the colors in seq
    grid = [k/(nr_swatches-1) for k in range(nr_swatches)]# define the scale values corresponding nr_swatches
    r, g, b = [np.interp(grid, svals, arr_colors[:, k]) for k in range(3)]  #np.interp interpolates linearly
    cmap_arr = np.clip(np.vstack((r, g, b)).T, 0, 1)
    new_colors = np.array(cmap_arr*255, dtype=int)
    discrete_colorscale = []
    N = len(new_colors+1)
    for k in range(N):
        discrete_colorscale.extend([[k/N, f'rgb{tuple(new_colors[k])}'], 
                                    [(k+1)/N,  f'rgb{tuple(new_colors[k])}']]) 
    return discrete_colorscale 


dcolorsc = binned_colorscale(seq2, nr_swatches=7) 
[[0.0, 'rgb(253, 237, 176)'],
 [0.14285714285714285, 'rgb(253, 237, 176)'],
 [0.14285714285714285, 'rgb(246, 178, 123)'],
 [0.2857142857142857, 'rgb(246, 178, 123)'],
 [0.2857142857142857, 'rgb(234, 120, 88)'],
 [0.42857142857142855, 'rgb(234, 120, 88)'],
 [0.42857142857142855, 'rgb(205, 67, 86)'],
 [0.5714285714285714, 'rgb(205, 67, 86)'],
 [0.5714285714285714, 'rgb(158, 36, 97)'],
 [0.7142857142857143, 'rgb(158, 36, 97)'],
 [0.7142857142857143, 'rgb(101, 23, 90)'],
 [0.8571428571428571, 'rgb(101, 23, 90)'],
 [0.8571428571428571, 'rgb(47, 15, 61)'],
 [1.0, 'rgb(47, 15, 61)']]

I hope that this is what you required. The colorbar associated to such a colorscale is also binned. Now to use such a discrete colorscale of `nr_swatches’ colors your data values should be binned as follows:

boundary_vals=[minval+k*(maxval-minval)/nr_swatches for k in range(nr_swatches+1]
1 Like


Thanks to both of you for your assistance. I was able to create the method I needed based on your contributions. Not knowing that plotly express could sequentialize the colorscales had me set back.

Thank you again,