Paired Bar Chart with Legend

2 data series grouped by keyword - Need to add a Legend & make it dynamic.

by Justin Maat

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="searchVolume"></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;
}
.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

JavaScript

var margin = {top: 25, right: 40, bottom: 35, left: 85},
				w = 500 - margin.left - margin.right,
				h = 350 - margin.top - margin.bottom;
var padding = 10;

var colors =	{0:	["Local", "#377EB8"],
				 1:	["Global", "#4DAF4A"]};

var dataset = [
				{"keyword": "payday loans", "global": 1400000, "local": 673000, "cpc": "14.11"},
				{"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
				{"keyword": "personal loans", "global": 550000, "local": 301000, "cpc": "6.14"},
				{"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
				{"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
			];

var xScale = d3.scale.ordinal()
				.domain(d3.range(dataset.length))
				.rangeRoundBands([0, w], 0.05); 
// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) { return (d.local > d.global) ? d.local : d.global;})]) 
				.range([h, 0]);
var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");
var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left")
				.ticks(5);
		
var global = function(d) {
	return d.global;
};
var cpc = function(d) {
	return d.cpc;
};

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

//SVG element
var svg = d3.select("#searchVolume")
			.append("svg")
			.attr("width", w + margin.left + margin.right)
			.attr("height", h + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
// Graph Bars
var sets = svg.selectAll(".set") 
	.data(dataset) 
	.enter()
	.append("g")
    .attr("class","set")
    .attr("transform",function(d,i){
         return "translate(" + xScale(i) + ",0)";
     })
	;

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