mindsound/visualize.html at master · tothmate/mindsound · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<body>
<div id='raw'></div>
<div id='rect' style='position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; display: none'></div>
<div id='recorded'></div>
<script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
<script src='/socket.io/socket.io.js'></script>
<script>
	var data = [];
	for (var i=0; i<512;i++) data.push(11000);

	var width = 512, height = 200;
	var x = d3.scale.linear().domain([0, data.length - 1]).range([0, width]);
	var y = d3.scale.linear().domain([-20000, 20000]).range([height, 0]);
	var line = d3.svg.line().x(function(d, i) { return x(i); }).y(y);

	var raw = d3.select('#raw')
		.append('svg')
		.attr('width', width)
		.attr('height', height);

	var path = raw.append('g')
		.append('path')
		.datum(data)
		.attr('class', 'line')
		.attr('d', line)
		.attr('stroke', 'blue')
		.attr('fill', 'none');

	var socket = io.connect('http://localhost');
	socket.on('eeg', function(eegVal) {
		data.push(eegVal);
		path.attr('d', line).attr('transform', 'translate(' + x(-1) + ',0)');
		data.shift();

		var b = 1000
		y.domain([Math.floor(d3.min(data)/b)*b, Math.ceil(d3.max(data)/b)*b]);
	});
</script>
</body>
</html>