D3 Bar Chart project

Hi! I’m working on the first d3 project and I’m unable to pass these tests:

  • The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
  • I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area.
  • My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.

I tried in many ways to pass the tests but without any different result. Here is the link to my pen: https://codepen.io/redouane_lshf/pen/ZExrYVO. Maybe there is an error that I couldn’t find.

I would open the dev tools and look in the console. I think you’ll see an issue right away when you hover over the graph.

1 Like

Hi! I’ve checked your pen and found the following:

The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.

When working with date, use scaleTime instead of scaleLinear and new Date(d[0]) to get the values for the domain. Change the x coordinate for the rectangles to align with the values you put in the xScale.

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

You’re missing “r” in transition for mouseover.

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

All mouse event handler in d3 v6 has an event passed as the first argument and data as the second. Your data-date value should not be a string but data from the dataset.

Hope this helps.

1 Like

Thanks! Your answer was really helpful.

1 Like

I’m glad I could help.

1 Like