title: How to flip bars in d3
body: <p>I'm having trouble flipping my bars. It seems like they're 'growing" but under the x axis. I know that in SVG, the (0,0) coordinates are at the top left and I managed to bring them to the bottom of my SVG but how do I change the direction of my bars from under the x-axis to over the axis?</p>
  
  <pre><code>
  var formatYear = d3.timeFormat("%Y");
  
  var svg = d3.select("svg"); // calling svg 
  const width = +svg.attr('width'); // width of svg container
  const height = +svg.attr('height'); // height of svg container
  
  var padding = 30
  // create d3 data join
  
  // load csv file 
  d3.csv("q3.csv").then(data =&gt; {
  data.forEach(d =&gt; {
    d.year = d.year; // need to format year
    d.running_total = +d.running_total // format to number
  });
  render(data);
  });
  
  
  const render = data =&gt; {
  const yValue = d =&gt; d.running_total;
  const xValue = d =&gt; d.year;
  const margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20
  };
  
  const xScale = d3.scaleBand()
    .domain([0, data.map(xValue)])
    .range([0, width])
  // Line 38
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, yValue)])
    .range([0, height])
  console.log(yScale.domain())
  
  
  //      const g = svg.append('g')
  //          .attr('transform','translate(${margin.left},${margin.top})'
  // );
  
  svg.selectAll('rect').data(data)
    .enter().append('rect') // Line 47
    .attr('x', d =&gt; yValue(d))
    .attr('y', height) // Line 48
    .attr('height', d =&gt; yValue(d)) // Line 49
    .attr('width', 5);
  
  
  };
  
  </code></pre>
  
  <p>How it looks after Andrew's suggestion:
  <a href="https://i.stack.imgur.com/F8orR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F8orR.png" alt="enter image description here"></a></p>