Scatter plot project ,tests not passing but dots look correct?

[agate]

Hi all.
So I’m having trouble getting tests 6, 7, and 8 to pass , even though the dots look correctly lined up.
And the tooltip is not positioning correctly.

scatter

Any tips would be helpful!
Thanks!

[agate]

Okay, now I figured out the axes , I think, but obviously not all tests are passing.

I have not attempted to add tooltips, legend, or title yet , so please ignore those.
This is about tests 6, 7, and 8.

Because as far as I can see, the dots look correctly lined up and the x and y axes values look correct. So I’m unsure what I’m doing wrong?
Any help/insight would be very much appreciated! Thanks

[agate]

I’m still stumped, the data looks correct in the console, and visually the dots seem correctly lined up? Still tests 6,7,and 8 aren’t passing.
Also , now I’ve added tooltips, but they aren’t positioning correctly with event.pageX and event.pageY.

Hope someone is willing to take a quick look.

Thanks

[agate]

So no one has any idea what’s wrong with my code? Or maybe it’s just so terrible my code and there’s no beginning to try to explain where I went wrong?

Please anyone? This is such a time waster. I don’t want to move on till the next project till I figure this one out.

[Sylvant]

those d3 apps are usually very tedious to bugtrack, or at least they seem to be, thats prolly the case you havent had a response yet. What i could see on short notice is your data-xvalue and data-yvalue (i might misspell the names) appear as js objects in the console, when they should represent a number i think(or string?!). So check the method where you assign those properties for the points and make sure you use the correct expression to retrieve them.

[agate]

Thanks for the reply.
I checked the user cases again and in case 6 it says " For data-xvalue , integers (full years) or Date objects are acceptable for test evaluation. For data-yvalue (minutes), use Date objects."

I’m using date objects as far as I know , by using a d3.timeParse ? I’m just more consfused if that’s totally wrong

[Sylvant]

i can tell you how i made it work in my project. For the xvalue which is corresponding with the year, i simply passed the Year property from the data object. It comes as integer, e.g. 1997, which works fine. For the yvalue , which equals the track timers(minutes and seconds), i created a date objects and set their minutes and seconds to the respective values from the data Time property. In the end i also converted those objects to string. I dont recall if i did it on purpose and if it was required, but it works.

[agate]

Thanks, but I still don’t see what I did wrong as I used two date objects, like should be fine according to the user case #6?

I just would like to know what’s wrong with my code ?

[Sylvant]

you are not making much sense on your code regarding what the test suite requires you to do. The data-xvalue and data-yvalue of each dot should be within the range of the actual data . You retrieve your data-xvalue by passing the year value thru your X scale. In the end you dont pass the actualy year of the data, but the px on the X axis.
I simply changed your code to return data.Year as xvalue and new Date(d.Time)(which returns date object as you insist) as yvalye and it solves the respective issues. Whats left is only to fix the same properties on your tooltip

[agate]

@Sylvant

In the end you dont pass the actualy year of the data, but the px on the X axis.

Sorry, I’m just more confused.

I timeparsed all json d.Time and d.Year values(to create date objects) and so those can not be passed ,as is, to the scales , as in xScale(d.Year) ?

I looked at this site on how to create scatter plots :
simple scatter plot

So if he does it like that , why is mine wrong? I just want to understand otherwise it’s all pointless . Hope someone is willing to answer .

Also , why is this same project correct , even though the dots aren’t aligned the same as in the FCC example and his axes are different:
other freecodecamp coders’ project

I made sure my chart looks the same as the FCC example , yet it’s wrong?
Hope I don’t sound whiny, I don’t mean too , I’m just confused and maybe slightly annoyed.
Thanks

[Sylvant]

Your scales are designed to take the Date object and return px value, which you use to render the dots along the X and Y axes. When you need those values(to put them on the scatter plot), you pass them to xScale and yScale just fine. But the data-xvalue and data-yvalue properties are not meant to tell us what px value your dots have on the X and Y axes, they tell us the actual Year and Time values. For them you just need to return the Date objects you already parsed via d3.timeParse() .
The simple scatter plot logic you link seems to work just fine, they dont add any additional properties to their dots with the object dates, the way we do for the FCC project, especially not using their scales.

EDIT: this is my project
https://codepen.io/Sylvant/pen/gOLVqmK?editors=0110

There are many ways to design your scales and make the project work, as long as you meet the FCC test requirements. The simplest, the better

[agate]

Okay , I figured it out , I didn’t need to return the scales for the data-xvalue and data-yvalue. But that makes sense at least, just to return the values.

We replied at the same time