D3 Examples - fps-meter

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
​
</style>
​
<body></body>
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
​
<script>
​
fpsInit()
​
function fpsInit(){
  var counter = d3.select('body').append('div')
      .style({
        'font-family': 'monospace', 
        position: 'fixed',
        'padding': '8px',
        'background': 'black',
        'color': 'white'
      })
​
  var ticks = []
​
  d3.timer(function(t){
    ticks.push(t)
    if (ticks.length > 15) ticks.shift()
​
    var avgFrameLength = (_.last(ticks) - ticks[0])/ticks.length
    counter.text(Math.round(1/avgFrameLength*1000) + ' fps')
​
    //todo - line chart
  })
​
}
​
​
</script>
​
​
    