I’m really stuck on these projects and they are beating me. 
I have 140 lines of d3 code written, has anyone the time to point out to me what I’m doing wrong?
I have 12/16 tests passed.
My graph is displaying the dots in the correct pattern when compared to the sample supplied by FCC (https://codepen.io/freeCodeCamp/full/bgpXyK)
But it’s too far left and my axis are not correct.
// get data
d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json").then(function (dataset) {
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const legendTitles = [
"No doping allegations", "Riders with doping allegations"
];
const legendColours = [
"green", "red"
];
const myTimeFormat = "%M:%S";
const myYearFormat = "%Y";
const dataArray = dataset.map(d => [
d3.timeParse(myYearFormat)(d.Year),
d3.timeParse(myTimeFormat)(d.Time),
d.Doping
]);
//const dataArray = dataset.map(d => [d.Year, d.Time]);
console.log(dataArray);
// create a tooltip
var tooltip = d3.select('.svg-container')
.append('div')
.attr("id", "tooltip")
.attr('class', 'tooltip')
.style("opacity", 0)
//YEAR - X
const xScale = d3.scaleTime()
.domain([
d3.min(dataArray, (d) => d[0]),
d3.max(dataArray, (d) => d[0])])
.range([0, width]);
console.log(d3.min(dataArray, (d) => d[0])); //Sat Jan 01 1994 00:00:00 GMT+0000 (Greenwich Mean Time)
console.log(xScale(dataArray[0][0])); //39.97392438070404
//TIME - Y
const yScale = d3.scaleTime()
.domain([
d3.max(dataArray, (d) => d[1]),
d3.min(dataArray, (d) => d[1])])
.range([height, 0]);
console.log(d3.min(dataArray, (d) => d[1])); //Mon Jan 01 1900 00:36:50 GMT-0025 (Greenwich Mean Time)
console.log(xScale(dataArray[0][1])); //-3760.0630673258
const svg = d3.select(".container")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll(".svg-container")
.data(dataArray)
.enter()
.append("circle")
.attr("class", "dot")
.attr("fill", (d) => {
return d[2] == "" ? "red" : "green"
})
.attr("data-xvalue", d => d[0])
.attr("data-yvalue", d => d[1])
.attr("cx", (d) => xScale(d[0]))
.attr("cy", (d) => yScale(d[1]))
.attr("r", 5)
.on("mouseover", function (d, i) {
tooltip.transition()
.duration(200)
.style('opacity', .9)
tooltip.html('<p>YEAR:' + d[0] + '</p>' + '<p>TIME:' + d[1] + '</p>')
.attr("data-year", d[0])
.style('left', (i * 5) + 30 + 'px')
.style('top', height - 200 + 'px');
})
.on("mouseout", function (d, i) {
tooltip.transition()
.duration(200)
.style('opacity', 0)
});
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
//.tickFormat(d => d[1]); //already formatted in dataArray
//.tickFormat(d => d3.time.format("%M:%S").parse(d[1]));
//x-axis
svg.append("g")
.attr("transform", "translate(60," + height + ")")
.attr("id", "x-axis")
.call(xAxis);
//y-axis
svg.append("g")
.attr("transform", "translate(60, 0)")
.attr("id", "y-axis")
.call(yAxis);
svg.append('text')
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr('x', -180)
.attr('y', 10)
.text("Time in Minutes");
const legend = svg.append("g")
.attr("class", "legend")
.attr("x", width)
.attr("y", 25)
.attr("id", "legend")
.attr("height", 100)
.attr("width", 100);
legend.selectAll("mydots")
.data(legendColours)
.enter()
.append("rect")
.attr("x", 600)
.attr("y", function (d, i) { return 100 + i * (20 + 5) }) // 100 is where the first dot appears. 25 is the distance between dots
.attr("width", 20)
.attr("height", 20)
.style("fill", ((d) => d))
// Add one dot in the legend for each name.
legend.selectAll("mylabels")
.data(legendTitles)
.enter()
.append("text")
.attr("x", 600 + 20 * 1.2)
.attr("y", function (d, i) { return 100 + i * (20 + 5) + (20 / 2) }) // 100 is where the first dot appears. 25 is the distance between dots
.style("fill", "yellow")
.text((d) => d)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
});
