¿Cómo puedo hacer un gráfico de barras comenzando desde el punto 0 del eje y y no desde la parte inferior del svg?

Estoy tratando de crear un gráfico de barras pero no puedo encontrar una forma de que la barra comience desde el punto 0 del eje y y no desde la parte inferior del svg. ¿Cómo puedo arreglar eso?

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 < data.data.length; i++) arr[i] = data.data[i]; 

    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(arr, (d) => 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 => d[1] + padding)
        .attr('width', 2.909090909090909)
        .attr('x', (d, i) => padding + (3.2 * i))
        .attr('y', d => yScale(d[1]))
        .append('title')
        .text(d => d[1])

    });

<script src="https://d3js.org/d3.v4.min.js"></script>