Auto insert <script> "import" in html header?

Community Support
1

While playing with a way to Select the field to use for a colour mapper, I learned it was necessary to add (to access Bokeh.LinearColorMapper from JS)

by hand to the section of the html file.

Is there a way to make that happen automatically?

Thanks!

Richard

2

Interesting - the markup ate the line I wanted to show being inserted! It was:

< script type=“text/javascript” src=“http://cdn.bokeh.org/bokeh/release/bokeh-api-1.4.0.min.js”>’

I added spaces for markup to not eat it again. :slight_smile:

3

@richardxdubois You could put that line in a code formatting block or have it show up without modification.

The bokeh-api script is mostly of interest to pure JS devs who might want to use BokehJS without any Python. (At least, it was created with that use case in mind). In any event, there is nothing on the Python side that would ever include it automatically. However, I would not normally expect people to need it. If you are updating things from a CustomJS callback, e.g. you can pass whatever objects you want to modify directly in the args dict. Perhaps you can describe more about what you are trying to accomplish.

4

My specific use case was for my covid visualization where I have a world map with the colour mapper field set by cases (or deaths) per country (or state). Lately, the doubling rate has been of more interest, so I wanted to add a pull down menu to select the field for the mapper to use. I found an example showing how to access the colour mapper using Bokeh.LinearColorMapper to set the field.

I’m trying to avoid needing a server app to do this.

5

To be specific, here is the stackoverflow example I was looking at:

the answer works a treat.

6

That seems like a very roundabout way of doing things, and also goes against the generally advised “Bokeh Best Pactice”, which is:

Always make the smallest change possible.

Along those lines rather than creating an entirely new LinearColorMapper and replacing the old one with it (a heavyweight operation), I would simply update the properties of the existing one:

# cmap is the original color mapper
callback = CustomJS(args=dict(cmap=cmap), code="""

    // you can directly update the existing cmap here, e.g 
    cmap.low = new_low
    ...

""")
7

Can’t argue with keep it simple. That said, I’m missing something - how to get the display to refresh. Here’s what I did:

coded = """
            var low = Math.min.apply(Math,source.data[cb_obj.value]);
            var high = Math.max.apply(Math,source.data[cb_obj.value]);
            cmap.field_name = cb_obj.value;
            cmap.low = low;
            cmap.high = high;
            cir.title= cb_obj.value;
            source.change.emit();
        """

cb_cselect_d = CustomJS(args=dict(cmap = mapper, source = source, cir=fig),
                        code = coded)

I was looking to the source.change.emit() to force the refresh, but nothing updates…

8

Here is the code preceding the snippet above:

  df = pd.DataFrame({"a": [2, 6, 5, 3, 7, 8, 1, 9, 2, 4],
                   "b": [3, 5, 7, 1, 0, 6, 5, 4, 2, 9],
                   "c": [11, 12, 13, 14, 11, 13, 15, 14, 15, 12],
                   "d": [21, 23, 24, 25, 21, 22, 23, 24, 25, 22]})
source = ColumnDataSource(df)

mapper = linear_cmap(field_name = "c", palette = Spectral5,
                     low = min(df["c"]), high = max(df["c"]))

fig = figure(plot_width = 400, plot_height = 400)

cir = fig.circle(x = "a", y = "b", size = 12,
                 source = source, line_color = mapper, color = mapper)
color_bar = ColorBar(color_mapper = mapper["transform"], width = 8,
                     location = (0, 0))
fig.add_layout(color_bar, "right")
9

Are you passing mapper["transform"] to args?

10

I was not. That did the trick!

So, why is it done that way? I was assuming I was setting the values in the mapper object.

Also, the figure title does not appear after using the Select menu…

11

If you looked at the browser JS console you would probably see errors reports. linear_cmap is a helper function that constructs the “dataspec” that the glyph needs. It has the LinearColormapper inside of it.

Also, the figure title does not appear after using the Select menu…

Figure accepts a plain string as a convenienve, but actual titles are obejcts. You need to set cir.title.text.

12

All working now. Thanks again, Bryan!

And for the lessons :slight_smile:

13

If you looked at the browser JS console you would probably see errors reports. linear_cmap is a helper function that constructs the “dataspec” dictionary that the glyph needs. The actual LinearColormapper is one of the things inside the result.

Also, the figure title does not appear after using the Select menu…

Figure accepts a plain string as a convenience, but actual title property values are objects. You need to set cir.title.text.