D3 Examples - Massive HTML updates onscreen

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>SVG Swarm</title>
<style>
​
svg {
  position: absolute;
  top: 0;
}
​
path {
    fill:none;
    stroke-width:1;
    stroke:#000;
}
​
#fps {
    font-size:50px;
    background:#fff;
}
​
</style>
<div id='chart'></div>
<div id="fps">FPS: <span>?</span></div>
<script src="https://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>
​
var data = d3.range(10000);
​
var width = 960,
    height = 500;
​
var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, width]);
​
var y = d3.scale.linear()
    .domain([0, 1])
    .range([100, height]);
​
var time0 = Date.now(),
    time1;
​
var fps = d3.select("#fps span");
​
var c = d3.select("#chart")
​
var p = c.selectAll("div")
    .data(data)
    .enter()
    .append('div')
    .style({width: '2px', height: '2px', position: 'absolute',background: '#000'});
​
var fpsqueue = [];
​
var rb = d3.interpolateRgb('#FF0000', '#0080FF');
​
d3.timer(function() {
  p.style('left', function(d, i) { return x(Math.random()) + 'px'; });
  p.style('top', function(d, i) { return y(Math.random()) + 'px'; });
​
  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>
​
    