title: d3.js Specify text for x-axis
body: <p>My x-axis currently has numbered ticks. I want the ticks to be replaced with data from my object (specifically the <em>keyword</em> value). How would I accomplish this?</p>
  
  <p><a href="http://jsfiddle.net/enigmarm/juY5E/6/" rel="noreferrer"><strong>I have a working Fiddle</strong></a></p>
  
  <pre><code>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 xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom");
  // xAxis
  svg.append("g") // Add the X Axis
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (h) + ")")
      .call(xAxis);
  //xAxis Label
  svg.append("text") 
      .attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) +")")
      .style("text-anchor", "middle")
      .text("Keyword");
  </code></pre>