Heat map project , not going well

Hi all.
I’m very unsure about this heatmap.
I found this site , that’s been somewhat helpful:

but it’s very hard to find decent tutorials .
so I’m struggling. I have this so far , but I think the y-axis is probably too short?


Also ,the rects aren’t showing up.

Any idea what is going on ?
Or maybe if you know some decent heatmap tutorial that could help with this project?


Ok, let me try this again.
How did everyone do this project without having a clue how to do it?
Because all the resources I find online are full finished code examples , or simple d3 examples that , that don’t seem to be the correct way to do this.

I’m very stuck. I’m 100% new to D3 so without any direction how to do this.

I just want to be done with this course!

Hope someone is willing to help , by insight or a link to a tutorial that helped them finish this project :slight_smile:

Looks like it’s progressing fairly well. It appears you have both axes correct, which gives many people trouble. I’m not trying to sound patronizing, but now I think you just start knocking out the issues the tests are raising. The title and description should be easy. You can add another div with id="legend" and you have a legend. Then add your legend rectangles to that div. You can add the data-month, data-year, and data-temp attributes in your addRects function. Log the data to see if the attributes are using the data you think they are if you have trouble. You can search around in the forums to see numerous examples of how to add tooltips there too. Create a color scale for the temps or pick some colors yourself and assign them to temp ranges and add that in addRects too, just make sure you color and label the legend correctly.

Save the alignment for last, although it may just work as you seem to have sensible scales selected for your axes.

Once you finish this project, recycle all the data processing, tooltips, axes, and scale stuff to use on the remaining D3 projects, because it’s all very similar. Good luck.

1 Like

Thanks Jeremy for the reply.
I know about the title etc , and the data-month etc attributes. , I have barely touched those. & I have been re-using my other d3 projects’ code :slight_smile:

I just wanted to see the rects ? Shouldn’t I see them after calling addRects(…)?

It’s good to hear the axes are correct at least.
It’s very hard to find decent tutorials I think , that are short and to the point , most are too complex or 2hour plus long videos .

Btw, do the axes in this codepen version look correct ? I want to use this one as I think the code is clearer:

new version codepen


In - depth d3 tutorial.

Thanks, but I don’t have the patience to watch a 17 hour video.
I prefer books than anyway, or online text tutorials.

I figured it was a width that was tiny, so that’s why the rects weren’t visible.
Hopefully I can figure it out from here.

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.

1 Like

I also thought the same when I first saw it. Started doing projects on my own and reading documentation (I am more of a self-learner).
That 17-hours could save me a lot of time.

Could someone please take another look at my codepen:


I’m having trouble appending the legend to the svg.
It’s a separate svg that I added in the html file. So it’s not part of the main svg, how do I make it part of the main svg ?

The code in question is in the addTitle_Legend() function.


It’s there and all the tests will pass (except the tooltips) if you just add the correct id to the legend. If you don’t like the arrangement of the divs, just use some CSS to rearrange things.

I guess you could also draw the legend on the same SVG canvas as the heatmap but that might be tricky.

Thanks for the reply :slight_smile:

I figured out how to fix this at least.

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