Make D3.js visualizations accessible through sound
npm install sound3fy> Make D3.js visualizations accessible through sound
sound3fy adds sonification to D3.js visualizations, making charts accessible to blind and low-vision users. Data values become musical notes—higher values play higher pitches.
- 🎵 Musical Scales - Pentatonic, major, minor, blues, chromatic
- 📈 Chart Support - Bar, line (continuous sweep), scatter (2D mapping)
- ⌨️ Keyboard Navigation - Full control without mouse
- 🔈 Screen Reader - ARIA live regions announce values
- 🎯 Hover to Hear - Mouse over any data point
``javascript`
// One line to add sonification
d3.selectAll(".bar").sonify({ pitch: "value" });
`bash`
npm install sound3fy
`javascript
const sonify = d3.selectAll(".bar")
.data(data)
.sonify({
pitch: {
field: "value",
range: [220, 880],
scale: "pentatonic"
},
duration: 200,
gap: 50
});
// Control playback
sonify.play();
sonify.pause();
sonify.stop();
sonify.next();
sonify.previous();
sonify.setSpeed(1.5);
`
`javascript`
d3.selectAll(".dot").sonify({
pitch: "value",
mode: "continuous" // Smooth frequency sweep
});
`javascript`
d3.selectAll(".dot").sonify({
chartType: "scatter",
x: "area", // X → stereo pan
pitch: { field: "pop" } // Y → pitch
});
| Key | Action |
|-----|--------|
| Space | Play/Pause |←
| → | Navigate |Home
| End | First/Last |+
| - | Speed |M
| | Toggle mode |Esc
| | Stop |
`javascript`
{
pitch: { field: "value", range: [220, 880], scale: "pentatonic" },
volume: { field: null, range: [0.4, 0.7] },
pan: { range: [-0.7, 0.7] },
duration: 200,
gap: 50,
mode: "discrete", // or "continuous"
accessibility: { keyboard: true, announce: true, focus: true, hover: true }
}
| Scale | Notes |
|-------|-------|
| pentatonic | Pleasant, no dissonance (default) |major
| | Bright |minor
| | Serious |blues
| | Bluesy |chromatic
| | All 12 notes |continuous
| | Direct frequency |
Built for WCAG 2.2 compliance:
- ARIA: role="graphics-symbol", aria-label, aria-live="polite"
- Keyboard: Full navigation
- Focus: Visual indicators with high contrast support
- Reduced Motion: Respects user preferences
`bash``
git clone https://github.com/IsmaelMartinez/sound3fy.git
cd sound3fy
npm install
npm run dev
npm test
- Architecture Decisions - Key design decisions
Are you blind or low-vision? Your feedback is invaluable! Please share your experience — does the sonification work for you?
MIT
---
Making data accessible, one sound at a time. 🎵