D3.js Bar Chart Test 10 Fail

Run into a problem with one test case:
10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
Find number of posts with this issue, but none of them have worked for me.
I am already using new Date() and d3.scaleTime() , but it did not help.
Would be great, if somebody can take a look!

Bar Chart

Here is the code

fetch('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json')
.then((response) => response.json())
.then((data) => {
   DrawBar(data);
})

function DrawBar(data) {
	let margin = {top: 10, bottom: 20, left: 60, right: 20},
	width = 1050 - margin.left,
	height = 550 - margin.bottom;
	const padding = 60;

	const minDate = new Date(data.from_date.substring(0, 4));
	const maxDate = new Date(data.to_date.substring(0, 4));
	console.log(minDate, maxDate);


	const xScale = d3.scaleTime()
		.domain([minDate, maxDate])
		.range([padding, width - margin.right]);

	const yScale = d3.scaleLinear()
		.domain([0, d3.max(data.data, (d) => d[1])])
		.range([height - padding, padding]);

	const xAxis = d3.axisBottom(xScale)
	const yAxis = d3.axisLeft(yScale);

	var svg = d3.select(".chart")
		.append("svg")
		.attr("width", width)
		.attr("height", height)

	var g = svg.append("g")

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

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

	let Tooltip = d3.select(".chart")
		.append("div")
		.attr("class", "tooltip")
    .attr("id", "tooltip");

	var mouseover = function(event, d) {
		Tooltip
		.html("<strong>" +  "Billions: " + "</strong>"+ d[1]  + " $" + "<br>"
		+ "<strong>" + "Year - Mounth: " + "</strong>"+ d[0].substring(0, 7))
		.style("opacity", 1)
     Tooltip.attr("data-date", d[0]);
	}

	var mousemove = function(event, d) {
		Tooltip
		.style("left", (event.x) + "px")
		.style("top", (event.y) + "px")
	}
	var mouseleave = function(event, d) {
		Tooltip
		.style("opacity", 0)
	}

	g.selectAll(".bar")
		.data(data.data)
		.enter()
		.append("rect")
    .attr("data-date", (d) => d[0])
    .attr("data-gdp", (d) => d[1])
		.attr('transform', 'translate(' + margin.left + ',0)')
		.attr("class", "bar")
		.attr("x", (d, i) => i * ((width - margin.right - margin.left) / data.data.length))
		.attr("y",(d) => yScale(d[1]))
		.attr("width", (width - margin.right - margin.left) / data.data.length)
		.attr("height", (d) => (height - padding) - yScale(d[1]))
		.on('mouseover', mouseover)
		.on('mousemove', mousemove)
		.on('mouseleave', mouseleave);
}

It’s passing all tests for me (recent vanilla chrome), so unless you’ve fixed the problem you likely have some local issue with your browser or computer (extensions, weird configuration, time zone misconfiguration, etc.).

1 Like

Issue Solved, problem was with maxDate format and number of months in it. Just added 3 more months and it worked.

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