var chart = Highcharts.chart('container', {
title: {
text: 'Exam scores per class',
align: 'left',
margin: 30
},
subtitle: {
text: 'Click each box to sonify on its own',
align: 'left'
},
sonification: {
showTooltip: false,
duration: 22000
},
accessibility: {
landmarkVerbosity: 'one'
},
legend: {
enabled: false
},
data: {
csv: document.getElementById('csv').textContent
},
xAxis: {
crosshair: {
enabled: true
}
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
enabled: false
},
labels: {
format: '{text}%'
}
},
tooltip: {
followPointer: true
},
colors: ['#8E4161', '#4F685F', '#A4604D', '#4C5270', '#6A040F',
'#51574A', '#6F7D8C', '#824D5C', '#466365', '#7B6F72'],
series: [{
name: 'Exam scores',
type: 'boxplot',
medianWidth: 3,
colorByPoint: true,
stickyTracking: true,
cursor: 'pointer',
events: {
click: function (e) {
e.point.sonify();
}
},
sonification: {
defaultInstrumentOptions: {
mapping: {
pitch: {
min: 'd2',
max: 'c7'
}
}
},
tracks: [{
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
}
}]
}
}]
});
document.getElementById('sonify').onclick = function () {
chart.toggleSonify();
};