EmotionGraph/graph.html at master · break-through/EmotionGraph · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
	<head>
		<!-- Load the Paper.js library -->
		<script type="text/javascript" src="C:/Users/Angelos/node_modules/paper/dist/docs/assets/js/paper.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>

		<script>
			var globalx=[];
			var globaly=[];
			d3.csv("dataset.csv",function(csv){
				csv.map(function(d){
					globalx.push(d.time);
					globaly.push(+d.emotion);
				})
			});
		</script>


		<!-- Load external PaperScript and associate it with myCanvas -->
		<script src="http://d3js.org/d3.v3.min.js"></script>
		<!-- Load external PaperScript and associate it with myCanvas -->
		<script type="text/paperscript" canvas="myCanvas">

			/// Initialization of variables
			var height = 300, width = 1200;  /// height and width of the view
			var low = 0, high = 1;          /// the range in which our values reside

			var points = globalx.length;     /// number of points in the chart
			var scaleX = width/(points+1);  /// x-distance between two concecutive points, narrower or wider view

			view.viewSize = new Size(width, height);
			var static_data =[];

			returnPixelArr(globaly);

			function returnPixelArr(array){
				/// arguments
				///   array: an array of the y-values in the range [low..high]
				/// returns
				///   static_data: an array of the normalized y-values that lie in the range [1..height-1]

				for (var i = 0; i < array.length; i++) {
					static_data[i] = (-(height - 2)*array[i]+height*high-(high+low))/(high-low);
				}
			}

			var path = new Path();

			initializePath();

			/// Set up the gradient color
			path.fillColor = {
				gradient: {stops: ['black', 'blue','yellow','lightgreen','lightblue']},
				origin: new Point(width/2, height),  /// minimum negative is bottomost point
 				destination: new Point(width/2, 0)   /// maximum positive is topmost point
			};

			function initializePath() {
				path.segments = [];
				path.add(new Point(0,height/2)); /// first point is at the middle and left

				for (var i = 0; i < points; i++) {
					var point = new Point(scaleX*(i+1), 0);  /// set everything to zero
					path.add(point);
				}

				path.add(new Point(width,height/2));  /// last point is at the middle and right
				path.fullySelected = false;
			}

			function onFrame(event) {  /// function to set up the smoothness of the chart
				for (var i = 0; i < points; i++)
					path.segments[i+1].point.y = static_data[i];
				path.smooth({ type: 'continuous' });
			}

			function onMouseDrag(event) {  /// function so the chart can be movable using mouse
				var moveVector = new Size(event.delta.x, event.delta.y);
				view.translate(moveVector);
			}

			// Reposition the path whenever the window is resized:
			function onResize(event) {
				initializePath();
			}
		</script>
	</head>
	<body>

			<canvas id="myCanvas" resize></canvas>

	</body>
</html>