How to set custom ticks? - Scatterplot Graph

How to set custom ticks? - Scatterplot Graph
0

#1

I’m trying to make custom ticks to get values in mm:ss but I’m not sure how to do it… Any hints would be appreciated!
EDIT: Also I coundn’t get anything from here to work.

document.addEventListener("DOMContentLoaded", function() {
  function convertToMMSS(originalSeconds) {
    let minutes = Math.floor(originalSeconds / 60);
    let seconds = originalSeconds % 60;
    let date = new Date();
    date.setMinutes(minutes);
    date.setSeconds(seconds);
    let formatTime = d3.timeFormat("%M:%S");
    let mmss = formatTime(date);
    let parseTime = d3.timeParse("%M:%S");
    return parseTime(mmss);
  }
  
  function formatDate(originalSeconds) {
    let minutes = Math.floor(originalSeconds / 60);
    let seconds = originalSeconds % 60;
    let time = minutes + ":" + seconds;
    return time;
  }
  $.getJSON(
    "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json",
    function(dataset) {
      console.log(dataset);
      const w = 800;
      const h = 600;
      const padding = 60;
      const xScale = d3
        .scaleLinear()
        .domain([
          d3.min(dataset, (d, i) => dataset[i].Year) - 1,
          d3.max(dataset, (d, i) => dataset[i].Year)
        ])
        .range([padding, w - 2]);
      const yScale = d3
        .scaleLinear()
        .domain([
          d3.min(dataset, (d, i) => dataset[i].Seconds),
          d3.max(dataset, (d, i) => dataset[i].Seconds)
        ])
        .range([h - padding, 0]);
      const yAxisScale = d3
        .scaleLinear()
        .domain([
          d3.min(dataset, (d, i) => formatDate(dataset[i].Seconds)),
          d3.max(dataset, (d, i) => formatDate(dataset[i].Seconds))
        ])
        .range([h - padding, 0]);
      const tooltip = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .attr("id", "tooltip");
      const container = d3
        .select("body")
        .append("svg")
        .attr("height", h + padding)
        .attr("width", w + padding);
      container
        .selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("class", "dot")
        .attr("data-xvalue", d => d.Year)
        .attr("data-yvalue", d => convertToMMSS(d.Seconds))
        .attr("cx", d => xScale(d.Year))
        .attr("cy", d => h -  yScale(d.Seconds))
        .attr("r", 5)
        .on("mouseover", (d, i) => {
          tooltip
            .text(d.Year)
            .style("left", d3.event.pageX + "px")
            .style("top", d3.event.pageY - 28 + "px")
            .style("opacity", 1)
            .attr("data-year", () => dataset[i].Year);
        })
        .on("mouseout", () => {
          tooltip.style("opacity", 0);
        });
      const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d"));
      container
        .append("g")
        .attr("id", "x-axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis);
      xAxis.ticks(4);
      const yAxis = d3.axisLeft(yAxisScale);
      container
        .append("g")
        .attr("id", "y-axis")
        .attr("transform", "translate(" + padding + "," + padding + ")")
        .call(yAxis);
      let legend = d3
        .select("body")
        .append("div")
        .attr("x", 600)
        .attr("y", 500);
      legend.attr("id", "legend");
      legend.append("text").text("No doping allegations");
      legend.append("text").text("Riders with doping allegations");
    }
  );
});