slider to control a circle size

<!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>
  <style>
    input {
      position:absolute;
      left:200px;
      top:20px;
    }
    </style>
</head>
<body ng-app="myApp" ng-init="chart=[10]">
  <input type="range" ng-model="chart[0]">
  <my-circle data="chart"></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 = 800;
        var height = 800;
        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( 100 , 100 )');
        
        // add the <path>s for each arc slice
        var arcs = g.selectAll('circle').data(data)
          .enter().append('circle')
            .style('stroke', 'white')
            .attr("cx",50)
            .attr("cy",50)
            .attr("r",function(d,i) {return d;})
            .attr('fill', function(d,i) {return color(d);});

scope.$watch('data', function(){
          arcs.data(data)
          .attr("r",function(d,i) {return d;})
          .attr('fill', function(d,i) {return color(d);})
          .style("stroke","black")
          .style("stroke-width",function(d,i) {return d/10;});
        }, 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