Bokeh Basic Concepts: Understanding the Core Building Blocks of Interactive Visualizations

Before creating advanced dashboards and interactive charts with Bokeh, it's important to understand the library's fundamental concepts. Bokeh is designed with a flexible architecture that makes it easy to build everything from simple line charts to sophisticated web-based data applications.

In this guide, you'll explore the core concepts of Bokeh, including figures, glyphs, data sources, tools, layouts, models, and documents. Understanding these components will help you write cleaner code and build more effective visualizations.

---

What Are Bokeh's Basic Concepts?

Bokeh is built around several key components that work together to create interactive visualizations. Each component has a specific role, and learning how they interact will make developing Bokeh applications much easier.

The most important concepts include:

• Figures
• Glyphs
• Data Sources
• Axes
• Ranges
• Tools
• Layouts
• Widgets
• Models
• Documents

Let's explore each one in detail.

---

Figure

A Figure is the main plotting canvas in Bokeh. It serves as the container for everything you add to a visualization, including glyphs, axes, grids, titles, legends, and interactive tools.

Creating a figure is usually the first step in any Bokeh application.

Example:

from bokeh.plotting import figure

plot = figure(
    title="Monthly Sales",
    width=700,
    height=400
)

You can customize a figure by adjusting its size, title, background color, toolbar, and many other properties.

---

Glyphs

Glyphs are the visual elements used to display data. Every chart is made up of one or more glyphs.

Some common glyph types include:

• Line
• Circle
• Square
• Triangle
• Scatter
• Bar
• Step
• Patch
• Wedge
• Rectangles

Example:

plot.line(x, y)

plot.circle(x, y)

Multiple glyphs can be combined in a single figure to create richer visualizations.

---

Data Sources

Although Bokeh allows you to pass Python lists directly to plotting functions, larger projects often use ColumnDataSource.

A data source organizes data into named columns that multiple glyphs can share.

Example:

from bokeh.models import ColumnDataSource

source = ColumnDataSource(data={
    "x": [1,2,3,4],
    "y": [5,6,7,8]
})

Using data sources simplifies updates, filtering, and linking multiple plots.

---

Axes

Axes define the horizontal and vertical scales of a chart.

Most figures include:

• X-axis
• Y-axis

You can customize:

• Labels
• Tick marks
• Fonts
• Colors
• Formatting
• Visibility

Example:

plot.xaxis.axis_label = "Month"

plot.yaxis.axis_label = "Revenue"

Clear axis labels make charts easier to understand.

---

Ranges

Ranges determine how much of the data is visible.

Bokeh automatically calculates ranges based on your data, but you can also specify custom ranges.

Example:

plot.x_range.start = 0
plot.x_range.end = 100

Custom ranges provide greater control over the appearance of visualizations.

---

Tools

Interactive tools allow users to explore charts directly.

Some commonly used tools include:

• Pan
• Wheel Zoom
• Box Zoom
• Hover
• Save
• Reset
• Crosshair
• Box Select
• Lasso Select

Example:

plot = figure(
    tools="pan,wheel_zoom,hover,reset"
)

These tools make Bokeh visualizations far more engaging than static images.

---

Hover Tool

The Hover Tool displays additional information when users move the mouse over glyphs.

Example:

from bokeh.models import HoverTool

hover = HoverTool(
    tooltips=[
        ("Sales", "@sales"),
        ("Month", "@month")
    ]
)

plot.add_tools(hover)

Hover tooltips improve usability while keeping charts uncluttered.

---

Layouts

Complex applications often contain multiple charts.

Bokeh provides layout functions that organize plots into rows, columns, grids, and responsive dashboards.

Examples include:

• Row
• Column
• Grid Layout
• Tabs

Example:

from bokeh.layouts import row

layout = row(plot1, plot2)

Layouts help create clean, organized user interfaces.

---

Widgets

Widgets allow users to interact with visualizations.

Popular widgets include:

• Button
• Slider
• Select
• Checkbox
• Radio Button
• Date Picker
• Text Input

Widgets are commonly used in dashboards where users need to filter or update data dynamically.

---

Models

Everything in Bokeh is represented internally as a Model.

Figures, glyphs, tools, widgets, layouts, and axes all inherit from Bokeh's model system.

This architecture allows components to communicate efficiently and makes Bokeh highly extensible.

Although beginners rarely interact directly with models, understanding that they form the foundation of the library is useful as projects become more advanced.

---

Documents

A Document represents the complete Bokeh application.

It contains every model used in your visualization and manages communication between Python and the browser.

Documents become especially important when building interactive web applications with Bokeh Server.

---

Putting It All Together

A typical Bokeh workflow looks like this:

1. Create a figure.
2. Prepare your data.
3. Add glyphs.
4. Customize axes and titles.
5. Enable interactive tools.
6. Arrange layouts if necessary.
7. Display or save the visualization.

Understanding this workflow makes it easier to build applications of any size.

---

Best Practices

When working with Bokeh:

• Use meaningful axis labels.
• Organize data with ColumnDataSource.
• Avoid overcrowding charts.
• Keep layouts simple and readable.
• Use interactive tools where they add value.
• Apply consistent colors and styles.
• Test visualizations on different screen sizes.

These practices improve both usability and maintainability.

---

Common Beginner Mistakes

Some common issues include:

• Forgetting to create a figure before adding glyphs.
• Passing data columns of different lengths.
• Overusing colors and effects.
• Ignoring chart titles and labels.
• Adding unnecessary interactive tools.
• Not organizing code into reusable functions.

Avoiding these mistakes will make your projects cleaner and easier to maintain.

---

Conclusion

Learning Bokeh's basic concepts is the first step toward creating professional, interactive data visualizations. By understanding figures, glyphs, data sources, axes, tools, layouts, widgets, models, and documents, you'll have the foundation needed to build everything from simple charts to feature-rich dashboards.

As you continue exploring Bokeh, these core concepts will remain central to every project. Mastering them now will make it much easier to learn advanced topics such as streaming data, linked plots, custom callbacks, and full web applications powered by Bokeh Server.