ajashton/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>SVG Swarm</title>
<style>

svg {
  position: absolute;
  top: 0;
}

use {
    fill:none;
    stroke:#000;
    stroke-width:2;
}

</style>
<div id="fps">FPS: <span>?</span></div>
<input type='checkbox' id='reverse' /><label for='reverse'>reverse</label>
<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>

var data = [];
for (var t = 0; t < 12; t += 0.1) {
    data.push([
        Math.cos(t * 0.5),
        Math.sin(t)
    ]);
}

var width = 960,
    height = 500;

var x = d3.scale.linear()
    .domain([-2, 2])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-2, 2])
    .range([0, height]);

var time0 = Date.now(),
    time1;

var fps = d3.select("#fps span");

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var defs = svg.append('defs');

var path = defs.selectAll('path')
    .data([data])
    .enter()
    .append('path').attr('id', 'p')
    .attr("d", function(d) {
      return 'M' + d.map(function(a) {
          return [x(a[0]), y(a[1])];
      }).join('L');
    });

var p = svg.selectAll('use')
    .data([data])
    .enter()
    .append("use").attr('xlink:href', '#p');

var arrow = svg.append('text').text('☃');
var alength = arrow.node().getComputedTextLength();
arrow.remove();

var tp = svg.append("text").attr('dy', 7).append('textPath');

var fpsqueue = [];
var forward = true;

var z = 0.5;

var rev = d3.select('#reverse');

d3.timer(function() {

  data = [];
  var n = 0;
  for (var t = 0; t < 12; t += 0.001, n++) {
      data[n] = [
          Math.cos(t * z),
          Math.sin(t)
      ];
  }
  z += 0.002;
  if (z > 4) z = 0.5;

  if (rev.node().checked) data.reverse();

  tp.attr('letter-spacing', alength * 2)
      .attr('xlink:href', '#p').text(function() {
          return (new Array(Math.floor(path.node().getTotalLength() / alength / 2))).join('☃');
      });

  path.data([data]).attr("d", function(d) {
    return 'M' + d.map(function(a) {
        return [x(a[0]), y(a[1])];
    }).join('L');
  });

  time1 = Date.now();
  if (fpsqueue.length === 200) { fps.text(d3.mean(fpsqueue).toFixed(3)); fpsqueue = []; }
  fpsqueue.push(Math.round(1000 / (time1 - time0)));
  time0 = time1;
});
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>SVG Swarm</title>
	<style>

	svg {
	position: absolute;
	top: 0;
	}

	use {
	fill:none;
	stroke:#000;
	stroke-width:2;
	}

	</style>
	<div id="fps">FPS: <span>?</span></div>
	<input type='checkbox' id='reverse' /><label for='reverse'>reverse</label>
	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
	<script>

	var data = [];
	for (var t = 0; t < 12; t += 0.1) {
	data.push([
	Math.cos(t * 0.5),
	Math.sin(t)
	]);
	}

	var width = 960,
	height = 500;

	var x = d3.scale.linear()
	.domain([-2, 2])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([-2, 2])
	.range([0, height]);

	var time0 = Date.now(),
	time1;

	var fps = d3.select("#fps span");

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var defs = svg.append('defs');

	var path = defs.selectAll('path')
	.data([data])
	.enter()
	.append('path').attr('id', 'p')
	.attr("d", function(d) {
	return 'M' + d.map(function(a) {
	return [x(a[0]), y(a[1])];
	}).join('L');
	});

	var p = svg.selectAll('use')
	.data([data])
	.enter()
	.append("use").attr('xlink:href', '#p');

	var arrow = svg.append('text').text('☃');
	var alength = arrow.node().getComputedTextLength();
	arrow.remove();

	var tp = svg.append("text").attr('dy', 7).append('textPath');

	var fpsqueue = [];
	var forward = true;

	var z = 0.5;

	var rev = d3.select('#reverse');

	d3.timer(function() {

	data = [];
	var n = 0;
	for (var t = 0; t < 12; t += 0.001, n++) {
	data[n] = [
	Math.cos(t * z),
	Math.sin(t)
	];
	}
	z += 0.002;
	if (z > 4) z = 0.5;

	if (rev.node().checked) data.reverse();

	tp.attr('letter-spacing', alength * 2)
	.attr('xlink:href', '#p').text(function() {
	return (new Array(Math.floor(path.node().getTotalLength() / alength / 2))).join('☃');
	});

	path.data([data]).attr("d", function(d) {
	return 'M' + d.map(function(a) {
	return [x(a[0]), y(a[1])];
	}).join('L');
	});

	time1 = Date.now();
	if (fpsqueue.length === 200) { fps.text(d3.mean(fpsqueue).toFixed(3)); fpsqueue = []; }
	fpsqueue.push(Math.round(1000 / (time1 - time0)));
	time0 = time1;
	});
	</script>