In this tutorial, I will show you how to create an interactive audio boxplot chart using Highcharts and demonstrate how sonification can be used to enhance accessibility.
Click on the play button on the demo to experience the audio boxplot chart.
Boxplots, also known as box-and-whisker plots, offer several benefits when it comes to analyzing and visualizing data, such as summarizing data distribution, identifying outliers, and visualizing spread and variability. However, not everyone can fully benefit from visual information, especially those with visual impairments. This is where accessibility features come into play. In this demo, I will fetch CSV data to create a boxplot and add some sonification magic to make it audible. So, let’s go through the chart’s code step by step to understand how to create an interactive audio boxplot using Highcharts.
Libraries
Be sure to import Highcharts and its necessary modules, such as highcharts-more for additional chart types, data for handling CSV data, sonification for audio representation, and accessibility for making the chart accessible.
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/sonification.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script>
HTML structure
The code structure is pretty simple. It includes a button with the ID sonify to trigger sonification
<button id="sonify">Play chart</button>
A div element with the ID container where the chart will be rendered
<div id="container"></div>
A pre element with the ID csv containing the data in CSV format
<pre id="csv">...</pre>
The figure element provides a container for the chart and related content.
<figure class="highcharts-figure">
Data
In this demo, the data is fetched from the <pre>
element with the ID csv
in the HTML document.
data: { csv: document.getElementById('csv').textContent }
The CSV is organized in a classic boxplot data configuration: Name,Minimum,First quartile,Median,Third quartile,Maximum.
Sonification settings
It is important to mention that the sonification property configures the audio representation of the chart. The mapping
object inside tracks
object is a critical part of the sonification configuration, as it defines how the different elements such as the point names and the data points in the box plot are translated into sound.
Here is the point name code sonification:
{ type: 'speech', mapping: { text: '{point.name}', rate: 2, volume: 0.3 } And here is the code for a data point inside the boxplot: { mapping: { pitch: { mapTo: 'low' }, playDelay: 1300 }
The critical element is the playDelay option, which enables the tones to be played sequentially. When displaying a boxplot, the process begins with the name, followed by the minimum after a delay of 1300 milliseconds, then q1 after 1420ms, followed by the median, q3, and finally the maximum
{ type: 'speech', mapping: { text: '{point.name}', rate: 2, volume: 0.3 } }, { mapping: { pitch: { mapTo: 'low' }, playDelay: 1300 } }, { mapping: { pitch: { mapTo: 'q1' }, playDelay: 1420 } }, { mapping: { pitch: { mapTo: 'median' }, playDelay: 1540 } }, { mapping: { pitch: { mapTo: 'q3' }, playDelay: 1660 } }, { mapping: { pitch: { mapTo: 'high' }, playDelay: 1780 } }
Now, you know how to create an accessible audio boxplot, that enables the conversion of data points into meaningful auditory experiences, allowing users to perceive the chart not just visually, but also through sound, enhancing accessibility and providing a more comprehensive understanding of the data.
Related posts
- Dynamic charts in JavaScript with Highcharts
- Graphing in JavaScript with Highcharts
- JavaScript data visualization with Highcharts
- Charts in JavaScript with Highcharts
- JavaScript chart examples using Highcharts
- Data charting with Highcharts
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.