Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created November 16, 2012 17:13
Show Gist options
  • Save tmcw/4089090 to your computer and use it in GitHub Desktop.
Save tmcw/4089090 to your computer and use it in GitHub Desktop.
SVG Performance with paths and rounded but long coordinates
<!DOCTYPE html>
<meta charset="utf-8">
<title>SVG Swarm</title>
<style>
svg {
position: absolute;
top: 0;
}
circle {
fill: steelblue;
stroke: #666;
stroke-width: 1.5px;
}
</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(4000).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 p = svg.append("path")
.data([data])
.attr("d", function(d) {
return 'M' + d.map(function(x) { return [x.xloc, x.yloc]; }).join('L');
});
var fpsqueue = [];
d3.timer(function() {
data.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;
});
p.attr("d", function(d) {
return 'M' + d.map(function(a) { return [(~~x(a.xloc)).toFixed(13), (~~y(a.yloc)).toFixed(13)]; }).join('L');
});
time1 = Date.now();
if (fpsqueue.length === 100) { fps.text(d3.mean(fpsqueue).toFixed(3)); fpsqueue.pop(); }
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