Module adapters/d3

MAIDR D3.js Binder

Provides functions to extract data from D3.js-rendered SVG charts and convert them to the MAIDR JSON schema for accessible, non-visual chart interaction.

D3.js is the most widely used low-level SVG-based data visualization library on the web. This binder bridges D3 charts to MAIDR's accessibility features including audio sonification, text descriptions, braille output, and keyboard navigation.

Supported Chart Types

• Bar charts via bindD3Bar
• Line charts (single and multi-line) via bindD3Line
• Scatter plots via bindD3Scatter
• Heatmaps via bindD3Heatmap
• Box plots via bindD3Box
• Histograms via bindD3Histogram
• Candlestick charts via bindD3Candlestick
• Segmented bar charts (stacked, dodged, normalized) via bindD3Segmented
• Smooth/regression curves via bindD3Smooth

How It Works

D3.js binds data to DOM elements via the __data__ property during .data() joins. The binder functions query the SVG for chart elements using CSS selectors and extract the bound data to generate the MAIDR schema.

Usage

With Script Tag (vanilla JS)

<script src="maidr/dist/d3.js"></script>
<script>
  // After D3 renders the chart: the binder writes the `maidr-data`
  // attribute for you by default (pass `autoApply: false` to opt out).
  maidrD3.bindD3Bar(svgElement, {
    selector: 'rect.bar',
    title: 'My Chart',
    axes: { x: 'Category', y: 'Value' },
  });
</script>
Copy

With ES Modules

import { bindD3Bar } from 'maidr/d3';

const result = bindD3Bar(svgElement, {
  selector: 'rect.bar',
  title: 'My Chart',
  axes: { x: 'Category', y: 'Value' },
});
Copy

With React

import { Maidr } from 'maidr/react';
import { bindD3Bar } from 'maidr/d3';

function AccessibleBarChart() {
  const svgRef = useRef(null);
  const [maidrData, setMaidrData] = useState(null);

  useEffect(() => {
    // After D3 renders into svgRef.current:
    const result = bindD3Bar(svgRef.current, { ... });
    setMaidrData(result.maidr);
  }, []);

  return maidrData ? (
    <Maidr data={maidrData}>
      <svg ref={svgRef}>...</svg>
    </Maidr>
  ) : <svg ref={svgRef} />;
}
Copy