Create a gist now

Instantly share code, notes, and snippets.

@omimo /index.html Secret
Last active Jul 21, 2017

What would you like to do?
<html>
<head>
<title>
[Visualizing Movement 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>
<script src="mviz.js"></script>
<style>
* {
box-sizing: border-box
}
body {
margin: 0px;
}
svg {
position: relative;
left: calc(50% - 250px);
}
#c1 {
position: relative;
top: 100px;
}
</style>
</head>
<body>
<div id="c1"></div>
<script>run()</script>
</body>
</html>
// Variables
var skeleton;
var positions;
var figureScale = 2.2;
var h = 540;
var w = 500;
var gap = 0;
var skip = 1;
var traillength = 20;
//******************************************************************//
function run() {
// Read the files
console.log('Loading the data...');
d3.json("https://omid.al/moveviz/data/ConnectivityMatrix_Antonio.json", function(error, json) {
if (error) return console.warn(error);
skeleton = json;
d3.json("https://omid.al/moveviz/data/Improv_Antonio.json", function(error, json) {
positions = json;
positions.splice(0, 160);
positions.splice(positions.length-190, 190);
var frames = positions.map(function(ff, j) {
return ff.map(function(d, i) {
return {
x: (d.x + 80) * figureScale,
y: -1 * d.y * figureScale + h - 10,
z: d.z * figureScale
};
});
});
svg = draw(frames);
var fr = 1/30;
var startTimeJ = Date.now();
anim0(frames.slice(0,traillength),svg);
window.setInterval(function() {
f = traillength + Math.floor((Date.now() - startTimeJ)/1000 / fr);
if (f > frames.length) {
startTimeJ=Date.now();
f = 0;
}
segment = frames.slice(f-traillength,f);
anim(segment,svg);
}, fr * 1000);
});
});
}
function draw(frames) {
console.log('Drawing...');
// Prep the environment
var parent = d3.select("body").select("#c1");
var svg = parent.append("svg")
.attr("id","svg")
.attr("width", w)
.attr("height", h)
.attr("overflow", "scroll")
.style("display", "inline-block");
// Scale the data
index = 30;
// Joints
headJoint = 15;
svg.selectAll("g.joints")
.data(frames.filter(function(d, i) {
return i % skip == 0;
}))
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(" + (i * gap) + ",0)";
})
.selectAll("circle.f" + index)
.data(function(d, i) {
return d
})
.enter()
.append("circle")
.attr("cx", function(d) {
return d.x;
}).attr("cy", function(d) {
return d.y;
}).attr("r", function(d, i) {
if (i == headJoint)
return .8;
else
return .8;
}).attr("fill",'grey')
.attr("fill-opacity", function(d, j, k) {
if ((k * skip) < (frames.length/ 2))
coef = (k * skip)/frames.length;
else
coef = (frames.length - (k * skip))/frames.length;
return coef;
});
try {
if (window.top && window.top.loaded)
window.top.loaded();
} catch(err) {
console.log(err);
}
return svg;
}
function anim0(frames, svg) {
// Joints
headJoint = 15;
svg.selectAll("g.jointsanim")
.data(frames)
.enter()
.append("g")
.attr("class","jointsanim")
.selectAll("circle.anim")
.data(function(d, i) {
return d;
})
.enter()
.append("circle")
.attr("class","anim")
.attr("cx", function(d) {
return d.x;
}).attr("cy", function(d) {
return d.y;
}).attr("r", function(d, i) {
if (i == headJoint)
return .8;
else
return 1.8;
})
.attr("fill",'#cc6666')
.attr("fill-opacity",1);
// Bones
svg.selectAll("g.boneanim")
.data(frames)
.enter()
.append("g")
.attr("class","boneanim")
.selectAll("line.anim")
.data(skeleton)
.enter()
.append("line")
.attr("class","anim")
.attr("stroke", "#cc6666")
.attr("stroke-opacity", .8)
.attr("stroke-width", 2)
.attr("x1", function(d, j, k) {
return frames[k][d[0]].x;
})
.attr("x2", function(d, j, k) {
return frames[k][d[1]].x;
})
.attr("y1", function(d, j, k) {
return frames[k][d[0]].y;
})
.attr("y2", function(d, j, k) {
return frames[k][d[1]].y;
});
}
function anim(frames, svg) {
// Joints
headJoint = 15;
svg.selectAll("g.jointsanim")
.data(frames)
.selectAll("circle.anim")
.data(function(d, i) {
return d;
})
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", function(d, i, k) {
return .2 + 1.5 * k/traillength;
})
.attr("fill",'#cc6666')
.attr("fill-opacity", function (d,i, k) {
return k/traillength;
});
// Bones
svg.selectAll("g.boneanim")
.data(frames)
.selectAll("line.anim")
.data(skeleton)
.attr("stroke", "#cc6666")
.attr("stroke-opacity", function (d,i, k) {
return .1 + 0.3 * k/traillength;
})
.attr("stroke-width", function (d,i, k) {
return 3 * k/traillength;
})
.attr("x1", function(d, j, k) {
return frames[k][d[0]].x;
})
.attr("x2", function(d, j, k) {
return frames[k][d[1]].x;
})
.attr("y1", function(d, j, k) {
return frames[k][d[0]].y;
})
.attr("y2", function(d, j, k) {
return frames[k][d[1]].y;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment