omimo/index.html

## index.html
<html>
    <head>
        <title>
            [Visualizing Movement Data with D3.js]
        </title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="https://omid.al/Mova-Viz/MovaViz-v0.1.2.js"></script>
        <style>
            * {
                box-sizing: border-box
            }

            body {
                margin: 0px;
            }

          svg {
            position: relative;
            left: calc(50% - 350px);
          }

          #cont{
              position: relative;
              top: calc( 50% - 400px);
          }
        </style>
    </head>
    <body>
        <div id="cont"></div>
        <script src="mviz.js"></script>
        <script>run()</script>
    </body>
</html>

## mviz.js
// Created by Omid Alemi - 2016

// Parameters
var scale = 18;
var animFrame = 1;
var startTime = 0;
var randScale = 20;
var fig = {};
var ftop = 600;
var fleft = 300;
var traillength = 10;

var CMUDeletedBones = [0, 5,6,11,15,16,17,18,20,24,25,27,28,29,33,36];

// Create the SVG container
var svg = d3.select("body")
    .select("#cont")
    .append("svg")
    .attr("width", 800)
    .attr("height", 800);

// Mova Draw Functions
var lineBoneFcn = function(j) {
    var c = j;

    // if it is the first time this function is called, it should append the elements
    if (j._exit === undefined)
        c = j.append('line').attr('class','bone-line').attr("stroke", "#666666");

    c.attr("stroke-width", function (d,i, k,p) {
        return  Math.random() + Math.random() * 3;
    })
    // .attr('id', function(d,i){return i})
    .attr("x1", function (d, j) {
        return d.x1  * scale + fleft + Math.random() * randScale;
    })
    .attr("x2", function (d, j) {
        return d.x2 * scale + fleft + Math.random() * randScale;
    })
    .attr("y1", function (d, j) {
        return d.y1 * scale + ftop + Math.random() * randScale;
    })
    .attr("y2", function (d, j) {
        return d.y2 * scale + ftop + Math.random() * randScale;
    });
};

var multiBonesFcn = function(j) {
    c = j;

    // if it is the first time this function is called, it should append the g element
    if (j._exit === undefined) {
         c = j.append('g')
        .attr('class','bone-positions')
        .attr("opacity", function (d,i, k) {
            return 0.1 + 0.3 * i/5;
        })
        .selectAll('line.bone-line')
        .data(function(d,i) {

            return d;
        })
        .enter();
    } else {
        c = c.selectAll('line.bone-line')
        .data(function(d,i) {
            return d;
        });
    }

    lineBoneFcn(c);
};

var anim = function () {
    if (fig._dataReady) {
        if (startTime === 0)
            startTime = Date.now();

        animFrame = Math.floor((Date.now() - startTime)/1000 / fig.tracks[0].parserObject.frameTime);
        animFrame = Math.max(1, animFrame);

        if (animFrame >= fig.tracks[0].parserObject.frameCount) {
            startTime=Date.now();
            animFrame = 1;
        }

        fig.updateDraw(multiBonesFcn, 'bone-positions', [animFrame,animFrame+traillength], 1);
        animFrame++;
    }

    // window.requestAnimationFrame(anim);
};

var dataLoaded = function() {
    if (window.parent && window.parent.loaded)
        window.parent.loaded();


    // Let's first let go of the stuff we don't want to keep in mem
    fig.tracks[0].data['joint-positions'] = [];
    fig.tracks[0].data['joint-rotations'] = [];

    // Now let's remove the bones that are too short to be drawn.
    // Otherwise a lot of extra DOM has to be created
    fig.tracks[0].data['bone-positions'] =  fig.tracks[0].data['bone-positions'].map(function(d,j){
        return d.filter(function(p,i) {
            return (CMUDeletedBones.indexOf(i) == -1);
        });
    });

    // Now add let the Mova know that we have a drawing function that uses bone-positions
    fig.addDrawMethod(multiBonesFcn,        // the function to call drawing elements
                        'bone-positions',      // use bone positons
                        [1,1+traillength],     // use this subset of frames
                        1);                    // use every 1 frame

    window.setInterval(anim,fig.tracks[0].parserObject.frameTime*1000);
    // anim();
};

function run() {
    fig = MovaViz('Sketchy')
    .debug(true) // print out the debug messages
    .data('https://www.sfu.ca/~oalemi/data/05/05_07.bvh','bvh', dataLoaded)
    .container(svg);
}

## preview.png

      
    Raw
  

              preview.png
	<html>
	<head>
	<title>
	[Visualizing Movement Data with D3.js]
	</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://omid.al/Mova-Viz/MovaViz-v0.1.2.js"></script>
	<style>
	* {
	box-sizing: border-box
	}

	body {
	margin: 0px;
	}

	svg {
	position: relative;
	left: calc(50% - 350px);
	}

	#cont{
	position: relative;
	top: calc( 50% - 400px);
	}
	</style>
	</head>
	<body>
	<div id="cont"></div>
	<script src="mviz.js"></script>
	<script>run()</script>
	</body>
	</html>
	// Created by Omid Alemi - 2016

	// Parameters
	var scale = 18;
	var animFrame = 1;
	var startTime = 0;
	var randScale = 20;
	var fig = {};
	var ftop = 600;
	var fleft = 300;
	var traillength = 10;

	var CMUDeletedBones = [0, 5,6,11,15,16,17,18,20,24,25,27,28,29,33,36];

	// Create the SVG container
	var svg = d3.select("body")
	.select("#cont")
	.append("svg")
	.attr("width", 800)
	.attr("height", 800);

	// Mova Draw Functions
	var lineBoneFcn = function(j) {
	var c = j;

	// if it is the first time this function is called, it should append the elements
	if (j._exit === undefined)
	c = j.append('line').attr('class','bone-line').attr("stroke", "#666666");

	c.attr("stroke-width", function (d,i, k,p) {
	return Math.random() + Math.random() * 3;
	})
	// .attr('id', function(d,i){return i})
	.attr("x1", function (d, j) {
	return d.x1 * scale + fleft + Math.random() * randScale;
	})
	.attr("x2", function (d, j) {
	return d.x2 * scale + fleft + Math.random() * randScale;
	})
	.attr("y1", function (d, j) {
	return d.y1 * scale + ftop + Math.random() * randScale;
	})
	.attr("y2", function (d, j) {
	return d.y2 * scale + ftop + Math.random() * randScale;
	});
	};

	var multiBonesFcn = function(j) {
	c = j;

	// if it is the first time this function is called, it should append the g element
	if (j._exit === undefined) {
	c = j.append('g')
	.attr('class','bone-positions')
	.attr("opacity", function (d,i, k) {
	return 0.1 + 0.3 * i/5;
	})
	.selectAll('line.bone-line')
	.data(function(d,i) {

	return d;
	})
	.enter();
	} else {
	c = c.selectAll('line.bone-line')
	.data(function(d,i) {
	return d;
	});
	}

	lineBoneFcn(c);
	};

	var anim = function () {
	if (fig._dataReady) {
	if (startTime === 0)
	startTime = Date.now();

	animFrame = Math.floor((Date.now() - startTime)/1000 / fig.tracks[0].parserObject.frameTime);
	animFrame = Math.max(1, animFrame);

	if (animFrame >= fig.tracks[0].parserObject.frameCount) {
	startTime=Date.now();
	animFrame = 1;
	}

	fig.updateDraw(multiBonesFcn, 'bone-positions', [animFrame,animFrame+traillength], 1);
	animFrame++;
	}

	// window.requestAnimationFrame(anim);
	};

	var dataLoaded = function() {
	if (window.parent && window.parent.loaded)
	window.parent.loaded();


	// Let's first let go of the stuff we don't want to keep in mem
	fig.tracks[0].data['joint-positions'] = [];
	fig.tracks[0].data['joint-rotations'] = [];

	// Now let's remove the bones that are too short to be drawn.
	// Otherwise a lot of extra DOM has to be created
	fig.tracks[0].data['bone-positions'] = fig.tracks[0].data['bone-positions'].map(function(d,j){
	return d.filter(function(p,i) {
	return (CMUDeletedBones.indexOf(i) == -1);
	});
	});

	// Now add let the Mova know that we have a drawing function that uses bone-positions
	fig.addDrawMethod(multiBonesFcn, // the function to call drawing elements
	'bone-positions', // use bone positons
	[1,1+traillength], // use this subset of frames
	1); // use every 1 frame

	window.setInterval(anim,fig.tracks[0].parserObject.frameTime*1000);
	// anim();
	};

	function run() {
	fig = MovaViz('Sketchy')
	.debug(true) // print out the debug messages
	.data('https://www.sfu.ca/~oalemi/data/05/05_07.bvh','bvh', dataLoaded)
	.container(svg);
	}