D3: Scatterplot Graph: "y-values don't line up with y-locations" when Date object is not in isoFormat

[qwloh]

Issue Description

The project's User Story #6 only requires that the data-yvalue attribute of a data point be set to a Date object. It does not explicitly state that the object has to be in ISO format. Hence,

Expected behavior

Test #8: The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis

The above test should return true regardless whether a student set the data-yvalue attribute to take Date objects in ISO format or the JavaScript default format.

Actual behavior

Test only pass when Date object in data-yvalue attribute is explicitly formatted to ISO Dates. See screenshots.

How to Reproduce
Toggle line 66 and 67 of Javascript in the following pen

.attr('data-yvalue', d=>d3.isoFormat(d3.timeParse("%M:%S")(d.Time)))
//  .attr('data-yvalue', d=>d3.timeParse("%M:%S")(d.Time))

Link to Pen

https://codepen.io/qwenloh/pen/dyYGzjW

Browser Information

• Browser Name, Version: Google Chrome, 80.0.3987.163 (Official Build)(64-bit)
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop

Screenshot

Test pass when Date object in the data-yvalue attribute is in ISO format

Test fail when the exact same code is tested, but without explicitly formatting the Date object

[moT01]

For more visibility, please open issues on the main repo for these. Thanks and happy coding 🎉