/
index.html
233 lines (204 loc) · 11.4 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112537115-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112537115-2');
</script>
<!-- CSS Files -->
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!-- IcoMoon icons -->
<link rel="stylesheet" href="css/icons.css"></head>
<!-- JS Files -->
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Pseudo-random number generator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js"></script>
</head>
<body>
<style>
.current-node {
stroke: #1abc9c;
stroke-width: 5px;
}
</style>
<div class="container">
<div class="panel panel-default" style='height: 100%'>
<div class="panel-heading">
<p style='display: inline-block;'>Markov Chain Application Analysis</p>
<span style='font-size:20px; font-weight: bold; display: inline-block; float: right; margin-top: 5px; cursor: pointer;' class="glyphicon glyphicon-question-sign" id='btnHelp' data-toggle="modal" data-target="#helpModal"> </span>
</div>
<div class="panel-body">
<div class="row display-flex" id='uploadFilePanel'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<div style='margin-left: 35%;'>
<input type="file" id="files" name="files[]" style='; display: inline-block'/>
<button type="button" class="btn btn-primary" onclick='demo()' style='margin: 0 auto; display: inline-block'>DEMO</button>
</div>
</div>
</div>
<div class="row display-flex" id='mainPanel' style='display: none'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<div class="text-center" style='margin-top: 10px;'>
<!--<div class="btn-group" id='mapControls' data-toggle="buttons" style='width: 15%;'>
<label class="btn btn-primary active" style='width: 50%;' id="btnVisualization">
<input type="radio" name="options" value='start'> <span style='font-size:25px; font-weight: bold; vertical-align: middle;' class="icon-uni41"> </span>
</label>
<label class="btn btn-primary" style='width: 50%;' id="btnClustering">
<input type="radio" name="options" value='end'> <span style='font-size:25px; font-weight: bold; vertical-align: middle;' class="icon-uni42"> </span>
</label>
</div>-->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#visualization">Markov Chain Visualization <small>(drag nodes around!)</small> </a></li>
<li id='clusteringTab'><a data-toggle="tab" href="#clustering">User Session Clustering </a></li> <!-- <a data-toggle="tab" href="#clustering"> .. </a> -->
</ul>
<div class="tab-content">
<div id="visualization" class="tab-pane fade in active">
<div style='height: 600px; margin-top: 10px;' id='markovChainVisualization'>
<div class='col-xs-8 col-sm-8 col-md-8 col-lg-8' id='mcColumn'>
<svg id="markovChain" height="800" style='float: left; display: inline-block;'>
<defs>
<marker
id="arrow"
markerUnits="strokeWidth"
markerWidth="2"
markerHeight="2"
viewBox="0 -5 10 10"
refX="0"
refY="0"
orient="auto">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
</svg>
</div>
<div class='col-xs-4 col-sm-4 col-md-4 col-lg-4'>
<div id='controlPanelMarkovChain' style='display: inline-block;'>
<h3>Visualization controls</h3>
<p style='display: inline-block;'>Minimum probability:</p>
<p style='display: inline-block;'><span id="minimumProbabilityValue">0.1</span></p>
<input id="minimumProbabilitySlider" type="range" min="0" max="1.01" step="0.01" value="0.1"/>
<script>
document.getElementById('minimumProbabilityValue').innerHTML = document.getElementById('minimumProbabilitySlider').value
</script>
<hr/>
<div id='checkboxes'> </div>
<hr style="border-bottom: 4px double #eee;"/>
<div id='simulationControls'>
<h3>Simulation</h3>
<div class="btn-group" data-toggle="buttons" style='width: 50%;'>
<label class="btn btn-success" style='width: 50%;' id="btnStartSimulation">
<input type="radio" name="options" value='start'> <span style='font-weight: bold;' class="glyphicon glyphicon-play"> </span>
</label>
<label class="btn btn-danger active" style='width: 50%;' id="btnPauseSimulation">
<input type="radio" name="options" value='end'> <span style='font-weight: bold;' class="glyphicon glyphicon-pause"> </span>
</label>
</div>
<div class='text-center'>
<svg id="simulatedSequence" height="50" style='display: block; margin: 0 auto; margin-top: 15px;'> </svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="clustering" class="tab-pane fade">
<div style='height: 600px; margin-top: 10px;' id='sequenceClustering'>
<div class='col-xs-8 col-sm-8 col-md-8 col-lg-8' id='clusteringColumn'>
<div id='clusteringVisualization' style='display: inline-block;'>
<svg id="sequenceClusteringVisualization" height="800" style='float: left; display: inline-block;'> </svg>
</div>
</div>
<div class='col-xs-4 col-sm-4 col-md-4 col-lg-4'>
<div id='controlPanelClustering' style='display: inline-block;'>
<p style='display: inline-block;'>Nr. Clusters:</p>
<p style='display: inline-block;'><span id="nrClustersValue">1</span></p>
<input id="nrClustersSlider" type="range" min="1" step="1" value="1"/>
<div class="text-center" style='margin-top: 10px;'>
<label class="btn btn-success" style='width: 50%;' id="btnCluster">
<span style='font-weight: bold; vertical-align: middle;' class="glyphicon glyphicon-play"> </span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div style='margin-left: 10px; font-size: 12px;'>
<p> Made by <a href="http://users.ugent.be/~givdwiel/">Gilles Vandewiele</a> (<a href="http://idlab.technology/">IDLab</a>) in collaboration with <a href="https://www.ugent.be/ps/communicatiewetenschappen/mict/en/team/senior_researchers/jeroen-stragier.htm">Jeroen Stragier</a> (<a href="https://www.ugent.be/ps/communicatiewetenschappen/mict/en">MICT</a>). Both are from <a href="https://www.ugent.be">Universiteit Gent</a> -- <a href="https://www.imec-int.com/en/home">imec</a>.</p>
</div>
</div>
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" style='display: inline-block;'>Help</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Upload data</h3>
<p>
The uploaded file has to be Comma-Separated Values (CSV) and <strong>must contain one of the sets of columns</strong> listed below. Moreover, these <strong>column names should be present on the first line</strong> in the CSV-file, in the same order.
<ul>
<li>
<code>from,to</code>:
the most simple format which just lists the different transitions. With this format, sequence clustering and user action simulations are not possible, since there is no notion of sessions. An example is the following snippet:
<pre>from,to
A,B
B,C
C,D
A,C
B,C
A,B</pre>
</li>
<li>
<code>from,to,session_id,timestamp</code>:
The simple format, extended with a identifier for each user session and a time when the action was made. A session is defined as all the actions a user made from opening the application until closing it. This allows us to introduce a start- and exit- state in the markov chain. Moreover, sequence clustering and simulations of user actions are also possible. An example is the following snippet:
<pre>from,to,session_id,timestamp
A,B,1,01/01/2018 15:00
B,C,1,01/01/2018 15:02
C,D,1,01/01/2018 15:03
A,C,3,01/01/2018 16:00
B,C,2,01/01/2018 17:05
A,B,2,01/01/2018 17:00</pre>
</li>
<li><strong>COMING UP: upload your own transition matrix</strong></li>
<!--<li><code>from,to,user_id,timestamp</code>: When this format is used, we heuristically determine the session_ids by looking at the difference in timestamps of two consecutive actions, made by a user.</li>-->
</ul>
<p style='margin-top: 50px;'> <strong> There is one special case which cannot be defined through this format: namely the sessions with only action. These can be defined by leaving <code>to</code> empty (<code>A,,4,01/01/2018 15:00</code>) </strong> </p> <br>
<p style='text-decoration: underline; margin-top: 10px;'> <strong> Everything you see is being performed client-side, this means that the uploaded data does never leave your computer! </strong> </p>
</p>
<h3>Markov Chain Visualization</h3>
Once you have uploaded your data to our platform successfully, the fun can start! We plan to support two main functionalities: (i) an intuitive markov chain visualization to study user behaviour and (ii) automatic clustering of user sessions. In the markov chain visualization, all nodes can be dragged around, so that you can define your own topology. Moreover, the slider on the right controls which edges are displayed (only edges with a probability higher or equal than the probability on the slider will be displayed). The different checkbox can be enabled or disabled in order to respectively turn on and off nodes in the chain and their corresponding edges. Finally, there is support for simulating user sessions. By clicking on the play button, a random walk will be made within the markov chain (with edges with higher probabilities having a higher chance of being taken in the walk) until an exit-state is reached. This random walk is displayed live in the markov chain (notice how a node will have a green thick border around it) and will be displayed beneath the play button after simulation.
<h3>User Session Clustering</h3>
Coming real soon!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- User controls -->
<script src="js/start2cycle.js"></script>
<script src="js/jquery-csv.js"></script>
<script src="js/controls.js"></script>
</body>
</html>