Edit in JSFiddle

var data = datasets.OscarNominees;
var vql = {
  query: 'SELECT imdbRating, COUNT(imdbID) AS FilmsCount FROM ? GROUP BY imdbRating',
  viz: {
    type: 'bar',
    x: 'imdbRating',
    y: 'FilmsCount',
    plugins: [
      // tauCharts.api.plugins.get('tooltip')()
    ]
  }
};

var chart = new tauCharts.Chart(Object.assign({data: alasql(vql.query, [data])}, vql.viz));
chart.renderTo('#target');
chart.on('elementclick', function(chartSender, e) {
  var row = e.data;
  var g = ['imdbRating'].reduce(function(memo, k) {
    return memo.concat(k + '=' + row[k]);
  }, []);

  var revQuery = 'SELECT * FROM ? WHERE ' + g.join(' AND ');
  var revealed = alasql(revQuery, [data]);
  var res = revealed.map(function (row) {
  	return row.Year + '\t' + col(row.Title, 50) + '\t' + row.Director;
  });
  document.getElementById('result').innerHTML = '<pre>' + res.join('\r\n') + '</pre>';
});
















function col(text, len) {
	var chars = [];
	for (var l = 0; l < len; l++) {
  	chars.push(text.charAt(l) || '_');
  }
  return chars.join('');
}
<script src="//cdn.jsdelivr.net/d3js/3.5.17/d3.min.js"></script>
<script src="//cdn.jsdelivr.net/alasql/0.2/alasql.min.js"></script>
<script src="//cdn.rawgit.com/TargetProcess/tauCharts/release/build/production/tauCharts.min.js"></script>
<script src="//rawgit.com/vladminsky/rsconf2016/master/examples/dev-experimental-views-source.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/TargetProcess/tauCharts/release/build/production/tauCharts.min.css">

<div id="target" style="width:100%;height:300px;float:left;"></div>
<div id="result" style="width:100%;height:300px;float:left;overflow-y:scroll">
<div style="width:100%;text-align:center">
<i>
--- Click on a bar above to reveal original data ---
</i>
</div>
</div>
html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

#target .i-role-element {
    cursor: pointer;
}