📊 Monthly Sales 2024
Press Play or use arrow keys to hear the data
💻 Code Example
// Create your D3 bar chart as usual const bars = svg.selectAll('.bar') .data(data) .enter() .append('rect') .attr('class', 'bar') .attr('x', d => x(d.month)) .attr('y', d => y(d.value)) .attr('height', d => height - y(d.value)); // Add sonification with one line! const sonification = bars.sonify({ pitch: { field: 'value', // Map 'value' to pitch range: [220, 880], // Frequency range (Hz) scale: 'pentatonic' // Musical scale }, duration: 200, // Note duration (ms) gap: 50, // Gap between notes (ms) mode: 'discrete' // Individual notes }); // Control playback sonification.play(); // Start playing sonification.pause(); // Pause sonification.stop(); // Stop and reset
📈 Revenue vs Expenses 2024
Press Play or use arrow keys
💻 Code Example
// Create your D3 line chart as usual const dots = svg.selectAll('.dot') .data(data) .enter() .append('circle') .attr('class', 'dot') .attr('cx', d => x(d.month)) .attr('cy', d => y(d.value)) .attr('r', 5); // Add continuous sonification for smooth trend sweep const sonification = dots.sonify({ pitch: { field: 'value', range: [220, 880], scale: 'pentatonic' }, duration: 200, gap: 30, mode: 'continuous' // Smooth frequency sweep! }); // Continuous mode sweeps through frequencies // Perfect for hearing trends in line charts sonification.play(); // Toggle between modes sonification.setMode('discrete'); // Individual notes sonification.setMode('continuous'); // Smooth sweep
⚬ City Population vs Area
Press Play or use arrow keys
💻 Code Example
// Scatter plot with 2D sonification // X values → stereo pan (spatial position) // Y values → pitch (frequency) const dots = svg.selectAll('.dot') .data(data) .enter() .append('circle') .attr('cx', d => x(d.area)) .attr('cy', d => y(d.population)) .attr('r', 6); // 2D mapping: X → pan, Y → pitch const sonification = dots.sonify({ chartType: 'scatter', // Enable 2D mapping x: 'area', // X data field → pan pitch: { field: 'population', // Y field → pitch range: [220, 880], scale: 'pentatonic' }, duration: 300 }); // Points on the left → left speaker // Points on the right → right speaker // Higher Y values → higher pitch sonification.play();
⚙️ Sonification Options
⌨️ Keyboard Shortcuts
Space Play/Pause
←→ Navigate
Home First
End Last
+- Speed
M Toggle mode
Esc Stop