D3 Bar Chart Tooltip Automated Test Fail

JavaScript
1

Hello

I’m failing the 2 automated tests for the tooltip, link to my CodePen

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

Tooltip should be visible when mouse is on an area: expected true to be false AssertionError: Tooltip should be visible when mouse is on an area: expected true to be false

My tooltip is visible for each bar :frowning:

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

Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘1947-01-01’ to equal ‘1982-10-01’ AssertionError: Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘1947-01-01’ to equal ‘1982-10-01’

It aligns with the data-date visually :frowning:

Also there is a “visual glitch” at around 2009, the only place where the GDP value went down and not up, hover your mouse and see how the rect has been drawn.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36 OPR/88.0.4412.53

Challenge: D3 Bar Chart

Link to the challenge:

2

The tool tip is easy. You’re using a title instead of a separate div with an id of tooltip. There are many older posts about this in the forums. Both tooltip errors are caused by this.

The visual glitch is not a glitch; you’re drawing all the bars with a width of xScale(new Date(d[0])) and they really should have a constant width. I believe you only see the wide bar where the following bars are shorter as the following bars all overlap the previous ones. This doesn’t appear to be causing any test failures though.

1 Like
3

Thanks so much, I’ll try looking into the forums better before posting next time :smiling_face_with_tear:

It’d be great if a note could be added in the challenge as we’ve only been taught to create a tooltip using a title element which fails the tests.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.