aaizemberg/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>timer / fps</title>
  <script src="//d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <div id="fps">FPS: <span>?</span></div>
</body>

<script>
var w = 960, h = 100;

var svg = d3.select("body")
            .append("svg")
              .attr("width",w)
              .attr("height",h);

var data = d3.range(w).map(function(d,i) {
  return {
    x1: i,
    y1: 0,
    x2: i,
    y2: Math.trunc(Math.random()*h)
  };
});

var lines = svg.selectAll("line").data(data).enter().append("line")
 .attr("x1",function(d) {return d.x1; } )
 .attr("y1",function(d) {return d.y1; } )
 .attr("x2",function(d) {return d.x2; } )
 .attr("y2",function(d) {return d.y2; } )
 .attr("stroke", "black" )

var fps = d3.select("#fps span");

var t0 = Date.now(), t1;

d3.timer( function() {

  data.forEach( function(d) {
    d.y2++;
    if (d.y2 > h) d.y2 = 0;
  })
  lines.attr("y2", function(d) {return d.y2;} )

  t1 = Date.now();
  fps.text( Math.round(1000 / (t1-t0)));
  t0 = t1;

});

</script>

<!-- idea original: SVG Swarm | https://bl.ocks.org/mbostock/2647924 -->

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>timer / fps</title>
	<script src="//d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<div id="fps">FPS: <span>?</span></div>
	</body>

	<script>
	var w = 960, h = 100;

	var svg = d3.select("body")
	.append("svg")
	.attr("width",w)
	.attr("height",h);

	var data = d3.range(w).map(function(d,i) {
	return {
	x1: i,
	y1: 0,
	x2: i,
	y2: Math.trunc(Math.random()*h)
	};
	});

	var lines = svg.selectAll("line").data(data).enter().append("line")
	.attr("x1",function(d) {return d.x1; } )
	.attr("y1",function(d) {return d.y1; } )
	.attr("x2",function(d) {return d.x2; } )
	.attr("y2",function(d) {return d.y2; } )
	.attr("stroke", "black" )

	var fps = d3.select("#fps span");

	var t0 = Date.now(), t1;

	d3.timer( function() {

	data.forEach( function(d) {
	d.y2++;
	if (d.y2 > h) d.y2 = 0;
	})
	lines.attr("y2", function(d) {return d.y2;} )

	t1 = Date.now();
	fps.text( Math.round(1000 / (t1-t0)));
	t0 = t1;

	});

	</script>

	<!-- idea original: SVG Swarm \| https://bl.ocks.org/mbostock/2647924 -->

	</html>