Paired Bar Chart with Legend

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

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 = [{
  "global": 1468604556084,
  "local": 100,
}, {
  "local": 11500,
  "global": 1313048950629
}, {
  "local": 11500,
  "global": 1213048950629
}, {
  "local": 11500,
  "global": 1113048950629
}, {
  "local": 11500,
  "global": 1123048950629
}, {
  "local": 11500,
  "global": 1013048950629
}];

var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, w], 0.01);
// 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;
  })])
  .range([h, 0]);
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(5);


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", "global")
  .attr("width", 20)
  .attr("y", function(d) {
    return yScale(d.local);
  })
  .attr("height", function(d) {
    return h - yScale(d.local);
  })
  .attr("fill", colors[1][1])
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "red");

// yAxis
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0 ,0)")
  .call(yAxis);
  
  var yTextPadding = 20;

svg.selectAll(".bartext")
.data(dataset)
.enter()
.append("text")
.attr("class", "bartext")
.attr("text-anchor",...