Adding a ColorBar using BokehJS

Hello guys,

I am trying to provide a colorbar for the figure using appopriate ColorMapper with BokehJS. Here’s a short code snippet:

                var cds = new Bokeh.ColumnDataSource({

                    data: {

                        x: JSON.parse(returned_data['x']),

                        y: JSON.parse(returned_data['y']),

                        addit_param: JSON.parse(returned_data['addit_param'])

                    }

                });

                var mapper = new Bokeh.LogColorMapper({

                    palette: _data['palette'],

                    low: Math.min.apply(Math, JSON.parse(returned_data['addit_param'])),

                    high: Math.max.apply(Math, JSON.parse(returned_data['addit_param'])),

                });

                var color_bar = new Bokeh.ColorBar({

                    color_mapper: mapper,

                    title: "myCBar"

                });

plot.add_layout(color_bar, ‘right’);

But this code fails to draw corresponding ColorBar for me. Though it manages to draw colored data (circle glyphs not provided in snippet).

Also, data rendering fails if I use LinearColorMapper instead of LogColorMapper, or if I pass palette as a predefined string-name like ‘Viridis256’.

The latter was fixed by passing a list of 256 colors corresponding to Viridis scale - _data[‘palette’].

Could you help me please to find out where is the problem here?

Hi,

Hello guys,

I am trying to provide a colorbar for the figure using appopriate ColorMapper with BokehJS. Here’s a short code snippet:

                var cds = new Bokeh.ColumnDataSource({
                    data: {
                        x: JSON.parse(returned_data['x']),
                        y: JSON.parse(returned_data['y']),
                        addit_param: JSON.parse(returned_data['addit_param'])
                    }
                });
                var mapper = new Bokeh.LogColorMapper({
                    palette: _data['palette'],
                    low: Math.min.apply(Math, JSON.parse(returned_data['addit_param'])),
                    high: Math.max.apply(Math, JSON.parse(returned_data['addit_param'])),
                });
                var color_bar = new Bokeh.ColorBar({
                    color_mapper: mapper,
                    title: "myCBar"
                });

plot.add_layout(color_bar, ‘right’);

But this code fails to draw corresponding ColorBar for me. Though it manages to draw colored data (circle glyphs not provided in snippet).

Also, data rendering fails if I use LinearColorMapper instead of LogColorMapper, or if I pass palette as a predefined string-name like ‘Viridis256’.

The latter was fixed by passing a list of 256 colors corresponding to Viridis scale - _data[‘palette’].

Could you help me please to find out where is the problem here?

it would be helpful to get a complete code snippet, to see the full picture. In general this should would, but I suppose it may fail if the color bar is added after the plot is initially showed (it’s a known bug where bokehjs doesn’t listen to changes to certain properties).

Mateusz

···

On Wed, Dec 26, 2018 at 10:34 AM [email protected] wrote:

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2877df67-db00-41ff-a7e8-bfd3ada6d5fd%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thank you for your response!

But if there’s a way to force the plot to redraw its certain elements (something like plot.change.emit()) in such case?

Here is the complete code:

// Creating the plot
var fes_fig = new Bokeh.Plotting.figure({

plot_width: 1200,

plot_height: 800,

title: "",

x_range: new Bokeh.Range1d({ start: 0, end: 100 }),

y_range: new Bokeh.Range1d({ start: 0.1, end: 1000 }),

x_axis_type: 'linear',

y_axis_type: 'log',

name: 'fes-plot',

});

fes_fig.xaxis.axis_label = ‘X-axis’;

fes_fig.yaxis.axis_label = ‘Y-axis’;

fes_fig.yaxis.formatter = new Bokeh.BasicTickFormatter({ use_scientific: false });

fes_fig._legend.location = “top_right”

fes_fig._legend.click_policy = “hide”

fes_fig._legend.label_text_font_size = “8pt”

var doc = new Bokeh.Document();

doc.add_root(fes_fig);

Bokeh.embed.add_document_standalone(doc, document.getElementById(“fes-workspace”

));

// Adding some data
// ColumnDataSource with x, y data and data specifying the color

                var cds = new Bokeh.ColumnDataSource({

                    data: {

                        x: JSON.parse(returned_data['x']),

                        y: JSON.parse(returned_data['y']),

                        addit_param: JSON.parse(returned_data['addit_param'])

                    }

                });

// ColorMapper provided with palette as a list of 256 Viridis palette colors

                var mapper = new Bokeh.LogColorMapper({

                    palette: _data['palette'],

                    low: Math.min.apply(Math, JSON.parse(returned_data['addit_param'])),

                    high: Math.max.apply(Math, JSON.parse(returned_data['addit_param']))

                });

// Creating a colorbar

                var color_bar = new Bokeh.ColorBar({

                    color_mapper: mapper,

                    title: "MyColorBar",

                });

// Creating a circle glyph with provided color mapper

                var newGlyphRenderer = fes_plot.circle({

                    x: {field: 'x'},

                    y: { field: 'y' },

                    size:8,

                    fill_color: { field: 'addit_param', transform: mapper },

                    line_color: 'black',

                    line_width: 1,

                    source: cds

                });

// Adding the colorbar to the plot layout

fes_plot.add_layout(color_bar, ‘right’);

``

···

пятница, 28 декабря 2018 г., 3:30:33 UTC+3 пользователь mateusz.paprocki написал:

Hi,

On Wed, Dec 26, 2018 at 10:34 AM [email protected] wrote:

Hello guys,

I am trying to provide a colorbar for the figure using appopriate ColorMapper with BokehJS. Here’s a short code snippet:

                var cds = new Bokeh.ColumnDataSource({
                    data: {
                        x: JSON.parse(returned_data['x']),
                        y: JSON.parse(returned_data['y']),
                        addit_param: JSON.parse(returned_data['addit_param'])
                    }
                });
                var mapper = new Bokeh.LogColorMapper({
                    palette: _data['palette'],
                    low: Math.min.apply(Math, JSON.parse(returned_data['addit_param'])),
                    high: Math.max.apply(Math, JSON.parse(returned_data['addit_param'])),
                });
                var color_bar = new Bokeh.ColorBar({
                    color_mapper: mapper,
                    title: "myCBar"
                });

plot.add_layout(color_bar, ‘right’);

But this code fails to draw corresponding ColorBar for me. Though it manages to draw colored data (circle glyphs not provided in snippet).

Also, data rendering fails if I use LinearColorMapper instead of LogColorMapper, or if I pass palette as a predefined string-name like ‘Viridis256’.

The latter was fixed by passing a list of 256 colors corresponding to Viridis scale - _data[‘palette’].

Could you help me please to find out where is the problem here?

it would be helpful to get a complete code snippet, to see the full picture. In general this should would, but I suppose it may fail if the color bar is added after the plot is initially showed (it’s a known bug where bokehjs doesn’t listen to changes to certain properties).

Mateusz

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2877df67-db00-41ff-a7e8-bfd3ada6d5fd%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.