tmcw/index.html

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

svg {
  position: absolute;
  top: 0;
}

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

</style>
<div id="fps">FPS: <span>?</span></div>
<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>

var data = d3.range(100).map(function() {
    return d3.range(5).map(function() {
        return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};
    });
});

var width = 960,
    height = 500;

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

var y = d3.scale.linear()
    .domain([-5, 5])
    .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 use = svg.append('defs').selectAll('path')
    .data(data)
    .enter()
    .append('path')
    .attr('id', function(d, i) { return 'path-' + i; })
    .attr("d", function(d) {
        return 'M' + d.map(function(x) { return [x.xloc, x.yloc]; }).join('L');
    });

var p = svg.selectAll("use")
    .data(data)
    .enter()
    .append('use')
    .attr('xlink:href', function(d, i) { '#path-' + i; });

var fpsqueue = [];

d3.timer(function() {

    data.forEach(function(x) {
        x.forEach(function(d) {
            d.xloc += d.xvel;
            d.yloc += d.yvel;
            d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc;
            d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc;
      });
  });

  use.attr("d", function(d) {
      return 'M' + d.map(function(a) { return [x(a.xloc), y(a.yloc)]; }).join('L');
  });

  p.attr('xlink:href', function(d, i) { return '#path-' + i; });

  time1 = Date.now();
  if (fpsqueue.length === 100) { 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-width:1;
	stroke:#000;
	}

	</style>
	<div id="fps">FPS: <span>?</span></div>
	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
	<script>

	var data = d3.range(100).map(function() {
	return d3.range(5).map(function() {
	return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};
	});
	});

	var width = 960,
	height = 500;

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

	var y = d3.scale.linear()
	.domain([-5, 5])
	.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 use = svg.append('defs').selectAll('path')
	.data(data)
	.enter()
	.append('path')
	.attr('id', function(d, i) { return 'path-' + i; })
	.attr("d", function(d) {
	return 'M' + d.map(function(x) { return [x.xloc, x.yloc]; }).join('L');
	});

	var p = svg.selectAll("use")
	.data(data)
	.enter()
	.append('use')
	.attr('xlink:href', function(d, i) { '#path-' + i; });

	var fpsqueue = [];

	d3.timer(function() {

	data.forEach(function(x) {
	x.forEach(function(d) {
	d.xloc += d.xvel;
	d.yloc += d.yvel;
	d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc;
	d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc;
	});
	});

	use.attr("d", function(d) {
	return 'M' + d.map(function(a) { return [x(a.xloc), y(a.yloc)]; }).join('L');
	});

	p.attr('xlink:href', function(d, i) { return '#path-' + i; });

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

	</script>