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