Examples

Interactive examples showing Data Navigator in action with different chart types and navigation patterns.

Basic

Simple List Navigation — A linear linked-list structure on a Bokeh stacked bar chart, navigated with left/right arrow keys.
Using the Inspector — A bar chart with the Data Navigator Inspector showing the structure graph alongside the chart.
Inspecting Force/Tree — Two inspector modes (force and tree) side-by-side, both synced to a single bar chart.
Inspector Console Menu — An example of using the console and menu that enable in-depth inspection of Data Navigator's structure.
Understanding Dimensions — Mini-examples showing how the dimensions API works: categorical, numerical, circular extents, and compressSparseDivisions.
Dimensions API Example — A line chart demonstrating how the dimensions API automatically builds hierarchical navigation from flat data.
Stacked Bar Chart — A multi-dimensional hierarchical structure on a Visa stacked bar chart, with category and date dimensions.
Data Text Adventure — A text adventure-style interface for navigating data structures without keyboard focus, designed for mobile and screen reader users.
LLM Text Adventure — Extends the text adventure with an optional AI assistant powered by Claude, enabling natural-language questions about the data.
Interactive Elements — A Bokeh scatter chart with clickable data points. Demonstrates how mouse, keyboard, and text-chat users can all select and interact with chart elements using a single onClick callback.

Coming Soon

More examples are being added, D3 and Vega-Lite integrations, spatial navigation for maps, and experimental input modalities.

Have an example? See our GitHub repository.