Visualize Data with a Heat Map

Visualize Data with a Heat Map
0

#1

Okay, I finally got it figured out.

The test now passes on this fork: https://codepen.io/Ahimsaka/pen/Wabvdy

However, it still fails on this fork: https://codepen.io/Ahimsaka/pen/OBPVWg

If the moderators would like to close this, they’re welcome to do so, but if anyone wanted to help me figure out why what I did worked it might be helpful for future campers working on this project.

There may be a couple of other minor differences between the two forks, but the main difference is this:

On the passing fork, I change the month input in the data to d.month - 1, set the yScale domain based on [0,…11], and then calculate the output text based on month + 1.

On the failing fork, I left the data alone, set the yScale domain based on [1,…12], and then calculate the output text based on month.

The output shown on screen for both versions is completely identical. The bars are the same size and mapped to the same locations and matched to the same month names. I suspect the confusion lies in the ‘month’ variable used to set the tick text.

The month variable is called via an inline function, so I think it may just be taking the tickValue for each tick, which I guess is defaulted to the Domain input? But the d3 documentation on github refers to tickValue as though it were the literal text shown on the tick, and gives very little instruction for manipulating it. When I try setting tickValues to [0,…11] on the failing test it doesn’t make any difference.


leaving original request up to help catch search terms in case we get some answers

Hey all,

I’m working on “Visualize Data with a Heat Map” and have a test I’ve been trying to make pass for most of two days now.

I’m failing the test for User Story #9: My heat map should have cells that align with the corresponding month on the y-axis. It is failing with this code:

var e=document.querySelector("#y-axis"),t=document.querySelectorAll(“rect.cell”),r=e.querySelectorAll(".tick");s.assert.isTrue(Y(t,r,“y”,“data-month”,“month”,“center”),"month values don’t line up with y locations ")

If you hover over the cells, a title displays the d.month value for each cell. The values match the months on the y-axis.

The sample site provided by the test uses deprecated d3 code, so it’s harder than usual to compare. I think the problem might have something to do with where scaleBand and I placed the y-axis ticks? I’m not really able to tell from the test code what it’s checking. Is ‘month’ an attribute that the test instructions fail to ask us to assign?

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

https://learn.freecodecamp.org/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map


#2

Is ‘bumping’ a thing on this board?

Maybe a waste of my time since I’ve gotten through it, but it seems like a problem that could come up again for others.