title: How to animate a d3 js v4 bar chart from bottom(x axis) to up?
body: <p>Currently, this d3 js bar chart animates from top to bottom. Most likely its because of the way d3js renders its chart which starts from the top.  This might be a common issue and might be easy for those who are familiar with the nuisance of d3js, how can I make this animate from bottom to top? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  .bar {
    fill: steelblue;
  }
  
  .bar:hover {
    fill: brown;
  }
  
  .axis--x path {
    display: none;
  }
  
  &lt;/style&gt;
  &lt;svg width="1260" height="500"&gt;&lt;/svg&gt;
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var svg = d3.select("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;
  
  var x = d3.scaleBand().rangeRound([0, width]).padding(0.4),
      y = d3.scaleLinear().rangeRound([height, 0]); 
  
  var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  d3.csv("MRT_MonthlyAve_2014.csv", function(d) {
  
    d.MonthlyAverage = +d.MonthlyAverage;
    return d;
  }, function(error, data) {
    if (error) throw error;
  
    x.domain(data.map(function(d) { return d.Station; }));
    y.domain([0, d3.max(data, function(d) { return d.MonthlyAverage; })]);
  
    g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
    g.append("g")
      .attr("class", "axis axis--y")    
      .call(d3.axisLeft(y).ticks(12, "s"))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Frequency");
  
    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar") 
      .attr("x", function(d) { return x(d.Station); })
      .attr("y", function(d) { return y(d.MonthlyAverage); }) 
      .transition().duration(1000)
      .ease(d3.easeExp)
      .attr("width", x.bandwidth())   
      .attr("height", function(d) { return height - y(d.MonthlyAverage); });
  });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>MRT_MonthlyAve_2014.csv</p>
  
  <pre><code>Station,MonthlyAverage
  North Avenue,2227081
  Quezon Avenue,1018121
  GMA,606110
  Cubao,1410788
  Santolan,260737
  Ortigas,561910
  Shaw Boulevard,1339020
  Boni,631115
  Guadalupe,1002740
  Buendia,421302
  Ayala,1145004
  Magallanes,933713
  Taft Avenue,2427220
  </code></pre>