Skip to content

listening to sounds of data visualizations¤

in this stream i connect concepts in accessible web development to tidy dataframes. we explore different tactile and audible aspects of data to understand the unifying concept of the table domain. together we listen to and experience different data represented with audio dimensions.

%%html
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="758" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/MJFAyGLzjkY" title="the visual, audible, and tactile parts aspects of data" width="1058"></iframe>

a sine wave sonification with high charts¤

%%html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>.highcharts-figure {
    max-width: 550px;
    min-width: 360px;
    margin: 0 auto;
    position: relative;
}

#sonify {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #25386f;
    color: #25386f;
    font-size: 0.9rem;
    line-height: 1rem;
    min-height: 25px;
    font-weight: 500;
    border-radius: 4px;
    padding: 0.375rem 0;
    width: 7rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    text-align: center;
    cursor: pointer;
}

#sonify:hover {
    background-color: #25386f;
    color: #fff;
}

@media (max-width: 530px) {
    #sonify {
        position: static;
        margin: 10px;
    }
}
</style>
<figure class="highcharts-figure">
<button id="sonify">Play chart</button>
<div id="container"></div>
<p class="highcharts-description">This is a simple demo showing how a continuous line can be sonified. In this case we are sonifying the equation y = 1 / x. The graph has a vertical asymptote at x = 0, and a horizontal asymptote at y = 0, creating a hyperbolic shape with the function approaching, but never touching, the X and Y axes.</p>
</figure>

This is a simple demo showing how a continuous line can be sonified. In this case we are sonifying the equation y = 1 / x. The graph has a vertical asymptote at x = 0, and a horizontal asymptote at y = 0, creating a hyperbolic shape with the function approaching, but never touching, the X and Y axes.

%%html
<script>
    // Create an array with data from y = 1 / x
data = [];
for (let x = 0; x < 360; x += 1) {
    // Note: Push y = null for x = 0
    data.push([
        // x, Math.round(x * 100) ? 1 / x : null
        x, Math.sin(x * Math.PI / 180)
    ]);
}

// Create the chart
chart = Highcharts.chart('container', {
    chart: {
        height: '100%'
    },
    title: {
        text: 'Sonified mathematical function',
        align: 'left'
    },
    sonification: {
        duration: 8000,
        defaultInstrumentOptions: {
            instrument: 'basic1',
            roundToMusicalNotes: false
        }
    },
    accessibility: {
        landmarkVerbosity: 'one'
    },
    xAxis: {
        min: 0,
        max: 360,
        gridLineWidth: 1,
        tickInterval: 1,
        crossing: 0
    },
    yAxis: {
        min: -1,
        max: 1,
        tickInterval: 1,
        lineWidth: 1,
        crossing: 0,
        title: {
            text: null
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        headerFormat: '',
        pointFormat: 'y = {point.y:.2f}'
    },
    series: [{
        data
    }]
});

document.getElementById('sonify').onclick = function () {
    chart.toggleSonify();
};
</script>