-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (165 loc) · 8.62 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE >
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
>
<head>
<title>Provenance</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<script src="https://eligrey.com/demos/FileSaver.js/Blob.js"></script>
<script src="https://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
</head>
<body>
<div
id="controls"
class="col-sm-3 col-lg-2"
>
<form id="controlForm">
<h5>Data Selection</h5>
<b>Dataset:</b><br />
1<input
type="radio"
name="dataset"
value="1"
checked
onclick="loadData()"
/>
2<input type="radio" name="dataset" value="2" onclick="loadData()" />
3<input
type="radio"
name="dataset"
value="3"
onclick="loadData()"
/>
4<input
type="radio"
name="dataset"
value="4"
onclick="loadData()"
/><br />
<b>PID:</b><br />
1<input
type="radio"
name="pid"
value="1"
checked
onclick="loadData()"
/>
2<input type="radio" name="pid" value="2" onclick="loadData()" />
3<input type="radio" name="pid" value="3" onclick="loadData()" />
4<input type="radio" name="pid" value="4" onclick="loadData()" />
5<input type="radio" name="pid" value="5" onclick="loadData()" />
6<input type="radio" name="pid" value="6" onclick="loadData()" />
7<input type="radio" name="pid" value="7" onclick="loadData()" />
8<input
type="radio"
name="pid"
value="8"
onclick="loadData()"
/><br /><br /><br />
<h5>Data Editing</h5>
List View:
<input
type="checkbox"
name="detailed"
id="detailBtn"
onclick="loadData()"
/>
<label id="iconKey">
<hr />
<ul>
<li>🔎 - The number of searches performed by the user in a segment compared to the total number of searches over the whole session.</li>
<li>🔖 - The text highlighted by the user. Shows number of events</li>
<li>📝 - The notes made in the segment. Shows number of notes made.</li>
<li>🦄 - The documents opened by user. Shows the ratio of new documents opened compared to the total documents opened in segment</li>
<li>📖 - answers: "Is the number of documents opened in this segment above or below average?" Average calculated from the sum of all document open events divided by the number of segments.</li>
</ul>
<label>Show Timeline:</label>
<input
type="checkbox"
name="timeline"
onclick="loadData()"
/>
<hr>
</label>
<br />
Show Notes:
<input
type="checkbox"
name="notes"
onclick="loadData()"
/><br /><br /><br />
</form>
<!-- <button onclick="loadData()">Load Data</button><br> -->
<h5>Save</h5>
<button onclick="saveData()">Save Data JSON</button><br />
<button onclick="saveSVGS()">Save SVGS</button><br />
</div>
<div class="container-fluid bg-light">
<div class="row row-space my-auto">
<div class="col-sm-3 col-lg-2"></div>
<div class="col-sm-9 col-lg-10">
<div id="text">
<h1>Provenance Segment Visualization</h1>
<!-- <h3><a href="https://github.com/brettbenda/ProvenanceSummaries/">Link to Github Repo</a></h3> -->
<!-- <h3>Data Processing</h3>
<p>Data from provenance logs are segmented. Small segments are grouped into the proceeding segment. Only explicit user action types from the logs are regarded in summarizing each segment (searches, note taking, highlighting, and opening a document).</p>
<h3>Overview</h3>
<p>Each segment is represented by a card with a unique segment number. A light blue bar represents the timeline for the entire segment, with a dark blue block showing the relative start and end times for the segment. The length of this bar encodes the duration of the segment.<br>
Below is a timeline of all actions in the segment to show actions in context to one another. <br>
A textual summary of important actions in the segment is provided. <br>
Key information about searching, note taking, highlighting, and document opening is included. Bars showing the relative frequency of each action are shown for each segment. A "Total" activity bar shows how much of the total activity among all segments occurs in the individual segment.</p>
<h3>Zoom/Filter</h3>
<p> A control panel is present to load different participant data and toggle between a detailed and simple view of each summary. The detailed view shows the timeline of actions, as well as allows users to edit (merge/separate) segments. The control panel also allows users to save the modified JSON with their modified segments and the SVG images for all cards.
<p> While in the detailed view, clicking and dragging on the light grey bar below the segment timeline allows selection of a sub-segment. Clicking the "Create from Selection" button will create up to three new segments (data before the selected time, the selected time, data after the selected time). If the resulting segments outside of the selection are short in duration (<5s) or the user clicks near the beginning or end of the segment, they will be grouped back into the selection. Arrow buttons on either side of the timeline will adjoin the segment with the previous or next segment.</p>
<h3>Details on Demand</h3>
<p> Hovering over the timeline shows time and action details.<br>
Long notes/highlighted text are shortened, but can be seen in their entirety by hovering the text.<br>
Colored text can be hovered to show the full text.<br>
Hovering over each bar/icon displays all the interactions of the type with frequencies if the action occurred multiple times.
<h3 style="color:darkgreen">Updates</h3>
<p style="color:darkgreen">
<b>-Manual merging/segment separation</b><br>
<b>-Control Panel</b><br>
<b>---Load new data</b><br>
<b>---Save modified data</b><br>
<b>---Save SVG cards (NOTE: only works for the simple cards for some reason)</b><br>
<h3 style="color:red">TODO</h3>
<p style="color:red">
<b>Continue testing new textual summary patterns, using merging/separation to find patterns not yet accounted for.</b><br>
</p>
-->
</div>
<div id="overview">
<h4>Session Summary</h4>
<p>They focused on <<12>> main topics in this analysis session; exploring <<24%>> of the dataset. The topics that received the most attention throughout were <<minski, leonid, and lagos>>. They started searching for <<disease>>, before transitioning to <<dubai>> and finally looking for <<burj>>. The segment with the most new content was segment <<4>>. Segment <<5>> was the longest period of time where they opened <<many more documents>> than usual. The shortest segment (#<<2>>) focused almost entirely on <<Kenya>>. They conducted <<13>> searches throughout their session, especially in segment <<5>>. </p>
</div>
<div id="chart"></div>
</div>
</div>
</div>
<!-- D3.js -->
<script src="code/d3.js" charset="utf-8"></script>
<script src="code/chart.js"></script>
<script>
const detailBtn = document.getElementById("detailBtn");
window.addEventListener("load", (e) => {
detailBtn.focus(); // adding the focus
});
</script>
</body>
</html>