Bar Chart - last test

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;

  json => {
    const minDate = d3.min(, d => d[0]);
    const maxDate = d3.max(, d => d[0]);
    const max = d3.max(, d => d[1]);


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

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

    const tooltip = d3
      .attr("id", "tooltip")
      .style("width", padding);

    const svg = d3
      .attr("width", w)
      .attr("height", h);

      .attr("x", (d, i) => xScale(new Date(d[0])))
      .attr("y", d => yScale(d[1]))
      .attr("width", w / - 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", () =>"visibility", "hidden"));

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

      .attr("transform", `translate(0, ${h - padding})`)
      .attr("id", "x-axis")

      .attr("transform", `translate(${padding}, 0)`)
      .attr("id", "y-axis")


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: