Change Plotting Field Color On Dropdown Callback

Hi Bokeh Community,

Trying to create a dropdown widget with values to control the color plotting metric. My larger case is having a map with polygons and various metrics to choose from for the coloring, so my sample case here is a somewhat simpler version with 2 polygon squares and coloring values (albeit kinda wonky - open to suggestions). I’m trying to do this as a standalone with JS, not bokeh server.

I’m trying to have a widget pass in the metric choice (cb_obj.value) through to the patches.fill_color position. Console logs show that the values are being passed correctly but don’t update properly.

from bokeh.models.widgets import Dropdown

from bokeh.io import show

from bokeh.layouts import Column, Row, Plot

from bokeh.models import ColumnDataSource, Patches, HoverTool, CustomJS, DataRange1d, LogColorMapper

from bokeh.palettes import YlGn as palette #YlGn RdYlGn

palette = palette[9]

palette.reverse()

color_mapper = LogColorMapper(palette=palette)

data = dict(x=[[1,2,2,1,1], [2,3,3,2,2]],

        y=[[1,1,2,2,1], [2,2,3,3,2]], 

        z=[[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]], 

        foo=[[10, 9, 8, 7, 6], [5, 4, 3, 2, 1]]) 

xdr = DataRange1d()

ydr = DataRange1d()

p = Plot(title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,

h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)

patched = Patches(xs = ‘x’, ys = ‘y’, fill_color = {“field”:“z”, “transform”:color_mapper}, fill_alpha=0.8, line_color = “white”, line_width = 0.7)

p.add_glyph(ColumnDataSource(data), patched)

dropdown = Dropdown(label=“Metric Selection For Color”, menu=[(“z”, “z”), (“foo”, “foo”)])

callback_d = CustomJS(args=dict(patched=patched), code="""

var fill = patched.fill_color['field'];    

console.log("patched.fill_color")

const value = cb_obj.value;

fill = value;

source.change.emit();

""")

dropdown.js_on_change(“value”, callback_d)

show(Column(dropdown, p))

``