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")
}
});