D3 Heat Map - Data Starts in the Wrong Month?

Don’t worry, @SpaniardDev, I got the y-axis this time! Actually, I passed all the tests, but I’m still confused:

Why do my temperature values begin in September, 1753 when the data we’re given starts in January, 1753? What did I mess up?

LOL. Good to know the y-axis is doing fine! :smiley:

I’ll have a look and see if I can find the bug.

I just reviewed your code. As usual when dealing with bugs, just a tiny little thing was giving you unexpected results. As much as 12 characters… LOL. That’s what I love about coding!


So, why is it showing bad results? Because you’re first building the legend inside your SVG element, like this:

// First you are creating a group for the legend.
const legend = svg.append("g")
  attr( ... );
// Then, you are creating 8 'rect' elements (the length of 'legendInfo' array) under that group.

And then, you’re building the actual heatmap by doing this:


So, inside the SVG element, you’re first adding a g with some rect elements. Then, you’re selecting all rect elements inside the svg element and creating as many as required. But, since you have already created 8 elements under the svg, the heatmap will create n - 8 new rect elements ( from January to August).

How to fix it

I’m sure you already know how to fix it. On line 164 change svg.selectAll('rect') to svg.append('g').selectAll('rect').

That’s it! Everything working great.

Happy coding!

1 Like

You’re my D3 Hero. That’s some impressive debugging; I don’t think I would ever have figured that out. I was focused on the fact that the data both started and ended in September…which was just a coincidence.

And since I’m on the subject of…you, I have to say that I love your coding style. It’s really easy to read the way you use whitespace and I think I’m gonna steal that style. :slight_smile:

Thanks! I think I have an obsession when it comes to organize and make things pretty lol

You’re not stealing, I’m giving it away to you! :smiley:

Good luck on the next D3 challenge!

1 Like