Paired Bar Chart 2

Need second series of data to be grouped in

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="searchVolume">
    <div id="tooltip" class="hidden">
        <p><strong>CPC</strong>
        </p>
        <p class="indent">$<span id="cpcVal">5</span>
        </p>
    </div>
</div>

CSS

#tooltip {
	position: absolute;
	width: 50px;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}
#tooltip.hidden {
	display: none;
}
#tooltip p {
	margin: 0;
	font-family: sans-serif;
	font-size: 12px;
	line-height: 16px;
}
.indent{
	padding-left: 5px;
}

rect {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
rect:hover{
	fill: orange;
}

JavaScript

var w = 300;
var h = 200;

var colors = ["#377EB8", "#4DAF4A"];

var dataset = [
				{"keyword": "payday loans", "glob": 1500000, "local": 673000, "cpc": "14.11"},
				{"keyword": "title loans", "glob": 165000, "local": 165000, "cpc": "12.53" },
				{"keyword": "personal loans", "glob": 550000, "local": 301000, "cpc": "6.14"}
			];

var data = [[1500000, 165000, 550000],
			[673000, 165000, 301000]];
		
var tdata = d3.transpose(dataset.glob, dataset.local);

var series = 2; // Global & Local

var x0Scale = d3.scale.ordinal()
				.domain(d3.range(dataset.length))
				.rangeRoundBands([0, w], 0.05); 
var x1Scale = d3.scale.ordinal()
				.domain(d3.range(dataset.length))
				.rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) {return d.glob;})]) 
				.range([h,0]);

var glob = function(d) {
	return d.glob;
};
var cpc = function(d) {
	return d.cpc;
};

var commaFormat = d3.format(',');

//SVG element
var svg = d3.select("#searchVolume")
			.append("svg")
			.attr("width", w)
			.attr("height", h);		

	// Graph Bars
var sets = svg.selectAll(".set") 
	.data(dataset) 
	.enter().append("g")
            .attr("class","set")
     .attr("transform",function(d,i){
         return "translate(" + x0Scale(i) + ",0)"
     })
	.on("mouseover", function(d,i) {
		//Get this bar's x/y values, then augment for the tooltip
		var xPosition = parseFloat(x0Scale(i) + x0Scale.rangeBand() / 6);
		var yPosition = 0;
		//Update Tooltip Position & value
		d3.select("#tooltip")
			.style("left", xPosition + "px")
			.style("top", yPosition + "px")
			.select("#cpcVal")
			.text(d.cpc);
		d3.select("#tooltip").classed("hidden", false);
	})
	.on("mouseout", function() {
		//Remove the tooltip
		d3.select("#tooltip").classed("hidden", true);
	});	

sets.append("rect")
    .attr("class","local")
	.attr("width", x0Scale.rangeBand()/2)
	.attr("y", function(d) {
		return yScale(d.local);
	})
    .attr("x", x0Scale.rangeBand()/2)
   ...