D3 scatterplot project help

i have been slowly chuggin along with the scatterplot. The bar graph project really helped me understand a lot of how d3 works. I was doing pretty well with the scatter plot until i found the codepen drop down menu that is able to organize your code. I thought this was wonderful until i did it and now i get an error, ‘‘cannot read properties of null’’. ive never seen this before. I dont know if it is something i did or if something got re aranged when i did the javascript cleanup.

if someone can take a peak and let me know what i messed up.

Side not, ive been trying to look at people asking questions of projects ive already completed to see if i could help (i understand there is no way i could help anyone with but i wanted to feel like i was giving back for all the help i receive) and it is sooo challenging helping us. thank you to all the volunteers helping us beginners.

d3.json(
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json"
).then((data) => {
  const w = 900;
  const h = 900;
  const padding = 70;

  let yearMin;
  let yearMax;
  let yearArr1;
  const yearFunc = () => {
    const yearArr = [];
    yearArr1 = yearArr;
    for (let i = 0; i < data.length; i++) {
      const tempYr = data[i].Year;
      const tempDate = new Date(tempYr, 0);
      yearArr.push(tempDate);
    }
    yearMin = d3.min(yearArr);
    yearMax = d3.max(yearArr);
  };
  yearFunc();

  const timeScale1 = d3
    .scaleTime()
    .domain([yearMin, yearMax])
    .range([padding, w - padding]);

  let timeMin;
  let timeMax;
  const timeFunc = () => {
    const timeArr = [];
    for (let i = 0; i < data.length; i++) {
      const tempTime = data[i].Seconds;
      const tempMin = Math.floor(tempTime / 60);
      const tempSec = tempTime % 60;
      const tempDate = new Date(2015, 0, 1, 0, tempMin, tempSec);
      timeArr.push(tempDate);
      const combined = [tempMin + ":" + tempSec];
    }

    timeMin = d3.min(timeArr);
    timeMax = d3.max(timeArr);
  };
  timeFunc();

  const timeScale2 = d3
    .scaleTime()
    .domain([timeMin, timeMax])
    .range([padding, h - padding]);

  const timeScale3 = d3
    .scaleTime()
    .domain([timeMin, timeMax])
    .range([h - padding, padding]);

  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .style("background-color", "gray");

  const tooltip = d3
    .select("body")
    .append("div")
    .data(data)
    .style("background-color", "white")
    .style("position", "absolute")
    .style("opacity", 0);
 //   .attr('id', 'tooltip');

  svg
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("data-xvalue", (d, i) => {
      return new Date(d.Year, 0);
    })
    .attr("data-yvalue", (d, i) => {
      return new Date(
        2015,
        0,
        1,
        0,
        Math.floor(d.Seconds / 60),
        d.Seconds % 60
      );
    })
    .attr("fill", (d, i) => {
      if (d.Doping == "") {
        return "black";
      } else {
        return "red";
      }
    })
    .attr("r", 5)
    .attr("cx", (d, i) => {
      return timeScale1(new Date(d.Year, 0));
    })
    .attr("cy", (d, i) => {
      return timeScale2(
        new Date(2015, 0, 1, 0, Math.floor(d.Seconds / 60), d.Seconds % 60)
      );
    })
  .on('mouseover', (e,d)=>{
    tooltip.style('opacity', 1)
      .text((d,i)=>{return 'Text here'})
      .style("top", (event.pageY)+"px")
       .style("left",(event.pageX)+"px")
  })

  const xAxis = d3.axisBottom(timeScale1);
  const yAxis = d3.axisLeft(timeScale3).tickFormat(d3.timeFormat("%M:%S"));

  svg
    .append("g")
    .attr("id", "x-axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

  svg
    .append("g")
    .attr("id", "y-axis")
    .attr("transform", "translate(" + padding + ", 0)")
    .call(yAxis);
});

i signed back in and the error went away. not sure what caused it or fixed it. maybe just something weird from my browser or something

I just ran it and it passed all the tests. Maybe you just need to refresh the page?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.