Pie Charts with NVD3 Controls

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel='stylesheet' href='https://nvd3.org/src/nv.d3.css'>
    
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script src='https://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='https://timelyportfolio.github.io/rcharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
    <script src='https://nvd3.org/lib/fisheye.js' type='text/javascript'></script>
    
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    .bs-docs-example:after {
      content: "";
      background: transparent;
      border: none;
    }
    </style>
    
  </head>
  <body ng-app>
      
    <div class='container' ng-controller="DemoCtrl">
  <div class='row'>
    <div class='col-md-3'>
      <form class='well'>
        <label><b>Select  y :</b></label>
    		<select class='form-control' ng-model="opts.y" 
          ng-options="ctl for ctl in controls.y.values">   
    		</select><br>
              </form>
    </div>
    <div class='col-md-8'>
      <div class="bs-docs-example">
        <div id='chart12df3ce76058' class='rChart '>
          <svg></svg>
        </div>
        
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
function DemoCtrl($scope){
  $scope.opts = {
 "dom": "chart12df3ce76058",
"width":    700,
"height":    400,
"process_data": true,
"x": "Sp",
"y": "A",
"group": "Sp",
"type": "pieChart",
"id": "chart12df3ce76058" 
}
  $scope.data = [
 {
 "Sp": "a",
"A":             10,
"B":              3,
"C":              1 
},
{
 "Sp": "b",
"A":              4,
"B":              5,
"C":              0 
},
{
 "Sp": "c",
"A":              3,
"B":             22,
"C":             10 
},
{
 "Sp": "d",
"A":              0,
"B":              4,
"C":              8 
} 
]
  $scope.controls = {
 "y": {
 "name": "y",
"value": "A",
"values": [ "A", "B", "C" ],
"label": "Select  y :" 
} 
} 
  $scope.filters = []
  
  $scope.drawChart = function(){
    drawChart($scope.opts, $scope.data)  
  }
  
  $scope.$watch('selected', function(){
    var keys = _.pluck($scope.selected, "variable")
    var values = _.pluck($scope.selected, "value")
    $scope.opts.selected = _.zipObject(keys, values)
  }) 
  
  $scope.$watch('opts',function(){
    $scope.drawChart()
	}, true)
}

function drawChart(opts, data){ 
  if (Object.keys(opts.selected).length > 0){
    data = _.filter(data, opts.selected)
  }
  
  if(!(opts.type==="pieChart" || opts.type==="sparklinePlus" || opts.type==="bulletChart")) {
    var data = d3.nest()
      .key(function(d){
        //return opts.group === undefined ? 'main' : d[opts.group]
        //instead of main would think a better default is opts.x
       return opts.group === undefined ? opts.y : d[opts.group];
      }).entries(data);
  }
      
  if (opts.disabled != undefined){
    data.map(function(d, i){
      d.disabled = opts.disabled[i]
    })
  }
	
	nv.addGraph(function() {
		var chart = nv.models[opts.type]()
			.x(function(d) { return d[opts.x] })
			.y(function(d) { return d[opts.y] })
			.width(opts.width)
			.height(opts.height)

d3.select("#" + opts.id + ' svg')
  // .empty()
		.datum(data)
		.transition().duration(500)
		.call(chart);
	
	 nv.utils.windowResize(chart.update);
	 return chart;
  });
};
</script>
    
  </body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js to a secure url

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

Modified http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js to a secure url

Modified http://nvd3.org/lib/fisheye.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

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

https://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js

https://nvd3.org/lib/fisheye.js

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js