Dates in d3.js and generating axis lines

Tell us what’s happening:
Hey there ! i’m unable to understand how dates work in d3.js (only linearScale explained in circulum), in this project the format is in “mm:ss” .I am not able to generate the y-axis also the g element with class “tick”. please help me with where i am going wrong . Is it because the linearTime takes the values as string ?
codepen

Your code so far
const time = d.map((item) =>(item.Time));

const yMax = (d3.max(time))    //new  Date(d3.max(time))  gives invalid Date
const yMin = (d3.min(time))

var yAxisScale = d3.scaleTime()
                .domain([yMin,yMax])  //tried String(yMin)  too
                .range([0,height]);

var yAxis = d3.axisLeft()                     
              .scale(yAxisScale) 

var yAxisGroup = svg.append(“g”).call(yAxis)

Your browser information:

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

Challenge: Visualize Data with a Scatterplot Graph

Link to the challenge:

It is logical that you are getting invalid Date from new Date(d3.max(time)) because like i said in the other post d3.max(time) will return "39:50" and you are passing it to Date yet it expects a date string and "39:50" is not a date string. Instead of extracting duration of time formatted in mm:ss, instead extract the time in seconds because they are the same. If you console.log the data you have fetched from the url, you will see data like:

[
{ Doping: "Alleged drug use during 1995 due to high hematocrit levels"
Name: "Marco Pantani"
Nationality: "ITA"
Place: 1
Seconds: 2210
Time: "36:50"
URL: "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
Year: 1995 }
]

From the first element of the array Seconds is 2210 and Time is "36:50". 2210 seconds is 36 minutes and 50 seconds. Seconds and Time both represent the duration taken by a cyclist except that they are formatted differently. Instead of using Time use Seconds. Take note Date takes milliseconds. That means you can pass Seconds * 1000 after converting it to milliseconds.

It is not enough to rely on the curriculum to complete those assignments. You also need to read the D3 documentation and other resources to understand what is going on. D3 has a steep learning curve.

hey can look into this issue , i have asked for help ,but din’t get a reply , i’m sure you can help me out again .:slight_smile:
link