title: How to change the X-axis line from top to bottom in d3.js
body: <p>I'm new to d3.js and I couldn't understand yet why my X-axis-line is placed on top and not at the bottom (please the image bellow).</p>
  
  <p><a href="https://i.stack.imgur.com/enwgO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enwgO.png" alt="enter image description here"></a></p>
  
  <p>Here is the code I'm using (simplified to reduce the amount of code):</p>
  
  <pre><code>var data = [];
  var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  for(var i = 0; i&lt;7; i++){
    data.push({"letter":i,"frequency":Math.random(), "day":days[i]})
  }
  
  
  
  var svg = d3.select("#graph1"),
      margin = {top: 80, right: 20, bottom: 100, left: 100},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;
  
  
  var x = d3.scaleLinear().rangeRound([0, width]),
      y = d3.scaleBand().rangeRound([0, height]);
  
  var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
    x.domain([0,1]);
    y.domain(data.map(function(d) { return d.day; }));
  
    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(5, "%"));
  
    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("transform", "rotate(-90)")
        //.attr("y", 6)
        //.attr("dy", "0.71em")
        //.attr("text-anchor", "end");
  
  
  
          //setup the tool
  
    g.append("g")         
    .attr("class", "grid")
    /*.attr("transform", "translate("+margin.left+"," + margin.top + ")")*/
    .call(d3.axisBottom(x)
          .ticks(5)
          .tickSize(height)
          .tickFormat("")
         );
  
  
  
  var thickness = 14;
  g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", 0)
      .attr("y", function(d) { return y(d.day) + thickness/2 ;})
      .attr("width", function(d) { return x(d.frequency);})
      .attr("height", thickness);
  </code></pre>