-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (151 loc) · 5.73 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='https://cdn.jsdelivr.net/npm/d3@7'></script>
<script src='https://code.jquery.com/jquery-3.6.0.min.js' integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=' crossorigin='anonymous'></script>
<link rel='preconnect' href='https://fonts.googleapis.com'>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;900&display=swap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons'
rel='stylesheet'>
<title></title>
</head>
<body>
<header>
<h1>User <span id='username'>#000</span></h1>
</header>
<main>
<div id='treemob'>
<div id='tree-container' class='tree-container'>
<h3>Mobility tree <span id='tree-info-icon' class='material-icons info-icon'>info</span><button class='toggle-treemob'>To distance view</button></h3>
<div id='out-tree'></div>
<div id='in-tree'></div>
</div>
<div id='distr-container'>
<h3>Fraction of leaves per level <span id='distr-info-icon' class='material-icons info-icon'>info</span></h3>
<div id='bar-out'></div>
<div id='bar-in'></div>
</div>
</div>
<div id='treemob-dist'>
<div id='tree-container-distances' class='tree-container'>
<h3>Tree with distances <span id='treedist-info-icon' class='material-icons info-icon'>info</span><button class='toggle-treemob'>To standard view</button></h3>
<div id='dist-tree-out'></div>
<div id='dist-tree-in'></div>
</div>
<div id='distr-container'>
<h3>Fraction of leaves per km <span id='distrdist-info-icon' class='material-icons info-icon'>info</span></h3>
<div id='bar-out-dist'></div>
<div id='bar-in-dist'></div>
</div>
</div>
<div id='stats-container'>
<div id='outdeg' class='stats'>
<h3>Median and max out-degree <span id='outdeg-info-icon' class='material-icons info-icon'>info</span></h3>
</div>
<div id='tokvoc' class='stats'>
<h3>Richness of the locations set <span id='tokvoc-info-icon' class='material-icons info-icon'>info</span></h3>
<div>
<h4>Outcoming tree</h4>
<div id='tokvoc-out'></div>
</div>
<div>
<h4>Whole tree</h4>
<div id='tokvoc-all'></div>
</div>
<div>
<h4>Incoming tree</h4>
<div id='tokvoc-in'></div>
</div>
</div>
<div id='entropy' class='stats'>
<h3>Distribution of locations' entropies <span id='entropy-info-icon' class='material-icons info-icon'>info</span></h3>
</div>
</div>
<div id='info'>
<section id='tree-info'>
<p>
The tree of the user's mobility.
It is composed of two prefix trees starting from
a unique location: one encodes the paths arriving at it,
the other the paths exiting from the root location.
</p>
<p>
A prefix tree is a particular structure that groups together
the travels that share the same initial path.
</p>
<p>
One location can then appear in different branches because it can occur after different sequences of traversed points.
</p>
<p>
The trajectories entering the root (the central point) can continue and become outcoming paths.
</p>
</section>
<section id='treedist-info'>
<p>
The same representation of the mobility
prefix tree but mapped on the distance travelled.
</p>
</section>
<section id='distr-info'>
<p>
For each depth level of the incoming and the outcoming tree,
it represents which percentage of all the leaves (start/end
of a trip) are in that level.
</p>
</section>
<section id='distrdist-info'>
<p>
For each km far from the incoming/outcoming tree,
it represents which percentage of all the leaves (start/end
of a trip) are in that level.
</p>
</section>
<section id='outdeg-info'>
<p>
The median and the maximum number of different successors that a location node can have.
</p>
<p>
This information is useful to understand how fragmented is the
user's mobility and how broad are the hubs (that is locations with many possible following directions).
</p>
</section>
<section id='tokvoc-info'>
<p>
The location richness of a tree is the proportion between the number of
all the points traversed and the number of different locations encountered.
</p>
<p>
It gives information about how much regular are the user's movements:
if the richness is low, it means that the same locations
are traversed quite frequently; on the contrary, an elevated richness means
that the user explores many different locations, and rarely returns on the same routes.
</p>
</section>
<section id='entropy-info'>
<p>
The distribution of the entropies of each location.
</p>
<p>
The entropy is the amount of bytes necessary to describe a location,
according to Claude-Shannon's information theory.
</p>
</section>
</div>
</main>
<script type='text/javascript' src='tree_1054708.js'></script>
<script type='text/javascript' src='tree_60890.js'></script>
<script type='text/javascript' src='tree_501923.js'></script>
<script type='text/javascript' src='tree.js'></script>
<script type='text/javascript' src='tree_dists.js'></script>
<script type='text/javascript' src='outdeg.js'></script>
<script type='text/javascript' src='tokvoc.js'></script>
<script type='text/javascript' src='barleaves.js'></script>
<script type='text/javascript' src='barleaves_dist.js'></script>
<script type='text/javascript' src='entropy.js'></script>
<script type='text/javascript' src='script.js'></script>
</body>
</html>