Skip to content

Instantly share code, notes, and snippets.

@mjromper
Forked from mbostock/.block
Last active Mar 20, 2021
Embed
What would you like to do?
SVG Performance Test

Wait until number of points recommended stops.

<!DOCTYPE html>
<meta charset="utf-8">
<title>SVG/D3 Performance Test</title>
<style>
svg {
position: absolute;
top: 0;
}
circle {
stroke: #666;
stroke-width: 1.5px;
}
</style>
<div style="font-size: 22px; position:absolute;z-index:2;">
<div id="num">Recommended number of points: <span>?</span></div>
<div id="fps">FPS: <span>?</span></div>
</div>
<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>
var pointsNumber = 2;
var colors = d3.scale.category10();
var data = d3.range(pointsNumber).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 numEl = d3.select("#num span");
numEl.text(pointsNumber);
var fps = d3.select("#fps span");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height).append("g");
var circle = svg.selectAll("circle")
.data(data);
circle.exit().remove();
circle.enter().append("circle")
.attr("fill", function(d,i){
return colors(i);
})
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 1);
var average_fps = [];
var fpsValue = 0;
d3.timer(function() {
//console.log('here', data);
if (fpsValue > 24){
for (var g=0; g<10; g++){
data.push({xloc: 0, yloc: 0, xvel: 0, yvel: 0});
svg.append("circle")
.attr("cx", 10)
.attr("cy", 10)
.attr("fill", function(d,i){
return colors(data.length);
})
.attr("r", 1);
}
circle = svg.selectAll("circle").data(data);
numEl.text(data.length);
}
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;
});
circle
.attr("transform", function(d) { return "translate(" + x(d.xloc) + "," + y(d.yloc) + ")"; })
.attr("r", function(d) { return Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10); });
time1 = Date.now();
var currentFPS = Math.round(1000 / (time1 - time0));
if (!isNaN(currentFPS)){
average_fps.push(currentFPS);
if (average_fps.length === 10){
var avg = 0;
for (var h=0; h<average_fps.length; h++){
avg += average_fps[h];
}
fpsValue = avg/average_fps.length;
fps.text(fpsValue);
average_fps = [];
}
}
time0 = time1;
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment