sound3fy 🔊

Make D3.js visualizations accessible through sound

▶ Live Demo · Why?

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.

Features

• 🎵 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

Quick Start

// One line to add sonification
d3.selectAll(".bar").sonify({ pitch: "value" });

Installation

npm install sound3fy

Usage

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);

Line Charts (Continuous Mode)

d3.selectAll(".dot").sonify({
  pitch: "value",
  mode: "continuous"  // Smooth frequency sweep
});

Scatter Plots (2D Mapping)

d3.selectAll(".dot").sonify({
  chartType: "scatter",
  x: "area",              // X → stereo pan
  pitch: { field: "pop" } // Y → pitch
});

Keyboard Shortcuts

| Key | Action | |-----|--------| | Space | Play/Pause | | ← → | Navigate | | Home End | First/Last | | + - | Speed | | M | Toggle mode | | Esc | Stop |

Options

{
  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 }
}

Scales

| Scale | Notes | |-------|-------| | pentatonic | Pleasant, no dissonance (default) | | major | Bright | | minor | Serious | | blues | Bluesy | | chromatic | All 12 notes | | continuous | Direct frequency |

Accessibility

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

Development

git clone https://github.com/IsmaelMartinez/sound3fy.git
cd sound3fy
npm install
npm run dev
npm test

Documentation

• Architecture Decisions - Key design decisions

Help Wanted

Are you blind or low-vision? Your feedback is invaluable! Please share your experience — does the sonification work for you?

License

MIT

Making data accessible, one sound at a time. 🎵