Data Visualization Projects - Visualize Data with a Heat Map - Test 9 Failing

[freakjr008]

Tell us what’s happening:

Hello,

Test 9 is failing with this error, despite everything is indeed correctly lined up ( I think):
month values don't line up with y locations : expected false to be true

Seems like couple others had the same issue. Looked into each topic but non of the fellows seem to be using the same method for the axis for y like me (scaleTime()). Mostly scaleBand() is used. I have failed to apply that method in my code, assumingly as I don’t have yet enough knowledge about that method. Any help is appreciated.

Here is my pen.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge Information:

Data Visualization Projects - Visualize Data with a Heat Map

freeCodeCamp.org

[robheyays]

You have declared month twice, Codepen has a red line underneath that part when you analyze it.

[freakjr008]

Hmm. I also see red lines but cannot really understand, what they actually mean in my case. They all are related to the y axis though. However, couldn’t find the section with a double declaration.

[robheyays]

Here is the code coming up incorrect. svg .selectAll("rect") .data(allData) .enter() .append("rect") .attr("x", (d) => xScale(yearParse(d[0]))) .attr("y", (d) => { const month = d[1] //console.log(month) return yScale(new Date(0000, month, 1)) }) .attr("width", "5") .attr("height", (d) => { const month = d[1]; //console.log(month) const monthLength = month !== 1 ? dataHeightsArr[month] : calculateFebruaryLength(d[0]); return monthLength; })

[freakjr008]

Yeah. I had many trials on the sections related to the y axis. Didn’t succeed so far.

For example in this fork, I have removed the -1 part in the allData array and added it instead manually to the y coordinate and the height of the rectangles. When doing so test 9 succeeds but test 8 (data-month attribute) fails. When I also add the -1 there the initial fail occurs again (as expected). Seemingly I am overseeing a very small detail. Just cannot find where.

[freakjr008]

Still struggling.
Any other hints?

[robheyays]

I tried running this with d3 link instead but the same so that is not the issue. Also this code pen passes but you need to add the testable link. https://codepen.io/fendermaniac/pen/GYzBaR it has all the months listed. I just did the scatter plot with a tutorial you may try that and go step by step.

[freakjr008]

You won’t believe how I actually could manage to fix it.
I found the hint from this post and changed the y value of the g element for the y axis of the translate function to 15. And voila. Cannot describe the relief I am having right now.

Many thanks for your support!