ramnathv/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="http://nvd3.org/src/nv.d3.css" rel="stylesheet" type="text/css">
  <style>
  body {
    overflow-y:scroll;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
  }
  #chart {
    height: 500px;
    width: 900px;
  }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://nvd3.org/lib/d3.v2.js"></script>
  <script src="http://nvd3.org/nv.d3.js"></script>
  <script src="http://nvd3.org/lib/fisheye.js"></script>
  <script src="http://syntagmatic.github.com/parallel-coordinates/d3.parcoords.js"></script>
</head>
<body>
  <div id='chart'></div>
</body>
  <script type='text/javascript'>
    var params = {"x":"cyl","y":"freq","group":"gear","geom":"multiBarChart","id":"chart"},
      data = [{"cyl":4,"gear":3,"freq":1},{"cyl":4,"gear":4,"freq":8},{"cyl":4,"gear":5,"freq":2},{"cyl":6,"gear":3,"freq":2},{"cyl":6,"gear":4,"freq":4},{"cyl":6,"gear":5,"freq":1},{"cyl":8,"gear":3,"freq":12},{"cyl":8,"gear":5,"freq":2}];

    drawChart(params, data)

    function drawChart(params, data){
      var data = d3.nest()
       .key(function(d){return params.group === undefined ? 'main' : d[params.group]})
       .entries(data)

      nv.addGraph(function() {
        var chart = nv.models[params.geom]()
         .x(function(d) { return d[params.x] })
         .y(function(d) { return d[params.y] })
         .showLegend(!(params.group === undefined))
         .showControls(true)
         .width(900)
         .height(400)

        d3.select("#" + params.id)
         .append('svg')
         .datum(data)
         .transition().duration(500)
         .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
      });
    };
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link href="http://nvd3.org/src/nv.d3.css" rel="stylesheet" type="text/css">
	<style>
	body {
	overflow-y:scroll;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 100px;
	}
	#chart {
	height: 500px;
	width: 900px;
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://nvd3.org/lib/d3.v2.js"></script>
	<script src="http://nvd3.org/nv.d3.js"></script>
	<script src="http://nvd3.org/lib/fisheye.js"></script>
	<script src="http://syntagmatic.github.com/parallel-coordinates/d3.parcoords.js"></script>
	</head>
	<body>
	<div id='chart'></div>
	</body>
	<script type='text/javascript'>
	var params = {"x":"cyl","y":"freq","group":"gear","geom":"multiBarChart","id":"chart"},
	data = [{"cyl":4,"gear":3,"freq":1},{"cyl":4,"gear":4,"freq":8},{"cyl":4,"gear":5,"freq":2},{"cyl":6,"gear":3,"freq":2},{"cyl":6,"gear":4,"freq":4},{"cyl":6,"gear":5,"freq":1},{"cyl":8,"gear":3,"freq":12},{"cyl":8,"gear":5,"freq":2}];

	drawChart(params, data)

	function drawChart(params, data){
	var data = d3.nest()
	.key(function(d){return params.group === undefined ? 'main' : d[params.group]})
	.entries(data)

	nv.addGraph(function() {
	var chart = nv.models[params.geom]()
	.x(function(d) { return d[params.x] })
	.y(function(d) { return d[params.y] })
	.showLegend(!(params.group === undefined))
	.showControls(true)
	.width(900)
	.height(400)

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