NVD3 with Subset Filters

<!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'>
        
        <select
          ng-model="selected" 
          ng-options="c as c.value group by c.variable for c in filters" 
          class="form-control" multiple size="10">
        </select>
      </form>
    </div>
    <div class='col-md-8'>
      <div class="bs-docs-example">
        <div id='chart381e2be150ff' class='rChart '>
          <svg></svg>
        </div>
        
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
function DemoCtrl($scope){
  $scope.opts = {
 "dom": "chart381e2be150ff",
"width":    700,
"height":    400,
"x": "Hair",
"y": "Freq",
"group": "Eye",
"type": "multiBarChart",
"id": "chart381e2be150ff" 
}
  $scope.data = [
 {
 "Hair": "Black",
"Eye": "Brown",
"Sex": "Male",
"Freq":             32 
},
{
 "Hair": "Brown",
"Eye": "Brown",
"Sex": "Male",
"Freq":             53 
},
{
 "Hair": "Red",
"Eye": "Brown",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Brown",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Black",
"Eye": "Blue",
"Sex": "Male",
"Freq":             11 
},
{
 "Hair": "Brown",
"Eye": "Blue",
"Sex": "Male",
"Freq":             50 
},
{
 "Hair": "Red",
"Eye": "Blue",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Blue",
"Sex": "Male",
"Freq":             30 
},
{
 "Hair": "Black",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Brown",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             25 
},
{
 "Hair": "Red",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              5 
},
{
 "Hair": "Black",
"Eye": "Green",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Brown",
"Eye": "Green",
"Sex": "Male",
"Freq":             15 
},
{
 "Hair": "Red",
"Eye": "Green",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Green",
"Sex": "Male",
"Freq":              8 
},
{
 "Hair": "Black",
"Eye": "Brown",
"Sex": "Female",
"Freq":             36 
},
{
 "Hair": "Brown",
"Eye": "Brown",
"Sex": "Female",
"Freq":             66 
},
{
 "Hair": "Red",
"Eye": "Brown",
"Sex": "Female",
"Freq":             16 
},
{
 "Hair": "Blond",
"Eye": "Brown",
"Sex": "Female",
"Freq":              4 
},
{
 "Hair": "Black",
"Eye": "Blue",
"Sex": "Female",
"Freq":              9 
},
{
 "Hair": "Brown",
"Eye": "Blue",
"Sex": "Female",
"Freq":             34 
},
{
 "Hair": "Red",
"Eye": "Blue",
"Sex": "Female",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Blue",
"Sex": "Female",
"Freq":             64 
},
{
 "Hair": "Black",
"Eye": "Hazel",
"Sex": "Female",
"Freq":              5 
},
{
 "Hair": "Brown",
"Eye": "Hazel",
"Sex": "Female",
"Freq":             29 
},
{
 "Hair": "Red",
"Eye": "Hazel",
"Sex": "Female",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Hazel",
"Sex": "Female",
"Freq":              5 
},
{
 "Hair": "Black",
"Eye": "Green",
"Sex": "Female",
"Freq":              2 
},
{
 "Hair": "Brown",
"Eye": "Green",
"Sex": "Female",
"Freq":             14 
},
{
 "Hair": "Red",
"Eye": "Green",
"Sex": "Female",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Green",
"Sex": "Female",
"Freq":              8 
} 
]
  $scope.controls = [] 
  $scope.filters = [
 {
 "variable": "Sex",
"value": "Male" 
},
{
 "variable": "Sex",
"value": "Female" 
} 
]
  
  $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)
  }
  
	var data = d3.nest()
		.key(function(d){
			return opts.group === undefined ? 'main' : d[opts.group]
		})
		.entries(data)
	
	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)
		
	chart
  .color([ "brown", "blue", "#594c26", "green" ])

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