With some local tests, I was able to pinpoint the problem as this datum
{
"Time": "36:50",
"Place": 1,
"Seconds": 2210,
"Name": "Marco Pantani",
"Year": 1995,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1995 due to high hematocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
},
which is the lowest point. You can see the problem in action if you log your parsed time and the corresponding raw data from the function calculating the data-yvalue:
parsed: Mon Jan 01 1900 00:39:51 GMT-0600 (Central Standard Time)
y-location (date): 67.61111111111111
y-location (ISO date): undefined
time: 36:50
parsed: Mon Jan 01 1900 00:36:55 GMT-0600 (Central Standard Time)
y-location (date): 488.05555555555554
y-location (ISO date): undefined
time: 36:55
On the first datum, the times are not matched and the y-coordinate is not correct.
The problem lies somewhere in that you’re doing a lot of the work manually that D3 should be doing by repeatedly processing the date and time information (like parsedData, increasedSecond, yAxisMeasurements, the calculation for data-yvalue, etc.) and sometimes you are using the raw data and sometimes parsedData. Somewhere in all that is the off-by-one error that’s causing the problem.
I think the problem with y-location was because I was fixing data-yvalue in CodePen .
I will rewrite the repeated functions as you said.
Thanks for pointing these out!
I deleted some repeated functions as you said and changed .attr('cy', (d) => yAxisMeasurements(d))
to .attr('cy', (d) => yAxisScale(d3.timeParse(specifier)(d.Time)))
and data-yvalue from
let date = new Date(parsedData[i])
let result = date.toISOString()
return result;
to
let result = d3.timeParse(specifier)(d.Time)
return result.toISOString();