I am failing the test for Story 11 in " Data Visualization Projects - Visualize Data with a Bar Chart" with the error “y values don’t line up with y locations : expected false to be true”
My code is:
const w = parseInt(d3.select(".container").style("width"), 10);
const h = parseInt(d3.select(".container").style("height"), 10);
const padding = 60;
const barSpacing = 0.3;
const svg = d3
.select(".visHolder")
.append("svg")
.attr("width", w)
.attr("height", h);
svg
.append("text")
.text("Gross Domestic Product (Billion $)")
.attr("x", -350)
.attr("y", 20)
.attr("transform", "rotate(-90)");
d3.json(
"https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json"
).then(function(data) {
var dataset = data.data;
var parser = d3.timeParse("%Y-%m-%d");
const xScale = d3
.scaleTime()
.domain([
d3.min(dataset, d => parser(d[0])),
d3.max(dataset, d => parser(d[0]))
])
.range([padding, w - padding]);
const xAxis = d3.axisBottom(xScale); //.tickFormat(d3.format("Y"));
svg
.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.attr("id", "x-axis")
.call(xAxis);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, d => d[1])])
.range([h - padding, padding]);
const yAxis = d3.axisLeft(yScale).ticks(4, d3.format("~s"));
svg
.append("g")
.attr("transform", "translate(" + padding + ",0)")
.attr("id", "y-axis")
.call(yAxis);
var barWidth =
(xScale(parser("2001-01-01")) - xScale(parser("2000-01-01"))) / 4;
svg
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", d => xScale(parser(d[0])))
.attr("y", d => yScale(d[1]))
.attr("width", barWidth)
.attr("height", d => h - padding - yScale(d[1]))
.attr("class", "bar")
.attr("data-date", (d, i) => d[0])
.attr("data-gdp", (d, i) => d[1]);
});
And it seems to display everything properly but I am unsure as to why it is failing the test