rCharts with Intersection Filter

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="https://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="https://aozora.github.io/bootplus/assets/css/docs.css">
    <link rel='stylesheet' href='https:////cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/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>

#require(devtools)
#install(&quot;rCharts&quot;,&quot;ramnathv&quot;,ref=&quot;dev&quot;)
require(rCharts)

n1 &lt;- nPlot(
  Freq ~ Sex,
  group = &quot;Eye&quot;,
  data = as.data.frame(HairEyeColor),
  type = &quot;multiBarChart&quot;  
)
n1$addFilters(&quot;Hair&quot;,&quot;Eye&quot;)
n1$templates$script = &quot;https://timelyportfolio.github.io/rCharts_nvd3_templates/script_multiselect.html&quot;
n1</code></pre>
  </div>
</div>
<script type="text/javascript">
function DemoCtrl($scope){
  $scope.opts = {
 "dom": "chart26a8482f1ed8",
"width":    700,
"height":    400,
"x": "Sex",
"y": "Freq",
"group": "Eye",
"type": "multiBarChart",
"id": "chart26a8482f1ed8" 
}
  $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": "Hair",
"value": "Black" 
},
{
 "variable": "Hair",
"value": "Brown" 
},
{
 "variable": "Hair",
"value": "Red" 
},
{
 "variable": "Hair",
"value": "Blond" 
},
{
 "variable": "Eye",
"value": "Brown" 
},
{
 "variable": "Eye",
"value": "Blue" 
},
{
 "variable": "Eye",
"value": "Hazel" 
},
{
 "variable": "Eye",
"value": "Green" 
} 
]
  
  $scope.drawChart = function(){
    drawChart($scope.opts, $scope.data)  
  }
  
  $scope.$watch('selected', function(){
    if (!(typeof($scope.selected) === "undefined")) {
      $scope.opts.selected = $scope.selected.map(function(d){
        selectKey={};
        selectKey[d.variable]=d.value;
        return selectKey;
      })
    }
  }) 
  
  $scope.$watch('opts',function(){
    $scope.drawChart()
	}, true)
}

function drawChart(opts, data){ 
  var selectedData;
  if (_.keys(opts.selected).length > 0){
  /* for multiselect union
    data = _.at(data,_.chain(opts.selected)
      .map(function(d){
        return _.compact(
          data.map(function(val,ind){
           if(val[_.keys(d)[0]]===d[_.keys(d)[0]]) {
              return ind
            } else {return false}
          })
        )
      })
      .flatten()
      .uniq()
      .value()
    )
  */

// for multiselect intersection
    selectedData = _.chain(opts.selected)
      .map(function(d){
        return _.compact(
          data.map(function(val,ind){
           if(val[_.keys(d)[0]]===d[_.keys(d)[0]]) {
              return ind
            } else {return false}
          })
        )
      })
      .value();
  
     var intersected = _.countBy(_.flatten(selectedData,function(d){return d}));

var varKeys = _.uniq(_.flatten(opts.selected.map(function(d){return _.keys(d)})));

selectedData = _.at(data,_.chain(intersected)
        .map(function(d,i){
          if (d===varKeys.length) {return i} else {return false}
        })
        .compact()
        .value()
      );
  } else {selectedData = data;} 
  
  var data = selectedData;

data = d3.nest()
		.key(function(d){
			return opts.group === undefined ? 'main' : d[opts.group]
		})
		.entries(selectedData);
	
	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>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'></script>
  
  <script>
    var pres = document.getElementsByTagName("pre");
    for (var i=0; i < pres.length; ++i) {
      pres[i].className = "prettyprint linenums";
    }
    prettyPrint();
  </script>
</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://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

Modified http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.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://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

https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js

https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js