Originally published on Medium
A 10-year-old hackathon idea finally comes to life
About 10 years ago, I attended a Web Audio API hackathon, and left with an 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. But 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. That instant understanding that visualisations provide is lost.
Life got busy, and that hackathon idea sat in my notes for a decade, until now. With the help of AI pair programming, I was able to turn that decade-old idea into a working prototype in a fraction of the time.
Introducing 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" });
It works with existing D3.js charts. No rewrites. No special data formats.
sound3fy is not intended to replace tables or screen readers, but to complement them by restoring some of the rapid, high-level pattern recognition that sighted users get from charts.
How sound3fy works
- 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 like pentatonic or major
Try it yourself
Live Demo (interactive sonified charts)
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?
Why sonification?
Research shows that 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.
Recent research backs this up. A 2024 study from UIUC found that combining sonification with other modalities helps blind users interpret statistical charts with high accuracy.
Prior work
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 like 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.
Technical design
sound3fy uses the Web Audio API for low-latency sound generation. Key design decisions include:
- Musical scales: Raw frequency mapping sounds harsh. Quantizing to pentatonic scales makes the audio pleasant while preserving data relationships.
- D3.js plugin architecture: It should work 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.
Looking for feedback
This is an early prototype, and I need feedback, especially from blind and low-vision users. I want to make sure this is genuinely useful, not just well intentioned.
- Does the sonification help you understand data?
- Is the keyboard navigation intuitive?
- What is confusing or missing?
Hopefully it helps bridge that gap on accessibility. If it doesn’t, that’s still useful learning. I hope it sparks a conversation about how we can do better.
GitHub: https://github.com/IsmaelMartinez/sound3fy
Install: npm install sound3fy
If you work in accessibility, data visualisation, or know someone who might benefit from this tool, I would love to hear from you.
Top comments (0)