D3 Scatter Plot TEST 8 ERROR, going Crazy

JavaScript
1

I’ll try to keep this as tl:dr as possible. All the dots line up where they need to line up. Added a simple tooltip to verify each dot’s Date object aligns with the corresponding Y value in the Y axis (see screenshot, highlighted dot)

Scatter Plot
Scatter Plot593×655 16.9 KB

Yet, no matter what I do (and I’ve tried A LOT of things), I keep failing test #8 " The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis." Error message: “y values don’t line up with y locations : expected false to be true.”
I’ve been stuck with this issue for HOURS, since yesterday, and it’s gotten to the point where it’s not productive anymore, I’m just wasting way too much time. So here I am, hoping someone will be able to pinpoint why this isn’t working.

Here’s the relevant part of my code:
(“datos” is how I named the object array returned by the API)

  const yScale=d3.scaleTime()   //NOTE: EVERYTHING I'VE TRIED, I ALSO TRIED WITH d3.scaleLinear()
    .domain( [d3.min(datos,d=>d3.timeParse("%M:%S")(d.Time)) , d3.max(datos,d=>d3.timeParse("%M:%S")(d.Time))] )
    .range( [pad,h-pad] )
  
  const yAxis=d3.axisLeft(yScale)
  .tickFormat(d3.timeFormat("%M:%S"))
  
  canvas.append("g")
    .call(yAxis)
    .attr("transform","translate("+2*pad+")")
    .attr("id","y-axis")

    canvas.selectAll("circle")
    .data(datos)
    .enter()
    .append("circle")
    .attr("r",5)
    .attr("cy", (d)=>yScale(d3.timeParse("%M:%S")(d.Time)) ) 
    .attr("data-yvalue", (d)=> d3.timeParse("%M:%S")(d.Time))
    .append("title")
    .text(d=>d3.timeParse("%M:%S")(d.Time))

Here’s the link to my pen:
https://codepen.io/RodrigoHLC/pen/QWzPJEz?editors=1000

I don’t know what else to do. Everything seems to be working OK visually and this has caused me to lose a lot of momentum. IMPORTANTE NOTE: The test also states that data-yvalue HAS to be a DATE object, so I can’t apply any conversions to it that will cause to stop being a Date object (for example, I can’t use d3.timeFormat(“%M:%S”)(d3.timeParse(“%M:%S”)(d.Time)), even if that makes data-yvalue be the same value as cy . It is my understanding that using d3.timeParse(“%M:%S”)(d.Time) converts “Time” into a Date object, which you can verify on the tooltip.

Thanks in advance to anyone kind enough to put in the time to figure out the cause and help me out. Hope at least you get a little fun challenge out of this!

PS: While looking at posts by other users who experienced a similar issue, I saw that at least one used the Seconds key for the yScale whereas I used the Time key. While I will go back and try to do everything using the Seconds key, it seemed to me like it was used pretty much the same way I used the Time key. Here’s a link to pen in question, but I would still like to understand why the way I’m using Time doesn’t work:
https://codepen.io/atiktook/pen/vYGNzEE?editors=0010

2

Hi, I have implemented the same chart in D3.js to make it easy to understand. Please take a look at the example; it may help you with your problem.
Link : https://codepen.io/imakashram/pen/VwqdBKm

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.