SVG points and 2d transforms

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

svg {
  position: absolute;
  top: 0;
}

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

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

var data = d3.range(20000);

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 g = svg.append('g').attr('width', 200).attr('height', 200);

var p = g.selectAll("circle")
    .data(data)
    .enter()
    .append('circle')
    .attr('r', 2)
    .attr('transform', function(d, i) { return 'translate(' + [Math.random() * 200, Math.random() * 200] + ')' });

var fpsqueue = [];

d3.timer(function() {
  g.style('-webkit-transform', function() {
      return 'translate(' + Math.random() * 600 + 'px,' + Math.random() * 200 + 'px)'
  });

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>

Modified http://d3js.org/d3.v2.min.js?2.9.1 to a secure url

https://d3js.org/d3.v2.min.js?2.9.1