D3 Animator

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
   <div class="col-xs-12">
    <div class="img"></div>
    <div class="btn btn-group" style>
     <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-backward"></span>
      </button>
     <button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-play"></span>
     </button>
     <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-forward"></span>
     </button>
    </div>
       
    </div> 
   </div>    
</div>

CSS

.container{
  margin-top: 40px;
}

CoffeeScript

img = d3.select(".img").append("img")
            
x = [1130, 1145, 1200, 1215, 1230, 1245, 1315, 1330, 1345, 1400, 1415, 1430]
i = 0
f = (d) ->
  d = d || 1
  i = i + d
  if (i > x.length - 1)
    return
  url =  "http://brentertz.github.io/scianimator/assets/images/ir/20101209_#{x[i]}_US_ir.jpg"
  img.attr
    src: url
    width: '100%'
  console.log i
  console.log x.length
  if (i is x.length - 1)
    clearInterval(y)
  #i += 1
    
y = f()
d3.select(".glyphicon-play").on "click", ->
  y = setInterval(f, 1000)
d3.select(".glyphicon-forward").on "click", ->
  f(1)
d3.select(".glyphicon-backward").on "click", ->
  f(-1)