title: Create Paired Bar Chart d3.js
body: <p>I need help adding a second series of data to my bar chart. Currently I'm populating the bars from the <em>glob</em> key in my dataset. This will be the first series. The second series I would like to be is <em>local</em>.
  How do I go about adding that?</p>
  
  <p><a href="http://jsfiddle.net/enigmarm/WXMwv/" rel="nofollow">Play with my JSFiddle here</a>.</p>
  
  <pre><code>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 &amp; 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([0, h]);
  
  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
  svg.selectAll("rect") 
  .data(dataset, cpc, glob) 
  .enter()
  .append("rect")
  .attr("x", function(d, i){
      return x0Scale(i);
  })
  .attr("y", function(d) {
      return h - yScale(d.glob);
  })
  .attr("width", x0Scale.rangeBand())
  .attr("height", function(d) {
      return yScale(d.glob); 
  })
  .attr("fill", colors[1])
  .on("mouseover", function(d) {
      //Get this bar's x/y values, then augment for the tooltip
      var xPosition = parseFloat(d3.select(this).attr("x")) + x0Scale.rangeBand() / 3;
      var yPosition = parseFloat(d3.select(this).attr("y")) + yScale;
  
      //Update Tooltip Position &amp; 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);
  }); 
  
  //Create labels
  svg.selectAll("text")
     .data(dataset, glob)
     .enter()
  .append("text")
  .text(function(d) {
      return commaFormat(d.glob);
  })
  .attr("text-anchor", "middle")
  .attr("x", function(d, i) {
      return x0Scale(i) + x0Scale.rangeBand() / 2;
  })
  .attr("y", function(d) {
      return h - yScale(d.glob) + 14;
  })
  .attr("font-family", "sans-serif") 
  .attr("font-size", "11px")
  .attr("fill", "white");
  </code></pre>