omimo/index.html

## index.html
<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>

## mviz.js
// 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();
    });
});

## mviz.yaml
title: 'Lone'
description: |
    A simple example of drawing a single frame of motion capture data in d3.js

## preview.png

      
    Raw
  

              preview.png
	<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