Bokeh Interactive Plots — Core Concepts

Bokeh is a Python library that generates interactive web visualizations. Unlike Matplotlib (which renders static images) or Plotly (which relies on the Plotly.js engine), Bokeh produces standalone HTML documents powered by BokehJS, its own JavaScript library. This means full control over rendering and interactivity without depending on third-party JavaScript services.

The Glyph Model

Bokeh’s core abstraction is the glyph — a visual shape (circle, line, bar, patch) that gets rendered on a canvas. Every glyph method on a figure maps data to visual properties.

A figure object is your canvas. You add glyphs to it, and each glyph reads from a data source. The ColumnDataSource is the fundamental data container — essentially a dictionary of equal-length arrays that powers all Bokeh plots.

When you call fig.circle(x="col_a", y="col_b", source=source), Bokeh maps each row of the data source to one circle on the canvas. Visual properties like size, color, and alpha can be fixed values or column references, enabling data-driven styling.

The Tools System

Bokeh’s toolbar provides interactive controls that users see in the browser. Default tools include pan, box zoom, wheel zoom, reset, and save. You customize this per plot:

Built-in tools fall into categories:

• Navigation: Pan, WheelZoom, BoxZoom, ZoomIn/ZoomOut
• Inspection: HoverTool, CrosshairTool
• Selection: BoxSelect, LassoSelect, TapTool, PolySelect
• Action: ResetTool, SaveTool, UndoTool, RedoTool

The HoverTool is particularly important. It accepts a tooltips parameter — a list of (label, @column) pairs that display data values when the user hovers over a glyph. You can include HTML formatting in tooltips for rich display.

Layouts and Composition

Single plots are rarely enough. Bokeh provides layout primitives: row(), column(), and gridplot() arrange multiple figures together. Tabs and Panel create tabbed interfaces.

Linked panning and linked brushing connect multiple plots. When two figures share the same x_range or y_range objects, panning one pans the other. When they share a ColumnDataSource, selecting points in one figure highlights the same points in the other — a technique called linked brushing that’s powerful for multivariate exploration.

Static vs. Server Mode

Bokeh operates in two modes:

Static output generates standalone HTML files via output_file() and save(). All interactivity (zoom, hover, pan) works in the browser with no running Python process. This is perfect for reports, dashboards shared via email, or embedding in web pages.

Bokeh Server adds a live Python process behind the visualization. User interactions — slider changes, button clicks, selections — trigger Python callbacks that can transform data, update plots, and even run ML models. The server communicates via WebSocket, keeping the browser and Python synchronized.

Server mode enables things static output can’t: real-time streaming data, database queries triggered by user input, and complex multi-step interactions.

How It Works Under the Hood

When you call show(fig), Bokeh serializes the plot into a JSON document describing every glyph, data source, tool, and layout. BokehJS in the browser deserializes this and renders it on an HTML5 canvas. User interactions modify the JavaScript-side model, and in server mode, those changes sync back to the Python model.

Common Misconception

Many assume Bokeh requires a running server for any interactivity. That’s wrong. Pan, zoom, hover, selection, and linked brushing all work in static HTML. You only need the server when user actions need to trigger Python code — like querying a database or retraining a model.

When to Choose Bokeh

Bokeh fits best when you need interactive visualizations that deploy as self-contained HTML files, dashboard-style layouts with linked plots, or streaming real-time data displays. If you need quick statistical plots, Seaborn is faster. If you need 3D plots or animated transitions, Plotly may be a better fit. Bokeh’s sweet spot is custom interactive tools and large-scale browser-rendered visualizations.

One thing to remember: Bokeh separates interactivity into two tiers — rich browser-side interaction (zoom, hover, select) that works without a server, and Python-backed callbacks for when user actions need to trigger real computation.