Skip to content

Instantly share code, notes, and snippets.

@omimo

omimo/index.html

Last active March 2, 2020 05:35
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save omimo/fd2463f4d155ee7203f0cabb0f4ea81d to your computer and use it in GitHub Desktop.
Save omimo/fd2463f4d155ee7203f0cabb0f4ea81d to your computer and use it in GitHub Desktop.
Download ZIP
Basic Effort Actions - Entangled
Raw
index.html
<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="mviz.js"></script>
<style>
* {
box-sizing: border-box
}
body {
margin: 0px;
}
svg {
position: relative;
left: calc(50% - 350px);
}
#c1{
position: relative;
top: calc( 50% - 400px);
}
</style>
</head>
<body>
<div id="c1"></div>
<script>run()</script>
</body>
</html>
Raw
mviz.js
// Variables
var title = 'BEA - Entangled';
var skeleton;
var positions;
var figureScale = 7;
var h = 670;
var w = 700;
var gap = 0;
var skip = 1;
//******************************************************************//
function run() {
// Read the files
console.log('Loading the data...');
d3.json("https://omid.al/moveviz/data/Skeleton_BEA.json", function(error, json) {
if (error) return console.warn(error);
skeleton = json;
d3.json("https://omid.al/moveviz/data/BEA.json", function(error, json) {
positions = json;
positions.splice(0, 160);
positions.splice(positions.length-190, 190);
draw();
});
});
}
function draw() {
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
frames = positions.map(function(ff, j) {
return ff.map(function(d, i) {
return {
x: (d.x ) * figureScale + 370,
y: -1 * d.y * figureScale + h - 10,
z: d.z * figureScale
};
});
});
// 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")
.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 .4;
else
return .4;
}).attr("fill",'#555555')
.attr("fill-opacity",function(d, i,k) {
if ((k * skip) < (frames.length/ 2))
coef = (k * skip)/frames.length;
else
coef = (frames.length - (k * skip))/frames.length;
return coef-0.1;
});
// Bones
frameBones = svg.selectAll("g.bones")
.data(frames.filter(function(d, i) {
return i % skip === 0;
}))
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(" + (i * gap) + ",0)";
});
bones = frameBones.selectAll("line.f")
.data(skeleton)
.enter();
bone = bones.append("line")
.attr("stroke", "black")
.attr("stroke-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 - 0.1;
})
.attr("stroke-width", .2)
.attr("x1", 0).attr("x2", 0)
.attr("x1", function(d, j, k) {
return frames[k * skip][d[0]].x;
})
.attr("x2", function(d, j, k) {
return frames[k * skip][d[1]].x;
})
.attr("y1", function(d, j, k) {
return frames[k * skip][d[0]].y;
})
.attr("y2", function(d, j, k) {
return frames[k * skip][d[1]].y;
});
window.parent.loaded();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment