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: