-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
82 lines (68 loc) · 2.68 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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#chart-container{
margin:auto;
text-align:center;
font: 12px sans-serif;
}
.bar {
fill: steelblue;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
<!-- display: none; -->
}
/* tell the SVG path to be a thin blue line without any area fill */
path {
stroke-width: 1;
fill: none;
}
svg{
float: left;
}
g.heatmap circle{
opacity:0.05;
}
.crow{
display: inline-block;
}
#timer{
font-size: 16px;
}
</style>
<div class='container'>
<h2 id='main-title'>Visualizing Walking Using Smartphone Accelerometers</h2>
<p>I wanted to try and visualize some multi-dimensional data and found some interesting <a href='https://archive.ics.uci.edu/ml/datasets/User+Identification+From+Walking+Activity'>sets</a> at the UCI Machine Learning Repository, from an <a href='http://www.cvc.uab.es/~petia/2011/Piero%20Personalization.pdf'>academic study</a> on user verification using biometric walking patterns. The x, y and z dimension accelerometer outputs can be displayed with three graphs and by using a heat-trace over time a distinct signature for each user is plotted.</br>
The smartphone in your pocket can do more than just register your position with GPS or wifi (and send it back to who knows who?), most these days have built in accelerometers that can measure change in movement in three axes. In the study visualized below mobile phones were placed in the users' breastpockets and a simple course followed while data from the phone's accelerometers was recorded. The red, green and blue dots show a heat-trace for three individuals of accelerometer output over the time-trial, clearly showing their individual 'walking signature'.
</p>
<div id='chart-container'>
<div id='timer'></div>
<div class='crow'>
<svg id="chart_zx"></svg>
<image src='images/walker_axes.png'></image>
</div></br>
<div class='crow'>
<svg id="chart_zy"></svg>
<svg id="chart_xy"></svg>
</div>
</div>
</div>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="/static/libs/jquery-extras/iframeResizer/js/iframeResizer.contentWindow.min.js"></script>
<script src="simple2d.js"></script>
<script src="heatmap.js"></script>
<script src="script.js"></script>
<script>
</script>