mjromper/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Wait until number of points recommended stops.

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>