D3 - Difficulty getting the y-axis to show Time?

Hello all. I’m working on the Scatterplot Graph project and I’m having trouble getting the y-axis to show Time properly.

So the initial data has 2 values:
-“Time”: “36:50” OR
-“Seconds”: 2210

I can’t get the first one to display because I think it’s a string. I can get the second one to display (2220 to 2380) but in the example it’s using 15 second increments (37:00 to 39:45).

I’ve tried to read the documentation but I cannot find an answer. I keep trying different approaches (I just removed so much commented out code) but I can’t figure it out.

1 Like

I think the issue may be the use of d3.scaleTime() for the Y-Scale. That particular scale only works with Date objects. So the domain needs to be set up with Date objects corresponding to the max and min of the series. Every data point needs to be converted to a new Date object before being fed to yScale() when plotted.

You could do all that, I checked and it seems to work. But since you have that lovely “Seconds” field already situated as a number, why not just use a normal Linear Scale for this task?

I actually got it working some time last night. Right now I can change the yscale to use d3.scaleTime() or scaleLinear; it seems to use 20 second intervals instead of 15, but both work.

What I ended up doing:

-I created an array of time (in milliseconds) and time (in minutes).
-Then for the yScale I used d3.scaleTime() on the milliseconds array.
-I created a d3.timeFormat with minutes and seconds.
-Then for the yAxis I used d3.tickFormat(timeFormat).

That’s just the axis. For the dots:
-on the attr.cy, I have a function that takes runs yScale(milliseconds[i])…
-…so for each interval of the milliseconds array, it runs through the yScale.

My main problem right now is the data-yvalue test:
-It’s passing, but I don’t like how it’s passing.
-I think the test wants a date variable for some reason.
-…So even though the dot might be placed at “37:15”, that’s not a valid data-yvalue for the test.
-…But if I use a proper date-value like “Mon Feb 25 2019 12:37:15 GMT-0500 (Eastern Standard Time)”, this passes.
-Even though if somebody looks at that, it’s inaccurate compared to the simple “37:15”.

Tl;dr: Any date-value I pass to the yvalue will be meaningless, because it really just needs the time section of a date.

Hi! I am reading your solution.
I’ve been struggling with y-axis as mm:ss for long hours now, your solution is so clear, but I only need to understand why did you use milliseconds array?
I tried using the “seconds” provided data but It did not work.
I tried reading in the documentation about d3.timeFormat() but there is nothing there abt converting milliseconds to mm:ss!
Could you please explain?
Thanks in advance for your response.