Visualize Data with a Scatterplot Graph: 15/16 tests passed

I’m really stuck on these projects and they are beating me. :worried:
I have 140 lines of d3 code written, has anyone the time to point out to me what I’m doing wrong?
I have 12/16 tests passed.
My graph is displaying the dots in the correct pattern when compared to the sample supplied by FCC (https://codepen.io/freeCodeCamp/full/bgpXyK)
But it’s too far left and my axis are not correct.

// get data
d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json").then(function (dataset) {
  var margin = { top: 20, right: 20, bottom: 30, left: 40 },
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  const legendTitles = [
    "No doping allegations", "Riders with doping allegations"
  ];
  const legendColours = [
    "green", "red"
  ];
  const myTimeFormat = "%M:%S";
  const myYearFormat = "%Y";
  const dataArray = dataset.map(d => [
    d3.timeParse(myYearFormat)(d.Year),
    d3.timeParse(myTimeFormat)(d.Time),
    d.Doping
  ]);
  //const dataArray = dataset.map(d => [d.Year, d.Time]);

  console.log(dataArray);

  // create a tooltip
  var tooltip = d3.select('.svg-container')
    .append('div')
    .attr("id", "tooltip")
    .attr('class', 'tooltip')
    .style("opacity", 0)

  //YEAR - X
  const xScale = d3.scaleTime()
    .domain([
      d3.min(dataArray, (d) => d[0]),
      d3.max(dataArray, (d) => d[0])])
    .range([0, width]);

  console.log(d3.min(dataArray, (d) => d[0])); //Sat Jan 01 1994 00:00:00 GMT+0000 (Greenwich Mean Time)
  console.log(xScale(dataArray[0][0])); //39.97392438070404

  //TIME - Y
  const yScale = d3.scaleTime()
    .domain([
      d3.max(dataArray, (d) => d[1]),
      d3.min(dataArray, (d) => d[1])])
    .range([height, 0]);

  console.log(d3.min(dataArray, (d) => d[1])); //Mon Jan 01 1900 00:36:50 GMT-0025 (Greenwich Mean Time)
  console.log(xScale(dataArray[0][1])); //-3760.0630673258

  const svg = d3.select(".container")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.selectAll(".svg-container")
    .data(dataArray)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("fill", (d) => {
      return d[2] == "" ? "red" : "green"
    }) 
    .attr("data-xvalue", d => d[0])
    .attr("data-yvalue", d => d[1])
    .attr("cx", (d) => xScale(d[0]))
    .attr("cy", (d) => yScale(d[1]))
    .attr("r", 5)

    .on("mouseover", function (d, i) {
      tooltip.transition()
        .duration(200)
        .style('opacity', .9)
      tooltip.html('<p>YEAR:' + d[0] + '</p>' + '<p>TIME:' + d[1] + '</p>')
        .attr("data-year", d[0])
        .style('left', (i * 5) + 30 + 'px')
        .style('top', height - 200 + 'px');
    })

    .on("mouseout", function (d, i) {
      tooltip.transition()
        .duration(200)
        .style('opacity', 0)
    });

  const xAxis = d3.axisBottom(xScale);

  const yAxis = d3.axisLeft(yScale);
  //.tickFormat(d => d[1]); //already formatted in dataArray
  //.tickFormat(d => d3.time.format("%M:%S").parse(d[1]));


  //x-axis
  svg.append("g")
    .attr("transform", "translate(60," + height + ")")
    .attr("id", "x-axis")
    .call(xAxis);

  //y-axis
  svg.append("g")
    .attr("transform", "translate(60, 0)")
    .attr("id", "y-axis")
    .call(yAxis);

  svg.append('text')
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr('x', -180)
    .attr('y', 10)
    .text("Time in Minutes");


  const legend = svg.append("g")
    .attr("class", "legend")
    .attr("x", width)
    .attr("y", 25)
    .attr("id", "legend")
    .attr("height", 100)
    .attr("width", 100);

  legend.selectAll("mydots")
    .data(legendColours)
    .enter()
    .append("rect")
    .attr("x", 600)
    .attr("y", function (d, i) { return 100 + i * (20 + 5) }) // 100 is where the first dot appears. 25 is the distance between dots
    .attr("width", 20)
    .attr("height", 20)
    .style("fill", ((d) => d))

  // Add one dot in the legend for each name.
  legend.selectAll("mylabels")
    .data(legendTitles)
    .enter()
    .append("text")
    .attr("x", 600 + 20 * 1.2)
    .attr("y", function (d, i) { return 100 + i * (20 + 5) + (20 / 2) }) // 100 is where the first dot appears. 25 is the distance between dots
    .style("fill", "yellow")
    .text((d) => d)
    .attr("text-anchor", "left")
    .style("alignment-baseline", "middle")

});

Hi @Sonnerz,

Please share the link to your codepen.

Codepen: https://codepen.io/sonnerz/pen/YoewQJ

I have managed to get a little further but my y-axis is not correct.
It’s the one test that keeps failing.
" The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis"