Visualize Data with a Scatterplot Graph Axis label format

Tell us what’s happening:
Is anyone can help to instruct how to change the x and y axis labels?
The freeCodeCamp course did not covered these methods and I found only some difficult explanations.

The full code available here:

Now the yAxis is in float Number format. I would like to change Min:Sec format.
Also the xAxis include an ugly dot. I would like to remove it.
And one more question: how to use the data-any attribute? And where we have to use it in this project? I resolve the challenge without using data-attributes…

Thanks for your help


Your code so far
// Create scale:
const xScale = d3.scaleLinear()
.domain([minYear - 1, maxYear + 1])
.range([padding, width - padding]);
const yScale = d3.scaleLinear()
.domain([minSecond, maxSecond])
.range([height - padding, padding]);

    // Create SVG:
    const svg ="#myChart")
        .attr("width", width)
        .attr("height", height);
    // Create axis:
    const xAxis = d3.axisBottom(xScale);
        .attr("transform", `translate(0, ${height - padding})`)
        .attr("id", "x-axis")
    const yAxis = d3.axisLeft(yScale);
        .attr("transform", `translate(${padding}, 0)`)
        .attr("id", "y-axis")

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36 OPR/60.0.3255.170.

Link to the challenge: