danharr/data.json

## data.json
{"name":"alan" , "age":8},
{"name":"alan2" , "age":18}

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
  <donut-chart data="donutData"></donut-chart>
  <script>
var myApp = angular.module('myApp', []);
var data;

myApp.controller('MainCtrl', function($scope, $http, $interval){
  $interval(function(){
    $http.get('data.json').then(function(response){
      // your API would presumably be sending new data, not the same
      // data each time!
      data = response.data
        .map(function(d){ return d  });

      $scope.donutData = data;
	  //console.log(data);
    }, function(err){
      throw err;
    });
  }, 1000);
});

myApp.directive('donutChart', function(){
  function link(scope, el, attr){
    var color = d3.scale.category10();
    var width = 800;
    var height = 800;
    var min = Math.min(width, height);
    var svg = d3.select(el[0]).append('svg');


    svg.attr({width: width, height: height});

    // center the donut chart
    var g = svg.append('g');

    // add the <path>s for each arc slice
    var arcs = g.selectAll('path');

    scope.$watch('data', function(data){
      if(!data){ return; }
      arcs = arcs.data(data);
      arcs.exit().remove();
      arcs.enter().append('circle')
	  .attr("cx",function(d,i) {return 100+i*100;})
	  .attr("cy",function(d,i) {return 200;})
	  .attr("r",function(d,i) {return d.age;})
        .style('stroke', 'white')
        .attr('fill', function(d, i){ return color(3) });
    }, true);
  }
  return {
    link: link,
    restrict: 'E',
    scope: { data: '=' }
  };
});
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body ng-app="myApp" ng-controller="MainCtrl">
	<donut-chart data="donutData"></donut-chart>
	<script>
	var myApp = angular.module('myApp', []);
	var data;

	myApp.controller('MainCtrl', function($scope, $http, $interval){
	$interval(function(){
	$http.get('data.json').then(function(response){
	// your API would presumably be sending new data, not the same
	// data each time!
	data = response.data
	.map(function(d){ return d });

	$scope.donutData = data;
	//console.log(data);
	}, function(err){
	throw err;
	});
	}, 1000);
	});

	myApp.directive('donutChart', function(){
	function link(scope, el, attr){
	var color = d3.scale.category10();
	var width = 800;
	var height = 800;
	var min = Math.min(width, height);
	var svg = d3.select(el[0]).append('svg');


	svg.attr({width: width, height: height});

	// center the donut chart
	var g = svg.append('g');

	// add the <path>s for each arc slice
	var arcs = g.selectAll('path');

	scope.$watch('data', function(data){
	if(!data){ return; }
	arcs = arcs.data(data);
	arcs.exit().remove();
	arcs.enter().append('circle')
	.attr("cx",function(d,i) {return 100+i*100;})
	.attr("cy",function(d,i) {return 200;})
	.attr("r",function(d,i) {return d.age;})
	.style('stroke', 'white')
	.attr('fill', function(d, i){ return color(3) });
	}, true);
	}
	return {
	link: link,
	restrict: 'E',
	scope: { data: '=' }
	};
	});
	</script>
	</body>
	</html>