D3 Examples - timer

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .year {
      font-size: 50px
    }
  </style>
</head>
​
<body>
  <script>
    var current_year = 1984;
    var SPEED = 10000;
​
    
    var svg = d3.select("body").append("svg").attr({
      width:50,
      height:50
    })
    
    d3.tsv("file.tsv", type, function (error, data) {
      if (error) throw error;
      
    svg.append("text").attr("class", "year")
    .attr("x", 40)
        .attr("y", 40)
        .attr("text-anchor", "middle")
        .text(current_year);
      
      console.log(data)
    
      
    
    function timer() {
      current_year += 1;
      update();
      
      if(current_year == 2014) {
        current_year = 1984;
        setTimeout(timer, SPEED / 10);   
        } else if (current_year == 1984) {
        setTimeout(timer, SPEED / 1.8);   
        } else {
        setTimeout(timer, SPEED);   
        }
      
        console.log(current_year)
​
      }
      timer();
      
      
      function update() {
        if (current_year == 1984) {
          SPEED = 1500;
          svg.select(".year")
          .transition().duration(SPEED)
          .tween("text", function () {
            var i = d3.interpolate(this.textContent, current_year)
            return function (t) {
              this.textContent = Math.round(i(t));
            }
          });
          var easing = "bounce";
        } else {
          SPEED = 500;
          svg.select(".year").text(current_year);
          var easing = "linear";
        }
      }
    
      
    
    
      
      
      
      
      
      
    })  // tsv load
    
​
    
    
    
    
    function type (d, i) {
      
      d3.keys(d).map(function(key) {  // array of keys == y1989m for instance
        d[key] = +d[key];  // makes all the key property values numeric!!!
      })
      
//       console.log(d3.keys(d))
      
      return d;
    }
​
  </script>
</body>
​
    