FCC: D3 Bar Chart X-Axis not aligned with data

Tell us what’s happening:
I cannot get my data bars to align over the x-axis’ tick marks in order to pass the test case, even though they appear to work correctly. In the sample app, the left side of the data bar matches up to the left side of the tick mark. For my code, I have the same behavior. The only difference that I can see is that the first data bar in the sample app overlaps with the y-axis, whereas my first data bar is strictly to the right of the y-axis.

Your code so far
// Retrieve the data from the server
const req = new XMLHttpRequest;
req.open(“GET”, “https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json”, true);
req.send();
req.onload = function() {
const json = JSON.parse(req.responseText);

const dataset = json.data;

const w = 900;
const h = 460;
const padding = 50;
const yMax = h - padding;
const yMin = padding;
const xMax = w - 2 * padding;
const xMin = 0;
const barWidth = (xMax - xMin) / (dataset.length);
console.log(barWidth);

const heightScale = d3.scaleLinear();
heightScale.domain([0, d3.max(dataset, (data) => {
return data[1];
})]);
heightScale.range([yMax, yMin]);

const widthScale = d3.scaleLinear();
widthScale.domain([d3.min(dataset, (data) => {
var date = data[0].split("-");
var quarter = “0”;
switch (date[1]) {
case “01”:
quarter = 1;
break;
case “04”:
quarter = 2;
break;
case “07”:
quarter = 3;
break;
case “10”:
quarter = 4;
break;
default:
quarter = 0;
break;
}
return Number(date[0]) + (quarter - 1) * 0.25;
}), d3.max(dataset, (data) => {
var date = data[0].split("-");
var quarter = “0”;
switch (date[1]) {
case “01”:
quarter = 1;
break;
case “04”:
quarter = 2;
break;
case “07”:
quarter = 3;
break;
case “10”:
quarter = 4;
break;
default:
quarter = 0;
break;
}
return Number(date[0]) + (quarter - 0) * 0.25;
})]);
widthScale.range([xMin, xMax]);

const chart = d3.select(“body”)
.select(“div”);

const title = chart.append(“div”)
.attr(“id”, “title”)
.text(“United States GDP”);

const svg = chart.append(“svg”)
.attr(“width”, w)
.attr(“height”, h);

const div = d3.select(“body”)
.append(“div”)
.attr(“id”, “tooltip”)
.style(“opacity”, 0);

const yAxis = d3.axisLeft(heightScale);
const xAxis = d3.axisBottom(widthScale);

svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)
.attr(“class”, “bar”)
.attr(“data-date”, (d) => d[0])
.attr(“data-gdp”, (d) => d[1])
.attr(“height”, (d) => {
return (yMax) - heightScale(d[1]);
})
.attr(“width”, barWidth)
.attr(“x”, (d, i) => {
var date = d[0].split("-");
var quarter = “0”;
switch (date[1]) {
case “01”:
quarter = 1;
break;
case “04”:
quarter = 2;
break;
case “07”:
quarter = 3;
break;
case “10”:
quarter = 4;
break;
default:
quarter = 0;
break;
}
return widthScale(Number(date[0]) + (quarter - 1) * 0.25);
})
.attr(“y”, (d) => {
return heightScale(d[1]);
})
.attr(“transform”, “translate(” + (padding) + “, 0)”)
.on(“mouseover”, function(d) {
var date = d3.select(this).attr(“data-date”).split("-");
var gdp = d3.select(this).attr(“data-gdp”).split("-");
var quarter = “0”;
switch (date[1]) {
case “01”:
quarter = 1;
break;
case “04”:
quarter = 2;
break;
case “07”:
quarter = 3;
break;
case “10”:
quarter = 4;
break;
default:
quarter = 0;
break;
}
div.transition()
.duration(200)
.style(“opacity”, .9);
div.html(date[0] + " Q" + quarter + “\n$” + gdp + " Billion")
.style(“left”, (d.x + 10) + “px”)
.style(“top”, (300) + “px”);
div.attr(“data-date”, d3.select(this).attr(“data-date”));
})
.on(“mouseout”, function(d) {
div.transition()
.duration(500)
.style(“opacity”, 0);
});

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

svg.append(“g”)
.attr(“transform”, “translate(” + (padding) + ", " + (yMax) + “)”)
.call(xAxis)
.attr(“id”, “x-axis”);
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

Make it easy on us and post a link to a codepen or similar.

The problem is your x-axis is a linear scale (plain numbers) when the data is time (years, quarters). The tests for the bar chart expects a date and is going to call new Date() and parseFloat() on your tick labels and gets a number with a comma instead, so it gets confused (because your ticks have commas which causes parseFloat() to barf) and the test fails.

So your choices are use a time scale or remove the commas from your tick labels.

I appreciate the feedback. I used to have the data represented as a Date, but I ended up having issues with the first date not being aligned with its respective tick. I ended up removing the commas and that fixed it.