let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";

const padding = 50;
const height = 460;
const width = 940;

 var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

var arr = [];
var years = [];
    d3.json(url, function(data) {
        for (let i = 0; i < data.data.length; i++) {
            arr[i] = data.data[i];
            years[i] = parseInt(data.data[i][0].slice(0,4));
        }  

  const yScale = d3.scaleLinear()
                      .domain([0, d3.max(arr, (d) => d[1])])
                      .range([height - padding, padding]);

  const xScale = d3.scaleLinear()
                       .domain([d3.min(years, d => d), d3.max(years, (d) => d)])
                       .range([padding, width - padding]);

    let bandScale = d3.scaleBand().domain(years, d => d).range([padding, width - padding]);

    const xAxis = d3.axisBottom(bandScale)
    const yAxis = d3.axisLeft(yScale);

  svg.append("g")
       .attr("transform", "translate(0," + (height - padding) + ")")
       .call(xAxis);

  svg.append('g')
      .attr('transform', 'translate(' + padding + ', 0)')
      .call(yAxis)

    svg.selectAll('rect')
        .data(arr)
        .enter()
        .append('rect')
        .attr('fill', 'blue')
        .attr('height', d => height - padding - yScale(d[1]))
        .attr('width', d => bandScale.bandwidth())
        .attr('x', (d, i) => (bandScale(years[i])))
        .attr('y', d => yScale(d[1]))
        .append('title')
        .text((d, i) => years[i] + ': ' + d[1])
    });

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