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>