Tell us what’s happening:
I’ve found 2 similar posts but they have both been closed (seemingly without being resolved):
The “data-month”, “data-year” of each cell should be within the range of the data.
data-month should be at most 11: expected 12 to be at most 11
The (apparent) bug:
The range for the test is 0-11 but the range of the months in the returned dataset is 1-12. The range for the test needs to be increased by 1, as far as I can see. If I’m missing something please let me know so that I can pass test #8.
I’m getting a non-breaking error in the console (Error: attribute y: Expected length, “NaN”.) but I can’t figure out what it’s unhappy with since all y values are numbers as far as I can see.
Your code so far
Challenge: Data Visualization Projects - Visualize Data with a Heat Map
I’ve tried “hacking” the project by decreasing each item in the dataset’s month value by one and changing the y-axis range to 0-11 instead of 1-12, but then I get an error on test #9 (even though the data still seems to be aligning visually):
My heat map should have cells that align with the corresponding month on the y-axis.
There’s no bug in the tests (maybe some disagreement on month indices; JS dates use 0-11 and you can transform the data with callbacks as needed in D3). There are two related problems. First, you are using a linear scale when a band scale is more appropriate, so you have to align the ticks and labels manually and correctly. Second, your ticks for the months are at the top of each row in the heat map (between rows actually). I believe the tests look for them in the middle of the row (somewhere). You’ll notice on your visualization that the y-axis doesn’t actually touch the x-axis as well. So the tests could be failing because it does not detect a tick for December or because it is incorrectly assigning ambiguous ticks on boundaries to the wrong month.