Hi, I’m trying to finish this project but I have a test the doesn’t pass and I don’t understand why, the data-yvalue is supposed to be Date object in order to get minutes of it and it also requires y-axis to have string format “%M:%S”, the remaining test says y values don’t align with values on y axis, I don’t understand why.
Here is the link: https://codepen.io/moustafa-ahmed/pen/PoWVzKY
Thanks.
So I followed this tutorial as I was not able to find the solution on my own and the test now passes, Visualize Data with a Scatterplot Graph - freeCodeCamp Data Visualization Project Tutorial - YouTube
The Problem was that in the data-yvalue the date object created was something like this when I used timeParse("%M:%S") method with the time string in the API
Mon Jan 01 1900 00:36:50 GMT+0205 (Eastern European Standard Time)
While to pass the test this attribute needed to create a new Date() object with time passed to it to give something like this (from the same object in the API)
Thu Jan 01 1970 02:36:50 GMT+0200 (Eastern European Standard Time)
Only second one works even though the getMinutes() give same result in both cases.
Anyway I thought about sharing the solution for anyone who gets stuck in this, don’t use timeParse method.
That wasn’t the problem. I just converted your project to use d3.timeParse() to test it and it will pass all the tests if you use it. I was curious because I use d3.timeParse() all the time and I thought that something had changed but I don’t think it has.
You do need to be consistent throughout a project (or beware) and use just regular Date() objects or just the date objects from d3.timeParse(). You also have to make sure you are either using d3.scaleTime() scales or be very careful with the date manipulation and formatting for the axes/ticks.
I can’t pinpoint why you had trouble with d3.scaleTime(). The only things that come to mind are that you have added d3-scales and jquery to you codepen, and unless you we’re using jquery for something I missed, both are unnecessary for this project. As d3 imports all its subprojects, adding d3 automagically adds d3-scales and maybe the two conflicted. Or, you might have missed one small formatting bit that caused the problem.
I would have looked closer at your project when you posted the original question, but when I tested your project it already passed all the tests and I assumed you had fixed the problem. Regardless, you have a working solution, so congrats.
Maybe the problem is my browser? Anyway I did adjust the project to be consistent and preferred to use new Date object method, thank you for your response.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.