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

%%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>

%%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>