Visualize Data - Scatterplot Graph

Tell us what’s happening:
I keep failing test content#8. I don’t understand why it fails because my dots align with the y-axis and the data-yvalue seem to be exactly the same as the initial values from the dataset, except that I don’t apply the yScale on the data-yvalue. I guess the Date formatting is the problem somehow. Can anyone give me a hand with this?

My pen:

Your code so far
My ugly Dates :

svg.selectAll(“circle”)
.data(dataset)
.enter()
.append(“circle”)
.attr(“cx”, (d) => xScale(new Date(d.Year,0,0,0,0,0,0)))
.attr(“cy”,(d) => yScale(new Date(0,0,0,0,d.Time.substring(0,2),d.Time.substring(3,5),0)))
.attr(“data-xvalue”, (d) => (d.Year))
.attr(“data-yvalue”, (d) => new Date(0,0,0,0,d.Time.substring(0,2),d.Time.substring(3,5),0))
.attr(“r”, (d) => 5)
.attr(“class”,“dot”)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph

Try logging your current values and watch in chrome with control-shift-J.

Logging all the dots data-yvalue:
d3.selectAll(".dot").each(function(d,i) {
console.log("data-yvalue of dot " + i + " is " + d3.select(this).attr(“data-yvalue”))
})

I saw my Dates were wrong! In the year 1890 something. Javascript (UTC) starts at 1-1-1970.
I adjusted my Dates:
.attr(“data-yvalue”, (d) => new Date(Date.UTC(1970, 0, 1, 0, d.Time.substring(0,2), d.Time.substring(3,5),0)).toUTCString())

Logging looks like this now:

You don’t need to use Date.UTC. You can also fill out 1970, month 0, day 1, to get 1-1-1970:
new Date(1970,0,1,0,d.Time.substring(0,2),d.Time.substring(3,5),0))

I’ve looked at this project to try and understand where I’ve made mistakes in my own project.

In the block that tells the svg object to add ‘circle’ objects to the chart I’ve found the following code:

 .attr("data-xvalue", (d) => (d.Year))
       .attr("data-yvalue", (d) => new Date(1970,0,1,0,d.Time.substring(0,2),d.Time.substring(3,5),0))

As far as I can see the chart displays correctly without this code and it’s left me puzzled as to its significance.

I appreciate this is an old thread but I found the project very useful at and wished to understand it better.

Thanks for reading.