Visualize data with a bar chart

My tooltip keeps showing undefined, I’ve tried everything I can but to no avail

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">

    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <title>Bar Chart</title>

    
</head>
<body>
    <h1 id="title">US GDP Bar Chart</h1>
    <svg id="chart"></svg>
    <div id="tooltip"></div>

    
    
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <script src="./d3.js" type="module"></script>
</body>
</html>

JAVASCRIPT
d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json").then(data => {
    const dataset = data.data;
    
    console.log(dataset)

    // Declare the chart dimensions and margins.
    const width = 800;
    const height = 600;
    const padding = 60;
  
    // Declare the x (horizontal position) scale.
    const xScale = d3.scaleTime()
    .domain([new Date("1947-01-01"), new Date("2015-07-01")])
        .range([padding, width - padding]);
  
    // Declare the y (vertical position) scale.
    const yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, d => d[1])])
        .range([height - padding, padding]);
  
    // Create the SVG container.
    const svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height);
  
    // Add the x-axis.
    const xAxis = d3.axisBottom(xScale);
    svg.append("g")
        .attr("id", "x-axis")
        .attr("transform", "translate(0, "+ (height - padding) +")")
        .call(xAxis);

    // Add the y-axis.
    const yAxis = d3.axisLeft(yScale);
    svg.append("g")
    .attr("id", "y-axis")
    .attr("transform", 'translate(' + padding + ', 0)')
        .call(yAxis);
          
  
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("class", "bar")
       .attr("data-date", d => d[0])
       .attr("data-gdp", d => d[1])
       .attr("x", d => xScale(new Date(d[0])))
       .attr("y", d => yScale(d[1]))
       .attr("width", (width - (2 * padding)) / dataset.length)
       .attr("height", d => yScale(0) - yScale(d[1]))
       .on("mouseover", showTooltip)
       .on("mouseout", hideTooltip);

       let tooltip = d3.select("#tooltip");
       
       function showTooltip (d, event) {
        tooltip.style("display", "block")
              .style("left", (event.pageX + 10 + "px"))
              .style("top", (event.pageY - 30 + "px"))
              .attr("data-date", d[0])
              .html(`<p>Date: ${xScale(d[0])}</p> <p>Billions: ${yScale(d[1])} billion USD </p>`)
              console.log(d[1])
       };

       function hideTooltip () {
        tooltip.style("display", "none")
       }
});

Can you link to the project please? (the instructions)

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

That was what I did but it didn’t add my code and link