Giving Bokeh the Glow-Up It Deserves: Smooth Animations, Floating Tooltips

[mixstam1453]

Bokeh visual improvements - animations, tooltips & KPI cards

I made Bokeh charts look nicer. Bars grow in, lines draw themselves, bubbles pop, pie wedges sweep. Tooltips float and glide instead of snapping. KPI cards sit alongside your plots. Single HTML file, no server needed — just show() as usual.

Three files, three calls:

anim(p, easing="backOut", duration=800)
smooth_tip(p, src, mode="bar")
kpi_metric_card(label="Revenue", value="$9,150", delta="+12%", direction="up")

see this: https://github.com/mixstam1821/Bokeh_visual_improving/blob/main/dashboard.py

For the rest plots see this file: https://github.com/mixstam1821/Bokeh_visual_improving/blob/main/examples.py

Example for the lines:

n5 = 40
x5 = list(range(n5))
src5a = ColumnDataSource(dict(
    x=x5, y=[math.sin(i * 0.3) * 10 + 50 for i in x5],
    label=[f"<b>Series A</b><br>Value: {math.sin(i*0.3)*10+50:.1f}" for i in x5]
))
src5b = ColumnDataSource(dict(
    x=x5, y=[math.cos(i * 0.3) * 8 + 45 for i in x5],
    label=[f"<b>Series B</b><br>Value: {math.cos(i*0.3)*8+45:.1f}" for i in x5]
))
p5 = figure(title="5. Multi-line — click legend to re-animate", width=900, height=380,
            background_fill_color="white", x_range=(-1, n5 + 1))
r5a = p5.line('x', 'y', source=src5a, line_width=2.5, color="#FFC115", legend_label="Series A")
r5b = p5.line('x', 'y', source=src5b, line_width=2.5, color="#FF4CE7", legend_label="Series B")

p5.y_range.start, p5.y_range.end = 25, 70

p5.add_tools(HoverTool(tooltips=None, renderers=[r5a, r5b]))
# One combined tooltip for both
smooth_tip_multi_line(
    p5,
    sources=[src5a, src5b],
    title="X: {x}", 
)
anim(p5, easing="cubicInOut", duration=1400, line_tip=True, line_tip_color="#3498db")
mystyle(p5, cross = True)
show(row(row(p5,rmfocus(p5)), stylesheets=[get_gstyle()]))

github.com/mixstam1821/Bokeh_visual_improving

Feedback welcome!

[Bryan]

@mixstam1453 It would be amazing to have some of these features directly in Bokeh, would you be interested to make contributions directly to the library?

[pipcob]

That’s really nice work - I especially like the re-drawing lines, as I’m working on a project which involves a lot of line-graphs, and the “progress” so to speak, of these lines, from left to right, is critical to understanding some underlying biological processes. Is the speed of the animation controlled by the “duration” property?

But it’s all really nice work as I say, and the visual effects are compelling.

[snerd7]

Hey @mixstam1453 , thanks for the great examples you’ve been posting lately, they are really awesome inspiration! I especially appreciated your super sunburst chart example from earlier this year.

I just wanted to offer something simple about the KPI cards, maybe you already know this: there is a great library “Panel” that is largely built on top of bokeh, they offer some base class “ReactiveHTML” with a bit more updating/interaction support baked in (eg new values, or click interaction, …)
So, to change just the value/direction/etc on the KPI card, using ReactiveHTML the same object is preserved in the DOM. (at least i think so…)

Examples
API Reference

Perhaps it would make sense to offer the KPI cards to become a panel “Widget”?