Bar Chart - last test

[IkerSS]

I’m having trouble with the second tooltip test. On line 54

.attr(“data-date”, d => d[0])

the debugger shows

undefined is not an object (evaluating ‘d[0]’)

If I remove that line, the tooltip works just fine. I’m kinda lost here, I added the properties to the “rect” just like above with no issues.

Your code so far

const w = 1000;
const h = 550;
const padding = 50;
const barPadding = 0.5;

d3.json(
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
  json => {
    const minDate = d3.min(json.data, d => d[0]);
    const maxDate = d3.max(json.data, d => d[0]);
    const max = d3.max(json.data, d => d[1]);

    console.log(minDate);
    console.log(maxDate);

    const xScale = d3
      .scaleTime()
      .domain([new Date(minDate), new Date(maxDate)])
      .range([padding, w - padding]);

    const yScale = d3
      .scaleLinear()
      .domain([0, max])
      .range([h - padding, padding]);

    const tooltip = d3
      .select("#container")
      .append("div")
      .attr("id", "tooltip")
      .style("width", padding);

    const svg = d3
      .select("#container")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

    svg
      .selectAll("rect")
      .data(json.data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => xScale(new Date(d[0])))
      .attr("y", d => yScale(d[1]))
      .attr("width", w / json.data.length - barPadding)
      .attr("height", d => h - yScale(d[1]) - padding)
      .attr("class", "bar")
      .attr("data-date", d => d[0])
      .attr("data-gdp", d => d[1])
      .on("mouseover", (d, i) => tooltip
        .style("visibility", "visible")
        .style("top", `${yScale(d[1])}px`)
        .style("left", `${xScale(new Date(d[0])) - padding}px`)
        .attr("data-date", d => d[0])
        .html(`${d[0]} <br/> $${d[1]} Billion`))
      .on("mouseout", () => tooltip.style("visibility", "hidden"));

    const xAxis = d3.axisBottom(xScale);
    const yAxis = d3.axisLeft(yScale);

    svg
      .append("g")
      .attr("transform", `translate(0, ${h - padding})`)
      .attr("id", "x-axis")
      .call(xAxis);

    svg
      .append("g")
      .attr("transform", `translate(${padding}, 0)`)
      .attr("id", "y-axis")
      .call(yAxis);
  }
);

Codepen:
https://codepen.io/IkerSS/pen/MZQMyM?editors=0010

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15.

Link to the challenge:

freeCodeCamp.org