Just to understand nested selections.
Replace table with svg and then create a chart inside via some reusable components
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; }
</style>
</head>
<body>
<script>
var body = d3.select("body");
var t1 = [[2,45,6,5],[2314,234,234,243],[234,2343242,24323,62],[2321,31,4]];
var t2 = [[112,5,324,5],[2234,314,234,234,243],[234,2343242,24323,62],[2321,31,4],[325,5235]];
var t3 = [[12,4335,6,5],[231342,4,22234,234,243],[234,23423,62],[2321,31,234,44]];
var data = [t1,t2,t3 ]
body.selectAll("table")
.data(data)
.enter()
.append("table")
.selectAll("tr")
.data(function(d) { return d; })
.enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; })
.enter()
.append("td")
.html(function(d){return d;})
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js