Using angular to make reusable circles

<!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">
  <my-circle data="[[20,'red']]"></my-circle>
  <my-circle data="[[5,'blue']]"></my-circle>
  <my-circle data="[[40,'green']]"></my-circle>
  <my-circle data="[[65,'purple']]"></my-circle>
  <script>
    var myApp = angular.module('myApp', []);
    myApp.directive('myCircle', function(){
      function link(scope, el, attr){
        var color = d3.scale.category10();
        var data = scope.data;
        var width = 300;
        var height = 300;
        var min = Math.min(width, height);
        var svg = d3.select(el[0]).append('svg');
        
    
        svg.attr({width: width, height: height});
        var g = svg.append('g')
          // center the donut chart
          .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
        
        // add the <path>s for each arc slice
        g.selectAll('path').data(data)
          .enter().append('circle')
            .attr("cx",1)
            .attr("cy",1)
            .attr("r",function(d) {return d[0];})
            .attr('fill', function(d) {return d[1];});
      }
      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