Making Data Visualisations Audible
Source: Dev.to
Introduction
About 10 years ago I attended a Web Audio API hackathon and left with the idea of a side project: what if blind users could “hear” data visualisations?
Charts are everywhere—sales dashboards, stock prices, COVID statistics, climate data. For sighted users a quick glance reveals trends, outliers, and patterns. For the 2.2 billion people with vision impairments worldwide, these visualisations are essentially invisible walls. Screen readers typically announce that a chart exists or read values sequentially, so the instant understanding that visualisations provide is lost.
Life got busy, and the hackathon idea sat in my notes for a decade—until now. With the help of AI pair‑programming I turned that old idea into a working prototype.
sound3fy
sound3fy is an open‑source library that adds sonification to D3.js visualisations. One line of code makes many charts audible:
d3.selectAll(".bar").sonify({ pitch: "value" });- Works with existing D3.js charts – no rewrites or special data formats required.
- Not intended to replace tables or screen readers, but to complement them by restoring rapid, high‑level pattern recognition that sighted users get from charts.
Core Features
| Feature | Description |
|---|---|
| Keyboard navigation | Arrow keys to explore individual data points |
| Screen reader support | ARIA live regions announce values |
| Pitch mapping | Higher data values play higher notes |
| Stereo panning | Position maps to left/right audio channels |
| Musical scales | Notes quantized to pleasant scales (pentatonic, major) |
Demo
The demo includes bar charts, line charts, and scatter plots. Try closing your eyes and pressing Play—can you tell if sales are increasing or decreasing?
Research & Background
- Humans are particularly good at detecting patterns through sound: rising pitch for trends, rhythm for regularity, and stereo positioning for spatial relationships.
- Studies of sonification tools suggest that blind users can understand trends and comparisons in ways much closer to how sighted users read charts.
- A 2024 study from UIUC found that combining sonification with other modalities helps blind users interpret statistical charts with high accuracy.
Sonification for accessibility isn’t new. Highcharts has offered a sonification module for years, and tools like TwoTone let anyone turn data into music without code. Research tools such as MAIDR have explored multimodal approaches combining sound with braille and natural audio.
sound3fy aims to bring this capability to the D3.js ecosystem, where many custom visualisations live but accessibility tooling is sparse. Chart2Music is a valid alternative, especially if you aren’t using D3.js for your graphs.
Design Decisions
- Musical scales – Raw frequency mapping sounds harsh; quantizing to pentatonic scales makes the audio pleasant while preserving data relationships.
- D3.js plugin architecture – Works with any existing D3.js visualisation; no need to rebuild your charts.
- Accessibility‑first – Full keyboard navigation, ARIA attributes, focus management, and screen‑reader announcements are built in.
Call for Feedback
This is an early prototype, and I need feedback—especially from blind and low‑vision users—to ensure it is genuinely useful, not just well‑intentioned.
- Does the sonification help you understand data?
- Is the keyboard navigation intuitive?
- What is confusing or missing?
Your input will help bridge the accessibility gap. Even if the tool doesn’t meet every need, the insights are valuable for future work.
Installation
npm install sound3fyRepository
GitHub: