<script src='datamaps/js/d3.v3.min.js' type='text/javascript'></script>
<script src='datamaps/js/topojson.v1.min.js' type='text/javascript'></script>
<script src='datamaps/js/datamaps.all.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js' type='text/javascript'></script>

<style>
.rChart {
  display: block;
  margin-left: auto; 
  margin-right: auto;
  width: 800px;
  height: 400px;
}  
</style>

        <div class='container'>
         <button ng-click='animateMap()'>Play</button>
         <span ng-bind='year'></span>
         <div id='charta9c2f5f7bbe' class='rChart datamaps'></div>
        </div>
        <script>
          function rChartsCtrl($scope, $timeout){
            $scope.year = 1960;
              $scope.animateMap = function(){
              if ($scope.year > 2010){
                return;
              }
              mapcharta9c2f5f7bbe.updateChoropleth(chartParams.newData[$scope.year]);
              $scope.year += 1
              $timeout($scope.animateMap, 1000)
            }
          }
       </script>    
<script id='popup-template' type='text/x-handlebars-template'>

<script></script>