Create a gist now

Instantly share code, notes, and snippets.

@omimo /index.html
Last active Nov 10, 2016

What would you like to do?
A simple example of drawing a single frame of motion capture data in d3.js
<html>
<head>
<title>
Movement Data Visualization
</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>
<style>
* {
box-sizing: border-box
}
body {
margin: 0px;
}
svg {
position: relative;
display: block;
margin: 0 auto;
transform: scale(1.4);
}
#c1 {
position: relative;
top: calc( 40% - 100px )
}
</style>
</head>
<body>
<div id="c1">
</div>
<script src="mviz.js"></script>
</body>
</html>
// Variables
var skeleton;
var positions;
var figureScale = 2.2;
var h = 200;
var w = 100;
var gap = 0.6;
var skip = 2;
function draw() {
// Prep the environment
var parent = d3.select("body").select("#c1");
var svg = parent.append("svg")
.attr("width", w)
.attr("height", h);
// Scale the data
positions = positions.map(function (f, j) {
return f.map(function (d, i) {
return {
x: (d.x) * figureScale + 80,
y: -1 * d.y * figureScale + h - 10,
z: d.z * figureScale
};
});
});
// Choose the frame to draw
index = 0; // the index of the frame
currentFrame = positions[index];
headJoint = 15;
var joints = svg.selectAll("circle.joints" + index)
.data(currentFrame)
.enter();
joints.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 2;
})
.attr("fill", function (d, i) {
return '#555555';
})
.attr("opacity", 0.9);
// Bones
var bones = svg.selectAll("line.bones" + index)
.data(skeleton)
.enter();
bones.append("line")
.attr("stroke", "#555555")
.attr("stroke-width", 1)
.attr("opacity", 0.9)
.attr("x1", 0).attr("x2", 0)
.attr("x1", function (d, j) {
return currentFrame[d[0]].x;
})
.attr("x2", function (d, j) {
return currentFrame[d[1]].x;
})
.attr("y1", function (d, j) {
return currentFrame[d[0]].y;
})
.attr("y2", function (d, j) {
return currentFrame[d[1]].y;
});
window.parent.loaded();
}
// Read the files
$.getJSON("https://omid.al/moveviz/data/Skeleton_Slash.json", function (json) {
skeleton = json;
$.getJSON("https://omid.al/moveviz/data/Slash.json", function (json) {
positions = json;
draw();
});
});
title: 'Lone'
description: |
A simple example of drawing a single frame of motion capture data in d3.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment