Bubble chart align center d3 js - d3.js

Question

I have created a bubble chart with zoom feature on JSfiddle
var r = 500,
h = 500,
format = d3.format(",d"),
fill = d3.scale.category20c();
var bubble = d3.layout.pack().sort(null).size([r,h]);
var vis = d3.select("#chart").append("svg")
.attr("class", "bubble")
.call(d3.behavior.zoom().on("zoom", redraw))
.append("g").attr("class", "group2")
d3.json("cantGetRidOfThis", function() {
var node = vis.selectAll("g.node")
.data(bubble.nodes(flat).filter(function(d) {return !d.children;}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")";});
node.append("title").text(function(d) {return d.className + ": " + format(d.value);});
node.append("circle")
.attr("r", function(d) {return d.r;})
.attr("class", "nodecircle")
.style("fill", '#ff4719')
.attr("data-classname", function(d) {return d.className;});
node.append("text")
.attr("text-anchor", "middle")
.attr("class", "nodetext")
.attr("data-classname", function(d) {return d.className;})
.attr("style", function(d) {return "font-size:" + d.r/5;})
.attr("data-classname", function(d) {return d.className;})
.each(function(d, i) {
var nm = d.className;
var arr = nm.replace(/[\(\)\\/,-]/g, " ").replace(/\s+/g, " ").split(" "),arrlength = (arr.length > 7) ? 8 : arr.length;
d3.select(this).attr('y',"-" + (arrlength/2) + "em");
//if text is over 7 words then ellipse the 8th
for(var n = 0; n < arrlength; n++) {
var tsp = d3.select(this).append('tspan').attr("x", "0").attr("dy", "1em").attr("data-classname", nm);
if(n === 7) {
tsp.text("...");
} else {
tsp.text(arr[n]);
}
}
});
});
function clickOnCircleFunc(el){
var selection = el.target.__data__.className;
//bubble select
$('.nodecircle').each(function (id, v) {
var $this = $(this),d_nm = $this.attr('data-classname');
if (d_nm === selection && $this.attr('data-selected') !== 'y') {
$this.attr('data-selected','y').css('fill', '#3182bd');
}
else {
$this.attr('data-selected','n').css('fill', '#ff4719');
}
});
}
function redraw() {
vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
Above code is working fine with all what needed but one thing which am not able to figure out is to populate the chart in centre of the div id="chart".Currently chart is displayed on left .
How can the chart be populate in centre of the div