I am working with d3.js and draw scatter plot chart using the scaleTime to compute the values on x-axis and y-axis but the scales are not computing the data in right way. ( 1 )The interval of seconds in the y-axis should be only 15 seconds and that should start at 37:00. ( 2 ) There should be a slight gap at the beginning of the x-axis and the tick at the end of the x-axis should have a 2016 value.

as shown in the picture below

retriveData();

async function retriveData() {
 let response = await fetch(
   "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json"
 );
 let json = await response.json();
 chart(json);
}

function chart(dataset) {
 const width = 800,
   height = 500,
   padding = 60;

 let svg = d3
   .select("body")
   .append("svg")
   .style("width", width)
   .style("height", height);

 const parsedDate = d3.timeParse("%Y");

 const dates = [];
 for (let i = 0; i < dataset.length; i++) {
   dates.push(parsedDate(dataset[i].Year));
 }

 const extentDate = d3.extent(dates);

 const xScale = d3
   .scaleTime()
   .domain(extentDate)
   .range([padding, width - padding]);

 const parsedTime = d3.timeParse("%M:%S");

 const minutes = [];
 
 for (let i = 0; i < dataset.length; i++) {
   minutes.push(parsedTime(dataset[i].Time));
 }

 const extentTime = d3.extent(minutes).sort((a, b) => b - a);

 const yScale = d3
   .scaleTime()
   .domain(extentTime)
   .range([height - padding, padding]);

 let format = d3.timeFormat("%M:%S");

 const xAxis = d3.axisBottom(xScale);
 const yAxis = d3.axisLeft(yScale).tickFormat(format);

 svg
   .append("g")
   .attr("transform", `translate(0,${height - padding})`)
   .call(xAxis);

 svg.append("g").attr("transform", `translate(${padding},0)`).call(yAxis);
}



[solution][1]


 [1]: https://i.stack.imgur.com/D40dF.png