Empecé el reto D3.js en FreeCodeCamp, el problema es que lo resolví con el gráfico pero solo me da un display en el recto, solo uno con el ancho y alto que le puse, a continuación muestro el código .

Todo el código en

 <script> //set d3 var w = 1000, h = 500; var padding = 50; var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h) //title svg.append('text') .attr('x', w / 2) .attr('y', 50) .text('United States GDP') fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then((result)=>result.json()) .then((data)=>{ var the_data = data['data'] //get vals var get_max = d3.max(data['data']) var get_mix = d3.min(data['data']) //for x var max_x = Number(get_max[0].split('-')[0]) var min_x = Number(get_mix[0].split('-')[0]) //for y var max_y = get_max[1] var min_y = get_mix[1] var xScale = d3.scaleLinear() .domain([min_x, max_x]) .range([padding, w-padding]) var yScale = d3.scaleLinear() .domain([min_y, max_y]) .range([h-padding, padding]) //the_chars for(var i in the_data){ var get_year = Number(the_data[i][0].split('-')[0]) the_data[i][0] = get_year } svg.selectAll('rect') .data(the_data) .enter() .append('rect') .attr("x", (d) => { xScale(d[0]) }) .attr('y', (d)=>{ yScale(d[1]) }) .attr("width", 200) .attr("height", 20) //axis const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); //display axis svg.append("g") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); svg.append('g') .attr('transform', 'translate(' + padding + ', 0)') .call(yAxis) })

Ahora, ¡qué debo hacer para mostrar los gráficos!

Menciono que las etiquetas del script están incrustadas en el cuerpo.