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?
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!
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.
legend.selectAll("rect")
.data(legendInfo)
.enter()
.append("rect")
And then, you’re building the actual heatmap by doing this:
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
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).
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!
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.
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!
Good luck on the next D3 challenge!