D3JS Heat Map cells doesn't align with month

Tell us what’s happening:
Hey, so I used to struggle a lot with d3js and back then just discarded that one certification and moved on. Now I’m back trying and I’ve finished (almost?) the Heat Map challenge, however it says it does not align on the y-axis.
I can get that test to complete by letting the data-year attribute be directly taken from the data input (range: 1-12), but that means it fails the test that all data must be in the range 0-11. Thus why I say d => d.month - 1 whenever I set the attribute for a cell. But for some reason that means the other test starts failing (saying that my cells do not align). I’ve tried to see if it was something about pixels - i.e. moving the cells 1-5 pixels up or down but neither have helped.
I’ve tried using my xScale and yScale to calculate the x- and y-attributes but that just makes all my data disappear :confused:

Let me know if I need to clarify something further.
I hope someone will be able to help me!

Thank you in advance,

  • Andreas

Your code so far

Your browser information:

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

Challenge: Visualize Data with a Heat Map

Link to the challenge:

I tried to edit a tiny bit, as I saw another suggestion on here to make months index-zero-based. I managed to get all tests to pass, BUT, on the condition that my graph is distorted such that it actually “starts” higher than the graph… (And thus goes over the title itself).

So definitely not how it’s supposed to be submitted, but I’ve tried a few different changes. My issue is, either my “data-month” is not within the range of the data (data makes months from 1-12 but the testing environment expects 0-11) and thus doesn’t pass tests. Otherwise my cells don’t match the corresponding month on the y-axis (according to the test). The difference between these two scenarios are wether or not I say -1 when making the .attr("data-month", d => d.month - 1) on the cells.
Last alternative is to pass all tests but then it visually is definitely wrong as my bars exceeds the limits of the chart/y-axis. I achieve this result by using the -1 on the data-month attribute like above, and then changing the y attribute to not use the yScale but instead the code .attr("y", d => (d.month - 2) * barHeight)

The last alternative passes all tests BUT makes the graph look as below:

I hope any one of you have a good idea on how to solve this, because I am very much stuck at this point… :frowning:

Thanks in advance,

  • Andreas

Okay, so I found a solution that I am sort of happy about.

I changed the domain so that the ticks are approx. midway on each month on the y-axis. Basically I made the scale go from december 15th to december 15th next year instead of 1st of January to 31st of december. It seems the tick is not exactly in the middle but it is close enough for me and it passes the tests. If anyone have a solution that doesn’t require to change where the ticks are, I’d love to hear!

Anyway, I wanted to put this solution up for anyone else who might stumble upon this topic when doing the challenge themselves.

Time scales are continuous while month names are really labels, which are not continuous variables. A band scale works really well for the months axis.

1 Like

A band scale, would that require to hardcore the month names in an array?
Like this:

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

That’s one way. You could also use a tickFormat() on the dates to get the month names from the domain.

Ah certainly. Thanks for the advise! :smiley: