Dynamically change colormap image

Community Support
1

Hey.

I have a large bokeh image consisting of about 3 million points. I want to change the colormap of the image, dynamically, through slider widgets. The “image” is really just a large matrix.

AFAIK, I have two options:

  1. Use a bokeh server with python callbacks. This was my initial approach, however, the amount of points seems to be too large for the browser to handle, so it crashes. I’ve looked at datashader, but I am not sure if it will help me and if it works with images.

  2. Use a customJS callback. Is this possible? Can I just pass the GlyphRenderer item to the customJS callback and change the colormap property?

Feedback on how to achieve this would be appreciated.

.

Thanks

swb

2

I’m doing something similar using method 2) and a range slider

range_callback = CustomJS(args=dict(img=img), code='''
                        range = cb_obj.range
                        img.glyph.color_mapper.high = range[1];
                        img.glyph.color_mapper.low = range[0];
                        ''')
range_slider = RangeSlider(start=df.pwr.min(), end=df.pwr.max(),
                           range=(df.pwr.min(), df.pwr.max()),
                           step=1, title="PWR", width=400,
                           callback=range_callback, callback_throttle=1000)

``

···

On Friday, July 21, 2017 at 1:13:32 PM UTC+1, Sondre Baugstø wrote:

Hey.

I have a large bokeh image consisting of about 3 million points. I want to change the colormap of the image, dynamically, through slider widgets. The “image” is really just a large matrix.

AFAIK, I have two options:

  1. Use a bokeh server with python callbacks. This was my initial approach, however, the amount of points seems to be too large for the browser to handle, so it crashes. I’ve looked at datashader, but I am not sure if it will help me and if it works with images.
  1. Use a customJS callback. Is this possible? Can I just pass the GlyphRenderer item to the customJS callback and change the colormap property?

Feedback on how to achieve this would be appreciated.

.

Thanks

swb

3

I attached a code that updates a LinearColorMapper with a RangeSlider using CustomJS.

heatmap.py (3.16 KB)