index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="//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="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//nvd3.org/lib/d3.v2.js"></script>
<script src="//nvd3.org/nv.d3.js"></script>
<script src="//nvd3.org/lib/fisheye.js"></script>
<script src="//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>