D3 Heat Map - y axis tests keep failing

Hello there,

Could someone please tell me what I’m doing wrong with my y axis/cells for them to keep failing user tests 9 and 11? This is my codepen .

Hope you can help and thank you for taking a look at it :slight_smile:

    let scaleY = d3.scaleLinear()
                   .domain([1, 13])
                   .range([50,650]);

Twelve months, perhaps? That’s what this error message

AssertionError: Y axis labels should contain full month names (example: January): expected [ Array(12) ] to include ' '

is trying very awkwardly to tell you: there is a blank month tick on your graph. Just changing the scale doesn’t fix everything as it then leaves gaps in the rows and hides your x-axis.

1 Like

Thank you for your response! Like you said I tried changing the domain of the y axis from 1 to 13 to 1 to 12 but it ended up spilling into my x axis and hiding the x axis.

Though at this point the user tests were all successful. Still not sure what to change to make the user tests succeed and also make it look good.

Well, 12 months is still the correct code regardless of looks. The cause is the blank “month” that was included that actually sits on the x-axis. Since the origin of a D3 SVG canvas is the top-left, you were drawing your 12 rows with their heights down, with no 13th row to cover the axis. When you correct the month index, that blank row is gone and the 12th row draws from December down and covers the x-axis. To fix it, you need to make your y-scale calculate the top corner correctly for the row height, graph height/x-axis position, and SVG height (currently that would need to be one row height higher). You’ll also need to move the y-axis ticks so that they are inline with their respective rows. You could also investigate D3’s band scale for your y-axis although linear can be made to work as well.

1 Like

Thank you for your response, I think I now understand what you were saying previously. Hope you have a good day! :slight_smile:

I do have one small issue tho, how do I extend the y axis so it reaches the origin of the x axis instead of stopping at December? Is there something that allows me to simply extned the y axis by a certain length? Or should I simply place a line in that position? I’d like to do this for the x axis too if posisble

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.