feat: add realtime/streaming data support

[jooyoungseo]

Summary

Add support for realtime and streaming data updates to maidr.js, enabling accessible sonification and navigation of live-updating visualizations (e.g., stock tickers, sensor dashboards, live metrics).

Motivation

chart2music already provides production-ready realtime support through:

• .appendData() — append individual data points in live mode
• .setData() — replace all chart data with re-calculated axes
• Monitor mode — pressing 'M' on a live chart auto-sonifies newly appended data
• Sliding window — maxWidth option caps visible data for streaming scenarios
• Axis auto-scaling — min/max automatically adjust as new data arrives

maidr.js currently has no mechanism for updating data after initialization. All data is parsed once from embedded HTML attributes and stored in readonly fields. Users navigating live dashboards or streaming data visualizations cannot benefit from maidr's accessible features.

Current Architectural Barriers

Barrier	Impact	Details
Immutable data model	High	All trace data is protected readonly — no setters or update methods (src/model/abstract.ts, src/model/line.ts)
One-time SVG binding	High	Highlight elements (highlightValues: SVGElement[][]) are captured from layer.selectors during construction and never re-queried
Cached derived state	High	Min/max values, navigation graph (MovableGraph), audio frequency ranges are all computed once at init
No incremental API	Medium	Only entry point is new Figure(maidr) — full reconstruction; no addDataPoint() or replaceData()
Controller lifecycle	Medium	Controller is created/disposed on focus changes; no state preservation across data updates
Tight DOM coupling	Medium	Model expects static selectors strings to find SVG elements

Proposed API (inspired by chart2music)

// Append a single data point to a trace (for streaming)
maidr.appendData(dataPoint, { traceIndex?, groupIndex? });

// Replace all data (for full refresh)
maidr.setData(newMaidrJson);

// Configuration options
{
  live: true,         // Enable live/realtime mode
  maxWidth: 100,      // Sliding window size (optional)
}

// Monitor mode: user presses 'M' to auto-sonify incoming data

Key Design Considerations

1. Mutable data store: Refactor trace classes to support data mutations with proper invalidation of derived state (min/max, navigation graph, audio ranges)
2. Observer pattern reuse: The existing observer infrastructure (addObserver/notifyStateUpdate) can be extended to propagate data changes to services (audio, braille, text)
3. Dynamic SVG handling: Either re-query selectors on update or accept external SVG mutation notifications
4. Monitor mode: Auto-announce and sonify new data points via screen reader and Web Audio API when the user enables monitoring
5. Performance: Batch updates, debounce recalculations, and use incremental axis scaling rather than full recomputation
6. Backward compatibility: Static charts should continue to work exactly as before; live features should be opt-in

Suggested Implementation Phases

Phase 1: Data replacement (setData)

• Add mutable data support to trace classes
• Implement cache invalidation for min/max and navigation graph
• Add setData() public API on Controller/Figure
• Re-query SVG selectors on data replacement

Phase 2: Data appending (appendData)

• Add appendData() method with incremental axis scaling
• Implement sliding window (maxWidth) support
• Notify observers of data changes

Phase 3: Monitor mode

• Add live configuration option
• Implement 'M' keybinding for monitor mode toggle
• Auto-sonify and announce new data points in monitor mode
• Screen reader announcements for data updates

References

• chart2music live plot example: examples/charts/livePlot.js
• chart2music appendData() implementation: src/c2mChart.ts L1142-1219
• chart2music setData() implementation: src/c2mChart.ts L941-974
• chart2music live tests: test/chart_live.test.ts