Loading data into Angular, Part II

This is a code excerpt from the book, D3 on Angular. http://leanpub.com/d3angularjs

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

myApp.controller('MainCtrl', function($scope){
  d3.json('donut-data.json', function(err, data){
    if(err){ throw err; }
    $scope.data = data;
    $scope.$apply();
  });
});

myApp.directive('donutChart', function(){
  function link(scope, el, attr){
    var color = d3.scale.category10();
    var width = 200;
    var height = 200;
    var min = Math.min(width, height);
    var svg = d3.select(el[0]).append('svg');
    var pie = d3.layout.pie().sort(null);
    var arc = d3.svg.arc()
      .outerRadius(min / 2 * 0.9)
      .innerRadius(min / 2 * 0.5);

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

// center the donut chart
    var g = svg.append('g')
      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
    
    // add the <path>s for each arc slice
    var arcs = g.selectAll('path');

scope.$watch('data', function(data){
      if(!data){ return; }
      arcs = arcs.data(pie(data));
      arcs.exit().remove();
      arcs.enter().append('path')
        .style('stroke', 'white')
        .attr('fill', function(d, i){ return color(i) });
      // update all the arcs (not just the ones that might have been added)
      arcs.attr('d', arc);
    }, true);
  }
  return {
    link: link,
    restrict: 'E',
    scope: { data: '=' }
  };
});
  </script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js

https://d3js.org/d3.v3.min.js