pzeups/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />

    <title>Animation Test</title>
    <script src="http://d3js.org/d3.v2.min.js"></script>
    <style>
        body {
          font-family: Verdana;
          background-color: #fafafa;

          padding: 0;
          margin: 0;

          font-size: 16px;

          overflow: hidden;
        }
        .render circle {
            fill: #efefef;
            stroke: #000;
            stroke-width: 2px;
        }
        .render .link {
            stroke: #000;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
    <svg class="render" width="100%" style="position: absolute;"></svg>
    <script>
        var width = window.innerWidth;
        var height = window.innerHeight;
        var render = d3.select('.render').attr('width', width).attr('height', height);

        var data = {a: 3*height/4, b: height/4};

        var a = render.selectAll('.a').data([data])
            .enter().append('circle')
                .classed('a',1).attr('r', 20).attr('cx', width/3).attr('cy', function(d) { return d.a });
        var b = render.selectAll('.b').data([data])
            .enter().append('circle')
                .classed('b',1).attr('r', 20).attr('cx', 2*width/3).attr('cy', function(d) { return d.b });
        var link = render.selectAll('.link').data([data])
        link.enter().append('line').classed('link',1)
        link
            .attr('x1', width/3).attr('y1', function(d) { return d.a })
            .attr('x2', 2*width/3).attr('y2', function(d) { return d.b });

        function repeat_a() {
            a.transition().duration(800).attr('cy', height/4)
                .transition().attr('cy', 3*height/4).each('end', function() { repeat_a(); })
                    .each('end', function() { repeat_a(); })
        }
        repeat_a();

        function repeat_b() {
            b.transition().duration(1600).attr('cy', 3*height/4)
                .transition().attr('cy', height/4).each('end', function() { repeat_b(); })
                    .each('end', function() { repeat_b(); })
        }
        repeat_b();

        function repeat_link() {
            link.transition().duration(800).attr('y1', height/4)
            link.transition().delay(800).duration(800).attr('y1', 3*height/4)

            link.transition().delay(1600).duration(800).attr('y1', height/4)
            link.transition().delay(2400).duration(800).attr('y1', 3*height/4)

            link.transition().duration(1600).attr('y2', 3*height/4)
            link.transition().delay(1600).duration(1600).attr('y2', height/4)
                .each('end', function() { repeat_link(); })
        }

        repeat_link();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
	<meta name="viewport" content="user-scalable=no, width=device-width" />

	<title>Animation Test</title>
	<script src="http://d3js.org/d3.v2.min.js"></script>
	<style>
	body {
	font-family: Verdana;
	background-color: #fafafa;

	padding: 0;
	margin: 0;

	font-size: 16px;

	overflow: hidden;
	}
	.render circle {
	fill: #efefef;
	stroke: #000;
	stroke-width: 2px;
	}
	.render .link {
	stroke: #000;
	stroke-width: 2px;
	}
	</style>
	</head>
	<body>
	<svg class="render" width="100%" style="position: absolute;"></svg>
	<script>
	var width = window.innerWidth;
	var height = window.innerHeight;
	var render = d3.select('.render').attr('width', width).attr('height', height);

	var data = {a: 3*height/4, b: height/4};

	var a = render.selectAll('.a').data([data])
	.enter().append('circle')
	.classed('a',1).attr('r', 20).attr('cx', width/3).attr('cy', function(d) { return d.a });
	var b = render.selectAll('.b').data([data])
	.enter().append('circle')
	.classed('b',1).attr('r', 20).attr('cx', 2*width/3).attr('cy', function(d) { return d.b });
	var link = render.selectAll('.link').data([data])
	link.enter().append('line').classed('link',1)
	link
	.attr('x1', width/3).attr('y1', function(d) { return d.a })
	.attr('x2', 2*width/3).attr('y2', function(d) { return d.b });

	function repeat_a() {
	a.transition().duration(800).attr('cy', height/4)
	.transition().attr('cy', 3*height/4).each('end', function() { repeat_a(); })
	.each('end', function() { repeat_a(); })
	}
	repeat_a();

	function repeat_b() {
	b.transition().duration(1600).attr('cy', 3*height/4)
	.transition().attr('cy', height/4).each('end', function() { repeat_b(); })
	.each('end', function() { repeat_b(); })
	}
	repeat_b();

	function repeat_link() {
	link.transition().duration(800).attr('y1', height/4)
	link.transition().delay(800).duration(800).attr('y1', 3*height/4)

	link.transition().delay(1600).duration(800).attr('y1', height/4)
	link.transition().delay(2400).duration(800).attr('y1', 3*height/4)

	link.transition().duration(1600).attr('y2', 3*height/4)
	link.transition().delay(1600).duration(1600).attr('y2', height/4)
	.each('end', function() { repeat_link(); })
	}

	repeat_link();
	</script>
	</body>
	</html>