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);
});