Skip to content

Instantly share code, notes, and snippets.

@mourner
Forked from tmcw/index.html
Created November 15, 2012 21:22
Show Gist options
  • Save mourner/4081364 to your computer and use it in GitHub Desktop.
Save mourner/4081364 to your computer and use it in GitHub Desktop.
SVG points and 3d 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="http://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.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.round(Math.random() * 200), Math.round(Math.random() * 200)] + ')' });
var fpsqueue = [];
d3.timer(function() {
g.style('-webkit-transform', function() {
return 'translate3d(' + Math.round(Math.random() * 600) + 'px,' + Math.round(Math.random() * 200) + 'px, 0)'
});
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment