No puedo entender por qué mis elementos están sangrando en el relleno inferior. Me está impidiendo tener elementos. Seguro que es algo sencillo, siempre lo es. Simplemente no puedo entender qué está mal. He intentado cambiar la altura y las escalas, pero solo cambia cosas que no quiero cambiar. Sigo mirando tutoriales sobre escalas y no he encontrado nada que parezca fuera de lugar. Si consigo tengo el proyecto en codepen, aquí está el enlace: https://codepen.io/critchey/pen/YzEXPrP

Aquí hay una captura de pantalla para saber de lo que estoy hablando:

Aquí está el javascript:

 //Mapping dataset to its x and y axes const xData = dataset.map(d => { let date = new Date(d[0]); return date; }); const xDates = xData.map(d => { let dateFormatted = d.toLocaleString("default", {month: "short"}) + ' ' + d.getDate() + ', ' + d.getFullYear() return dateFormatted; }); const yData = dataset.map(d => d[1]); //Variable for use inside D3 const h = 400; const w = 800; const pad = 40; //Scales for the SVG element const xDateScale = d3.scaleTime() .domain([0, w]) .range([pad, w - pad]); const xScale = d3.scaleLinear() .domain([0, yData.length]) .range([pad, w - pad]); const yScale = d3.scaleLinear() .domain([0, d3.max(yData, (d) => d)]) .range([h - pad, pad]); //Declaring the SVG element const svg = d3.select('#svg-container') .append('svg') .attr('width', w) .attr('height', h) //Declaring each bar svg.selectAll('rect') .data(yData) .enter() .append('rect') .attr('x', (d, i) => xScale(i)) .attr('y', (d, i) => yScale(d)) .attr("width", w / (yData.length - pad * 2)) .attr("height", (d, i) => d) .attr("class", "bar") .append('title') .text((d, i) => 'GDP: ' + d + ' | Date: ' + xDates[i]) //Axes Declarations const xAxis = d3.axisBottom(xDateScale); const yAxis = d3.axisLeft(yScale); svg.append("g") .attr("transform", "translate(0," + (h - pad / 2) + ")") .call(xAxis); svg.append("g") .attr("transform", "translate(" + pad + ",0)") .call(yAxis)