Bar Chart Project test 10 and 11 won't pass!

[Fovane]

Tell us what’s happening:
Describe your issue in detail here.

Test 10 and 11 won’t pass. Both tests say “Cannot read properties of null (reading ‘innerHTML’)” as an error. Help me, thanks.

Your code so far
HTML code:

Bar Chart

JavaScript Code:
var years = [1950, 1955, 1960, 1965, 1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015];
var yLine = [2000];
for (var i = 2; i < 10; i++) {
yLine.push(yLine[0] * i)
}
var width = 800;
var height = 600;
var margin = { top: 50, bottom: 50, left: 50, right: 50 };

var svg = d3.select("#svg-div").append(“svg”)
.attr(“height”, height - margin.bottom -margin.top)
.attr(“width”, width - margin.left - margin.right)
.attr(“class”, “my-svg”);
svg.append(“g”).attr(“id”, “x-axis”);
d3.select(".my-svg").append(“g”).attr(“id”, “y-axis”);

// JSON File Extracted
fetch(“https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json”)
.then(function(resp) {
return resp.json();
})
.then(function(data) {
localStorage.setItem(“extractedJSON”, JSON.stringify(data));
})
var jsonData = JSON.parse(localStorage.getItem(“extractedJSON”));
///////////////////////////

var xAxisScale = d3.scaleBand()
.domain(d3.range(years.length))
.range([margin.left, width - (margin.right * 2.5)])
.padding(0.1);

var yAxisScale = d3.scaleBand()
.domain(d3.range(yLine.length))
.range([height - (margin.bottom * 2.5), margin.top])
.padding(0.1);

var x = d3.scaleBand()
.domain(d3.range(jsonData.data.length))
.range([margin.left, width - (margin.right * 2.5)])
.padding(0.1);

var y = d3.scaleLinear()
.domain([0, d3.max(jsonData.data)[1]])
.range([height - (margin.bottom * 2.5), margin.top]);

// Tooltip
var tooltip = d3.select(“body”)
.append(“div”)
.attr(“id”, “tooltip”)
.style(“visibilty”, “hidden”)
.style(“width”,“300px”)
.style(“height”,“300px”)
///////

svg.selectAll(“rect”)
.data(jsonData.data)
.enter()
.append(“rect”)
.attr(“height”, d => y(0) - y(d[1]))
.attr(“width”, x.bandwidth())
.attr(“class”, “bar”)
.attr(“fill”, “royalblue”)
.attr(“data-date”, (d) => d[0])
.attr(“data-gdp”, (d) => d[1])
.attr(“x”, (d, i) => x(i))
.attr(“y”, (d, i) => y(d[1]))
.on(“mouseover”, (d) => {
tooltip.transition()
.style(“visibility”,“visible”)
tooltip.text(d.srcElement.data[0])

document.querySelector("#tooltip").setAttribute(“data-date”, d.srcElement.data[0])
})
.on(“mouseout”, (d) => {
tooltip.transition()
.style(“visibility”,“hidden”)
});

//////////////// x-axis
/////

d3.select("#x-axis")
.append(“line”)
.attr(“stroke”, “black”)
.attr(“y1”, height - (margin.bottom * 2.5))
.attr(“y2”, height - (margin.bottom * 2.5))
.attr(“x1”, margin.left / 2)
.attr(“x2”, width - (margin.right * 2.5));

d3.select("#x-axis")
.selectAll(".x-tick-line")
.data(yLine)
.enter()
.append(“line”)
.attr(“stroke”, “black”)
.attr(“y1”, (d, i) => yAxisScale(i) - 5)
.attr(“y2”, (d, i) => yAxisScale(i) - 5)
.attr(“x1”, 0)
.attr(“x2”, 5)
.attr(“transform”, “translate(45, 0)”)

/////
///// Ticks

d3.select("#x-axis")
.selectAll(“text”)
.data(years)
.enter()
.append(“text”)
.attr(“class”, “tick”)
.text((d, i) => d)
.attr(“x”, (d, i) => xAxisScale(i))
.attr(“y”, height - (margin.bottom * 2.15));

///////////////////

/////////////////// y-axis
/////
d3.select("#y-axis")
.append(“line”)
.attr(“stroke”, “black”)
.attr(“y1”, 0)
.attr(“y2”, height - (margin.bottom * 2.45) + (margin.top / 2))
.attr(“x1”, margin.left)
.attr(“x2”, margin.left);

d3.select("#y-axis")
.selectAll(".y-tick-line") // empty class selection
.data(years)
.enter()
.append(“line”)
.attr(“stroke”, “black”)
.attr(“y1”, 0)
.attr(“y2”, 5)
.attr(“x1”, (d, i) => xAxisScale(i) + 15)
.attr(“x2”, (d, i) => xAxisScale(i) + 15)
.attr(“transform”, “translate(0, 475)”);

/////
///// Ticks
d3.select("#y-axis")
.selectAll(“text”)
.data(yLine)
.enter()
.append(“text”)
.attr(“class”, “tick”)
.text((d, i) => d)
.attr(“x”, margin.left / 11)
.attr(“y”, (d, i) => yAxisScale(i))

////////////////////

Your browser information:

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

Challenge: Visualize Data with a Bar Chart

[Slimattcode]

Hello there, a link to the live code would help us help you.

[Fovane]

live code: https://codepen.io/Fovane/pen/YzEeoQm

[jeremy.a.gray]

There’s several things. First, you just need d3 and the fCC bundle as JS resources and you don’t have to import them. Adding them in the JS config menu is sufficient. D3 includes all the sub-packages automatically.

Second, your tooltips work but you’re going around the world to make them. D3v7 mouse functions are called with the (event, datum) => {...} signature. Since you’re adding them in a selection, you can pass the current datum as the second argument without digging around in events and JS DOM functions. You also want a mouse move function to keep the tooltip visible while you’re in the bar to help debug the tick problem (I think; maybe I’m just having trouble keeping the pointer in a bar).

Finally, the ticks. They don’t align. If you look at your visualization, the July 2012 bar is over the 2015 tick (and similarly for the others). Since you’re creating the ticks manually, I assume there is a disconnect in your calculated spacing of the ticks and the bars. Further, I’m not sure you’re getting the SVG structure expected by the tests by creating them manually (I think this is the actual cause of the innerHTML from null error; the tests can’t find the ticks). I suggest letting D3 create the axes since it will automagically add the ticks (with the correct class and all). At most you may need to transform the resultant axes into place.