Cannot read property 'length' of null - Scatterplot - D3

Cannot read property 'length' of null - Scatterplot - D3
0

#1

The dots appear to visually align with the values of the y-axis but I’m still failing test #8 and I’m getting this error:

Cannot read property ‘length’ of null
TypeError: Cannot read property ‘length’ of null

I’m not sure what to do, so any help would be appreciated!

EDIT: I’ve tried all combinations of inverted and not inverted domain ranges in yScale and yAxisScale but none of them make the tests pass despite 4 of them producing the expected result.

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;
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    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.max(dataset, (d, i) => dataset[i].Seconds),
          d3.min(dataset, (d, i) => dataset[i].Seconds)
        ])
        .range([0, h - padding]);
      const yAxisScale = d3
        .scaleTime()
        .domain([
          d3.min(dataset, (d, i) => convertToMMSS(dataset[i].Seconds)),
          d3.max(dataset, (d, i) => convertToMMSS(dataset[i].Seconds))
        ])
        .range([0, h - padding]);
      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)
        .attr("fill", (d, i) => {
          return dataset[i].Doping != "" ? "red" : "green";
        })
        .on("mouseover", (d, i) => {
          tooltip
            .text(d.Year + " " + formatDate(d.Seconds))
            .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).tickFormat(d3.timeFormat("%M:%S"));
      container
        .append("g")
        .attr("id", "y-axis")
        .attr("transform", "translate(" + padding + "," + padding + ")")
        .call(yAxis);
    }
  );
});

#3

Getting the same error myself, despite the fact i’m passing the yScale and the data-yvalue the exact same Date object (which the project states is correct way to go about it). I’m thinking it has to do something with how the date itself is formatted.

UPDATE
Got the test to pass! (#8) It was because the domain on the yScale was going from max to min instead of the other way around.