title: order displayed before my labels in D3
body: <p>I am new to programming and new to D3, I am learning it using the book "Getting started with D3" and all the examples I can find around the internet.</p>
  
  <p>To start practicing I am trying to create a column chart but am encountering two problems with my x-label:  </p>
  
  <ul>
  <li>The labels displayed below my x-axis are not in line with the columns. To be precise, I have numbers displayed before the labels start being displayed.  </li>
  <li>I am wondering how to rotate the labels. When I try the rotate attribute all of the x-axis is being rotated and I would only like to rotate the labels. I have found some questions related to this but haven't completely understood the answers.</li>
  </ul>
  
  <p>My data are formatted this way:</p>
  
  <pre><code>{"Low_Income_Household_Internet_access":
   [{"Country":"Chile","Value":9.69},
   {"Country":"New Zealand","Value":47.8},
   {"Country":"Greece","Value":25.39},
   {"Country":"Italy","Value":33.26},
   {"Country":"Israel","Value":40.31},
   {"Country":"Portugal","Value":22.72},
   {"Country":"United Kingdom","Value":56},...
   ],
   "High_Income_Household_Internet_access":
   [{"Country":"Chile","Value":59.78701735},
   {"Country":"New Zealand","Value":78.3},
   {"Country":"Greece","Value":81.14},
   {"Country":"Italy","Value":84.44},
   {"Country":"Israel","Value":86.59},
   {"Country":"Portugal","Value":89.73},
   {"Country":"United Kingdom","Value":90},...
  ]}
  </code></pre>
  
  <p>and my code is the following:</p>
  
  <pre><code>function draw(data) {
  "use strict";
  var w = 600;
  var h = 300;
  var barPadding = 3;
      var margin=20;
  
  var format = d3.format(",.0f");
  var  x = d3.scale.ordinal().rangeBands([0, w-margin], .1),
  y = d3.scale.linear().range([h-margin, margin]);
  var  xAxis = d3.svg.axis().scale(x).orient("top").tickSize(0),
   yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-w);
  var svg = d3.select("body").append("svg")
  .attr("width", w)
      .attr("height", h)
  .append("g")
      .attr("transform", "translate(" + margin + ",0)");
  
  // Set the scale domain.
  x.domain(d3.range(data.Low_Income_Household_Internet_access.length));
  y.domain([0, d3.max(data.Low_Income_Household_Internet_access,function(d) { return d.Value; }) ]);
  var bar = svg.selectAll("g.bar")
      .data(data.Low_Income_Household_Internet_access)
      .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + x(d.Country)+ "," + y(d.Value) + " ) "; });
  bar.append("rect")
  .attr("width", x.rangeBand())
  .attr("height", function(d) { return h-margin- y(d.Value); })
  .on("mouseover",function(d) {
      d3.select(this)
      .style("fill","red")
  })
  .on("mouseout",function(d) {
          d3.select(this)
          .style("fill","grey")
  })
    .append("svg:title")
    .text(function(d) { return "" + d.Country + ": " + d.Value + " %"; });
  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, 295)")
  .call(xAxis);
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);}
  </code></pre>