-
Notifications
You must be signed in to change notification settings - Fork 9
/
guide2.html
123 lines (112 loc) · 4.39 KB
/
guide2.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
<!--
(c) Omid Alemi - 2016
More info at: http://omid.al/posts/2016-08-23-MocapVis-D3.html
-->
<html>
<head>
<title>
Visualizing Motion Capture Data with D3.js
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
// Variables
var skeleton; // Storing the skeleton data
var positions; // Storing the joint positions
var positions_scaled; // Storing the scaled joint positions
var figureScale = 2; // The scaling factor for our visualizations
var h = 200; // The height of the visualization
var w = 3000; // The width of the visualization
var gap = 20;
var skip = 20;
function draw() {
var parent = d3.select("body").select("#container");
var svg = parent.append("svg")
.attr("width", w)
.attr("height", h)
.attr("overflow","scroll")
.style("display","inline-block");
// Scale the data
positions_scaled = positions.map(function(f, j) {
return f.map(function(d, i) {
return {
x: (d.x + 50) * figureScale,
y: -1 * d.y * figureScale + h - 10,
z: d.z * figureScale
};
});
});
headJoint = 7;
// Joints
svg.selectAll("g")
.data(positions_scaled.filter(function(d, i) {
return i % skip == 0;
}))
.enter()
.append("g")
.attr("transform",function(d,i) {
return "translate("+(i*gap)+",0)";
})
.selectAll("circle.joints")
.data(function(d,i) {return d})
.enter()
.append("circle")
.attr("fill-opacity","0.95")
.attr("cx", function(d) {
return d.x;
}).attr("cy", function(d) {
return d.y;
}).attr("r", function(d, i) {
if (i == headJoint)
return 4;
else
return 2;
}).attr("fill", function(d, i) {
return '#555555';
});
// Bones
svg.selectAll("g2")
.data(positions_scaled.filter(function(d, i) {
return i % skip == 0;
}))
.enter()
.append("g")
.attr("transform",function(d,i) {
return "translate("+(i*gap)+",0)";
})
.selectAll("line.bones")
.data(skeleton)
.enter()
.append("line")
.attr("stroke-opacity","0.95")
.attr("stroke", "grey")
.attr("stroke-width", 1)
.attr("x1", 0).attr("x2", 0)
.attr("x1", function(d, j, k) {
return positions_scaled[k * skip][d[0]].x;
})
.attr("x2", function(d, j, k) {
return positions_scaled[k * skip][d[1]].x;
})
.attr("y1", function(d, j, k) {
return positions_scaled[k * skip][d[0]].y;
})
.attr("y2", function(d, j, k) {
return positions_scaled[k * skip][d[1]].y;
});
}
// Read the files
$.getJSON("Skeleton_BEA.json", function(json1) {
skeleton = json1;
$.getJSON("BEA1.json", function(json2) {
positions = json2;
draw();
});
});
</script>
</body>
</html>