-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
146 lines (132 loc) · 6.75 KB
/
index.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eye-Tracking Data Visualization</title>
<link id="favicon" rel="shortcut icon" href="assets/favicon.ico"/>
<!-- D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- jQuery and Ajax -->
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Layout and Styling -->
<!-- Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- JavaScript file added at the bottom of the body -->
</head>
<body>
<div class="content layout-check">
<div class="container-fluid row align-items-end pt-3 pb-2">
<!-- Title -->
<div class="col-md-9 col-sm-9 col-7 px-0 unselectable">
<span class="h2 m-0">
Participant
<span id="participantId">7</span>
</span>
<span class="h4 m-0 text-muted d-md-inline d-sm-inline d-block">
eye-tracking data
</span>
</div>
<!-- Data options: Tree or Graph -->
<div class="col-md-3 col-sm-3 col-5 px-0 pl-md-4 text-md-left text-right">
<div id="dataOption" class="btn-group btn-group-toggle" data-toggle="buttons">
<label id="treeBtn" class="btn btn-secondary">
<input type="radio" name="dataOptions" id="treeRadio" value="tree" autocomplete="off"
onclick="fetchCsvCallOthers()" checked>
Tree
</label>
<label id="graphBtn" class="btn btn-secondary">
<input type="radio" name="dataOptions" id="graphRadio" value="graph" autocomplete="off"
onclick="fetchCsvCallOthers()">
Graph
</label>
</div>
</div>
</div>
<div class="container-fluid row">
<div id="viz-div" class="col-md-9 col-sm-12 px-0">
<!-- View options: x-y, time, duration, or dilation -->
<div id="viewOptions" class="btn-group btn-group-sm d-flex my-2">
<button id="viewOption-xy" class="btn btn-outline-secondary w-100 active"
onclick="viewByXY()">x-y</button>
<button id="viewOption-timeduration" class="btn btn-outline-secondary w-100 active"
onclick="viewByTimeAndDuration()">time/duration/dilation</button>
<!-- <button id="viewOption-timesaccades" class="btn btn-outline-secondary w-100 active"
onclick="viewByTimeAndSccades()">time/sccades/event</button> -->
</div>
<!-- Visualization -->
<div id="svgDiv" class="max-width" style="height:75vh">
<!--SVG is added here-->
</div>
<!-- Time slider -->
<div id="time-div" class="slider-container pt-2 unselectable mb-2">
<input type="range" id="timeRange" class="slider"
oninput="filterByTime(this.value)" min='0' max='' step='1' value='' >
<p id="timeLabel" for="timeRange" class="m-0" >m:ss</p>
<!-- <button id="playBtn" class="btn btn-danger btn-sm" onclick="play()">▶</button> -->
</div>
</div>
<!-- Side Panel for duration, pupil size and extra information-->
<div id="side-div" class="col-md-3 px-0 pl-md-4 pt-4 unselectable">
<!-- Details -->
<div class="h-25 pb-3">
<h6>Info</h6>
<div id="details">
<p>...</p>
</div>
</div>
<!-- Legends -->
<div class="h-75 row p-0 m-0">
<div class="col-12 p-0 mb-4">
<div class="form-check">
<input id="convexhullCheckbox" type="checkbox" class="form-check-input"
onclick="showConvexhull(this.checked)">
<label class="form-check-label" for="showSaccades">convex hull</label>
</div>
<div class="form-check">
<input id="saccadeCheckbox" type="checkbox" class="form-check-input"
onclick="showSaccades(this.checked)" checked>
<label class="form-check-label" for="showSaccades">saccades</label>
</div>
</div>
<div class="col-md-12 col-6 p-0 mb-4 pr-3">
<h6>Fixation Duration</h6>
<div id="legend-duration" class="legend-container">
<input type="range" id="durationSlider" class="legend-slider"
min='0' max='2000' value='0' step='500'
oninput="filterByFeature('duration',this.value,this.step)">
<svg id="svgDurationSlider" class="legend-svg"></svg>
</div>
</div>
<div class="col-md-12 col-6 p-0 mb-4">
<h6>Pupil Dilation</h6>
<div id="legend-pupil" class="legend-container">
<input type="range" id="pupilSlider" class="legend-slider"
min='0' max='1' value='0' step='0.25'
oninput="filterByFeature('avg_dilation',this.value,this.step)">
<svg id="svgPupilSlider" class="legend-svg"></svg>
</div>
</div>
<div class="col-12 m-0 p-0 align-left">
<button class="btn btn-light btn-sm" onclick="clearAllFilters()">Clear filters</button>
</div>
</div>
</div>
</div>
<div class="container-fluid row pt-4">
<div id="info-div" class="col px-0 text-right unselectable">
<!-- <b>Info</b><br> -->
CECS450 Data Visualzation project<br>
Supported browsers: Chrome, Safari
</div>
</div>
</div>
<!-- end of the content -->
<!-- JavaScript -->
<script type="text/javascript" src="scatterPlot.js"></script>
</body>
</html>