There’s not a lot of documentation, especially introductory. Most of what I’ve seen were showcase projects people posted. I also dislike long, slowly paced videos. Plus, most of the documentation around is from old D3 versions (much was v3 last I did some research) and I have since only used the official API documentation at the D3 project on github, but as others have noted, it’s not for the faint of heart.
The axes and the rectangles both look right, but it’s hard to tell if all the years’ rectangles are there without color. The shape appears correct (there’s the missing three on the last year). That’s the hard part with this project: it’s difficult to look and see if it’s correct until almost the end. Your rects are being positioned with their top left corners on the month on the y-axis and are hanging down so that now the December row obscures the x-axis. You may need to adjust the length of the y-axis so all rows fit and you may have to center the rows on the month to pass the alignment test as well (can’t remember exactly). I think you can do this with an ordinal scale like you have, but you may want to look at a band scale if it gets to difficult.
When you have problems with something not displaying, that usually means there’s an error (and D3 doesn’t tell you). What I usually do at that point, if I can’t spot it in the code, is to start with the simplest possible version of what I want to draw and verify that I can draw it before progressing. So for a legend, I would draw the div, then an axis, then a single rectangle, then position the rectangle, then try to draw all the rectangles for the scale, then assign colors, etc.