Data Navigator

Simple API

Pass your plot container and data — the wrapper infers chart type, builds a navigable structure, and adds a text-chat interface automatically.

Text-chat by default

The text menu lets users type navigation commands in plain language, making charts accessible without requiring keyboard focus or special hardware.

Keyboard mode available

Enable keyboard-first navigation with mode: 'keyboard' for users who prefer arrow-key or focus-based navigation. Both modes can run simultaneously.

LLM-ready

Plug in any LLM to let users ask natural-language questions about the data alongside structured navigation.

Built on data-navigator

A thin, opinionated wrapper over the core data-navigator library. Every option is escapable — advanced users have full access to the underlying API.

Inspector compatible

Pass the returned `structure` directly to @data-navigator/inspector to visualize the navigation graph while building or debugging.

What is this?

@data-navigator/bokeh-wrapper makes it easy to add accessible data navigation to any Bokeh chart. It is part of the Data Navigator project.

Bokeh charts are visually rich but historically inaccessible — assistive technologies can't meaningfully interact with the canvas or SVG output. This wrapper builds a parallel accessible interface that lets users navigate and interact with the underlying data and visualization.

Bokeh's Accessibility Efforts

This project is informed by the ongoing Bokeh Accessibility Audit, which documents and tracks accessibility issues in Bokeh. The audit is a separate project — check it out if you want to understand the problem space more deeply (or are interested in embarking on your own ecosystem-wide accessibility overhaul). The audit and this work has been supported by a CZI Essential Open Source Software (EOSS) Cycle 6 grant, “Accessible interactive data visualizations in Python with Bokeh." This wrapper's contributions have been led by Frank Elavsky, in collaboration with folks from Quansight, Anaconda, and Bokeh.

Quick Start

bash

npm install data-navigator @data-navigator/bokeh-wrapper

import { addDataNavigator } from '@data-navigator/bokeh-wrapper';
import 'data-navigator/text-chat.css';

// After your Bokeh chart is rendered:
const wrapper = addDataNavigator({
    plotContainer: '#my-plot',
    data: myData
});

That's it. The wrapper will:

Set the Bokeh plot to inert so screen readers skip the inaccessible output

Infer the chart type from your data

Build a navigable graph structure

Append a text-chat interface after the plot

Bokeh WrapperAccessible data navigation for Bokeh charts