title: How can I make a bar chart starting from the 0 point of the y axis and not from the bottom of the svg?
body: <p>I'm trying to make a bar chart but I can't figure out a way to make the bar start from the 0 point of y axis and not from the very bottom of the svg. How can I fix that?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";
  
  const padding = 50;
  const height = 460;
  const width = 900;
  
   var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height);
  
  var arr = [];
      d3.json(url, function(data) {
          for (let i = 0; i &lt; data.data.length; i++) arr[i] = data.data[i]; 
  
      const yScale = d3.scaleLinear()
                       .domain([0, d3.max(arr, (d) =&gt; d[1])])
                       .range([height - padding, padding]);
  
      const yAxis = d3.axisLeft(yScale);
  
     svg.append('g')
        .attr('transform', 'translate(' + padding + ', 0)')
        .call(yAxis)
  
      svg.selectAll('rect')
          .data(arr)
          .enter()
          .append('rect')
          .attr('fill', 'blue')
          .attr('height', d =&gt; d[1] + padding)
          .attr('width', 2.909090909090909)
          .attr('x', (d, i) =&gt; padding + (3.2 * i))
          .attr('y', d =&gt; yScale(d[1]))
          .append('title')
          .text(d =&gt; d[1])
  
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>