initial commit
This commit is contained in:
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
max-width: 900px;
|
||||
height: 500px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
#controls {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/sonification.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<div id="controls" style="">
|
||||
<button id="play">Play</button>
|
||||
<button id="pause">Pause</button>
|
||||
<button id="rewind">Rewind</button>
|
||||
<input type="range" id="speed" name="Speed"
|
||||
min="0.5" max="2" value="1" step="0.05">
|
||||
<label for="speed">Speed</label>
|
||||
</div>
|
||||
|
||||
<pre id="csv_data" style="display:none">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
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// 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();
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user