// Sonification options
var sdInstruments = [{
instrument: 'sineMajor',
instrumentMapping: {
duration: 200,
frequency: 'y',
volume: 0.7,
pan: -1
},
instrumentOptions: {
minFrequency: 220,
maxFrequency: 1900
}
}],
nyInstruments = [{
instrument: 'triangleMajor',
instrumentMapping: {
duration: 200,
frequency: 'y',
volume: 0.6,
pan: 1
},
instrumentOptions: {
minFrequency: 220,
maxFrequency: 1900
}
}];
// Point of interest options
var poiTime = Date.UTC(2018, 4, 6),
poiEarcon = {
// Define the earcon we want to play for the point of interest
earcon: new Highcharts.sonification.Earcon({
instruments: [{
instrument: 'squareMajor',
playOptions: {
// Play a quick rising frequency
frequency: function (time) {
return time * 1760 + 440;
},
volume: 0.1,
duration: 200
}
}]
}),
// Play this earcon if we hit the point of interest
condition: function (point) {
return point.x === poiTime;
}
};
// Create the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Play chart as sound'
},
subtitle: {
text: 'Weekly temperature averages'
},
yAxis: {
title: {
text: 'Temperature (°F)'
}
},
xAxis: {
type: 'datetime',
plotLines: [{
value: poiTime,
dashStyle: 'dash',
width: 1,
color: '#d33'
}]
},
tooltip: {
split: true,
valueDecimals: 0,
valueSuffix: '°F'
},
plotOptions: {
series: {
marker: {
enabled: false
},
cursor: 'pointer',
// Sonify points on click
point: {
events: {
click: function () {
// Sonify all points at this x value
var targetX = this.x,
chart = this.series.chart;
chart.series.forEach(function (series) {
// Map instruments to the options for this series
var instruments = series.options.id === 'sd' ?
sdInstruments : nyInstruments;
// See if we have a point with the targetX
series.points.some(function (point) {
if (point.x === targetX) {
point.sonify({
instruments: instruments
});
return true;
}
return false;
});
});
}
}
}
}
},
// Data source: https://www.ncdc.noaa.gov
data: {
csv: document.getElementById('csv_data').innerHTML,
firstRowAsNames: false,
parsed: function (columns) {
columns.splice(1, 2); // Remove the non-average columns
}
},
series: [{
name: 'San Diego',
id: 'sd',
color: '#f4b042'
}, {
name: 'New York',
id: 'ny',
color: '#41aff4'
}]
});
// Utility function that highlights a point
function highlightPoint(event, point) {
var chart = point.series.chart,
hasVisibleSeries = chart.series.some(function (series) {
return series.visible;
});
if (!point.isNull && hasVisibleSeries) {
point.onMouseOver(); // Show the hover marker and tooltip
} else {
if (chart.tooltip) {
chart.tooltip.hide(0);
}
}
}
// On speed change we reset the sonification
document.getElementById('speed').onchange = function () {
chart.cancelSonify();
};
// Add sonification button handlers
document.getElementById('play').onclick = function () {
if (!chart.sonification.timeline || chart.sonification.timeline.atStart()) {
chart.sonify({
duration: 5000 / document.getElementById('speed').value,
order: 'simultaneous',
pointPlayTime: 'x',
seriesOptions: [{
id: 'sd',
instruments: sdInstruments,
onPointStart: highlightPoint,
// Play earcon at point of interest
earcons: [poiEarcon]
}, {
id: 'ny',
instruments: nyInstruments,
onPointStart: highlightPoint
}],
// Delete timeline on end
onEnd: function () {
if (chart.sonification.timeline) {
delete chart.sonification.timeline;
}
}
});
} else {
chart.resumeSonify();
}
};
document.getElementById('pause').onclick = function () {
chart.pauseSonify();
};
document.getElementById('rewind').onclick = function () {
chart.rewindSonify();
};
2018-01-07,61,9,61,15.85714286 2018-01-14,66,20,61,33.85714286 2018-01-21,56,41,60,31.85714286 2018-01-28,61,46,58,39.28571429 2018-02-04,63,35,65,32.14285714 2018-02-11,61,47,61,35.85714286 2018-02-18,61,37,62,40.42857143 2018-02-25,55,44,54,45 2018-03-04,57,41,56,43.42857143 2018-03-11,62,38,61,36.57142857 2018-03-18,57,36,60,36.57142857 2018-03-25,59,40,61,38.14285714 2018-04-01,60,48,60,43.28571429 2018-04-08,64,38,62,41.14285714 2018-04-15,68,43,66,45.85714286 2018-04-22,64,51,61,46 2018-04-29,62,54,62,53.28571429 2018-05-06,67,60,62,62.57142857 2018-05-13,63,53,62,58.42857143 2018-05-20,62,67,63,60.14285714 2018-05-27,63,65,63,67.71428571 2018-06-03,67,63,65,65.14285714 2018-06-10,68,68,66,64 2018-06-17,65,74,67,68.57142857 2018-06-24,65,69,66,71.42857143 2018-07-01,66,82,67,75.14285714 2018-07-08,78,69,72,76.57142857 2018-07-15,74,75,74,75.14285714 2018-07-22,76,73,73,74.85714286 2018-07-29,76,77,75,76.57142857 2018-08-05,76,81,77,77.42857143 2018-08-12,80,76,81,79 2018-08-19,76,71,76,77 2018-08-26,74,73,75,73 2018-09-02,71,72,74,78.28571429 2018-09-09,70,61,72,75 2018-09-16,74,72,72,69.71428571 2018-09-23,71,63,71,70.42857143 2018-09-30,71,63,69,65.71428571 2018-10-07,68,71,71,68.14285714 2018-10-14,68,53,68,64