rCharts + DAT.GUI

<!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://twitter.github.io/bootstrap/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://nvd3.org/src/nv.d3.css'>
    
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
    <script src='https://d3js.org/d3.v2.min.js' type='text/javascript'></script>
    <script src='https://nvd3.org/nv.d3.js' type='text/javascript'></script>
    <script src='https://nvd3.org/lib/fisheye.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    </style>
    
  </head>
  <body ng-app>
      
    <div class='container'>
  <div class='row'>
    <div class='span4' id='my-gui-container'>
      
    </div>
    <div class='span8'>
      <div id='chartdc4b591f5dea' class='rChart nvd3'>
       <svg></svg>
      </div>
    </div>
  </div>
</div>
  
<script type='text/javascript'>
 $(document).ready(function(){
  var opts = {
 "dom": "chartdc4b591f5dea",
"width":    700,
"height":    400,
"x": "Eye",
"y": "Freq",
"group": "Hair",
"type": "multiBarChart",
"id": "chartdc4b591f5dea" 
},
    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 
} 
]
 
  var myChart = drawChart(opts, data)
  var gui = new dat.GUI({ autoPlace: false }),
    controls_json = {
 "x": {
 "name": "x",
"value": "Eye",
"values": [ "Eye", "Hair" ],
"label": "Select  x :" 
},
"group": {
 "name": "group",
"value": "Hair",
"values": [ "Eye", "Hair" ],
"label": "Select  group :" 
},
"type": {
 "name": "type",
"value": "multiBarChart",
"values": [ "multiBarChart", "multiBarHorizontalChart" ],
"label": "Select  type :" 
} 
}

function drawChart(opts, data){  
  var data = d3.nest()
    .key(function(d){
      return opts.group === undefined ? 'main' : d[opts.group]
    })
    .entries(data)
  
  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')
    .datum(data)
    .transition().duration(500)
    .call(chart);

nv.utils.windowResize(chart.update);
   return chart
};
</script>
<script src='https://dat-gui.googlecode.com/git/build/dat.gui.min.js'></script>
    
    
  </body>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.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.3/jquery.min.js to a secure url

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

Modified http://nvd3.org/nv.d3.js to a secure url

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

Modified http://dat-gui.googlecode.com/git/build/dat.gui.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.3/jquery.min.js

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

https://nvd3.org/nv.d3.js

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

https://dat-gui.googlecode.com/git/build/dat.gui.min.js

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

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