Hy I am stuck please help

[sabirbakker]

  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("fill", "red")
    .attr("x", function(d,i){ return unixScale(d[2]) })
    .attr("y", function(d,i){ return yScale(d[1]) })
    .attr("width", barWidth)
    .attr("height", function(d){ return d[1]/25 + "px" })
    .attr("data-date", (d) => d[0])
    .attr("data-gdp", (d) => d[1])
    .on("mouseover", function(d){
      tooltip.transition()
                .duration(200)
                .style("opacity", 0.9);
      tooltip.html("Date:" + d[0] + "<br>$" + d[1] + " Billion")
                .style("left", d3.event.pageX + 20 + "px")
                .style("top", d3.event.pageY + 20 + "px");
      tooltip.attr("data-date", d[0])
  })
  
  .on("mouseout", function(d){
    tooltip.transition()
        .duration(400)
        .style("opacity", 0);
  });
  
  const xAxis = d3.axisBottom(xScale);
  
  svg.append("g")
    .attr("transform", "translate(0, " + ( h - padding ) +")")
    .attr("id", "x-axis")
    .call(xAxis);
  
  const yAxis = d3.axisLeft(yScale);
  
  svg.append("g")
    .attr("transform", `translate( ${padding}, 0)`)
    .attr("id", "y-axis")
    .call(yAxis);
}

TooltipTests

• 1. I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area

2. My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.

[jwilkins.oboe]

I’ve edited your post 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 (’).