D3 Scatterplot failing tests 5,6,7,8 in the test bundle (fixed)

D3 Scatterplot failing tests 5,6,7,8 in the test bundle (fixed)
0

Hi All,
I’m currently working on the Visualize Data with a Scatterplot Graph project. My code is located at
https://codepen.io/Elijah743/pen/ZEzxejz?editors=0010.

Tests 5,6,7,8 are not passing and I’m not sure why.

Here’s the output from the test:

5. Each dot should have the properties "data-xvalue" and "data-yvalue" containing their corresponding x and y values.
Could not find property "data-xvalue" in dot : expected null to not equal null
AssertionError: Could not find property "data-xvalue" in dot : expected null to not equal null
   at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1881)
   at Proxy.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
   at Function.n.isNotNull (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1549)
   at a.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:206361)
   at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35224)
   at i.p.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35154)
   at T.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41723)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:42605
   at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41019)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41088
6. The data-xvalue and data-yvalue of each dot should be within the range of the actual data and in the correct data format. For data-xvalue, integers (full years) or Date objects are acceptable for test evaluation. For data-yvalue (minutes), use Date objects.
The data-xvalue of a dot is below the range of the actual data : expected 1970 to be at least 1990
AssertionError: The data-xvalue of a dot is below the range of the actual data : expected 1970 to be at least 1990
   at Proxy.p (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:3825)
   at Proxy.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
   at Function.n.isAtLeast (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1030)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:207066
   at Array.forEach (<anonymous>)
   at a.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:206991)
   at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35224)
   at i.p.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35154)
   at T.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41723)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:42605
7. The data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis.
x values don't line up with x locations : expected false to be true
AssertionError: x values don't line up with x locations : expected false to be true
   at o.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:14955)
   at o.e (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:425:182)
   at Object.e [as get] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:92:1380)
   at Function.n.isTrue (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1222)
   at a.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:207828)
   at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35224)
   at i.p.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35154)
   at T.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41723)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:42605
   at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41019)
8. The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.
y values don't line up with y locations : expected false to be true
AssertionError: y values don't line up with y locations : expected false to be true
   at o.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:14955)
   at o.e (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:425:182)
   at Object.e [as get] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:92:1380)
   at Function.n.isTrue (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1222)
   at a.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:208167)
   at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35224)
   at i.p.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35154)
   at T.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41723)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:42605
   at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41019)

Was applying dot class to the legend which caused the errors as the circles contained no data.
Applied inline styles instead.