D3 Heatmap Project

JavaScript
#1

Hi, everyone.

Here’s my current code on CodePen. I’m having trouble with getting the year and month values to line up correctly with the values on the x- and y-axes, respectively. Any help would be appreciated. Thanks.

How do I log them to the console, by the way?

#2

Logging is easy. Anywhere you have an arrow function, just expand it and drop in a console.log().

  .attr("data-month", d => {
    console.log(d);
    return d.month - 1
  })

You could also log your scale values that way too. Since it’s all JS anyway, you can log from anywhere, like over the values of your scale functions or whatever. It’s just usually more informative in D3 to log from these implied loops over all your data.

As far as alignment goes, currently it looks like you have 12 month ticks, but 13 rows (or the bottom row is doubled, or is twice the height of the others).

#3

How do I log the x and y values for the rects?

Any advice on how to fix the bottom row issue?

#4

@jeremy.a.gray The tests not passing right now are:

My heat map should have cells that align with the corresponding month on the y-axis.
month values don't line up with y locations : expected false to be true
AssertionError: month values don't line up with y locations : expected false to be true

My heat map should have cells that align with the corresponding year on the x-axis.
year values don't line up with x locations : expected false to be true
AssertionError: year values don't line up with x locations : expected false to be true

And the tooltip ones fail since I haven’t written any code to make a tooltip come up on mouseover.

Here’s the code again (updated).

#5

It worked when I did this for the x and y values and the height and width:

      .attr("x", d => xScale(d.year) + 1)
      .attr("y", d => yScale(d.month - 1))
      .attr("width", d => xScale.bandwidth(d.year))
      .attr("height", d => yScale.bandwidth(d.month - 1))

Now I need to get the tooltip working.

One more question, though: is it me or does it look like the top right-most rectangle is missing? Is it just lightest color or did I do something wrong?

#6

All the rectangles appear colored, but they keep going on the right off the end of the graph. There should be some blank rectangles as the data ends in September 2015. It looks like the rectangles and ticks are not aligned horizontally as well, as if you look at the 1760 tick and count backward, the rectangles indicate the year should be 1751 or 1752, depending on which side of the tick is the beginning, instead of 1753.

Since you’ve got a tool tip div already created, it should be fairly straightforward as there are many examples here on the forums. I think getting the tool tips operational would help find the remaining alignment problems faster than trying to debug the D3 code directly.

#7

Here’s my latest code; I got all of the tests passing now, but the tooltip isn’t appearing near the mouse cursor. So I need help on that now.

What am I missing? Any help is appreciated.

#8

I figured it out. I was targeting the tooltip through a class but hadn’t actually set that class on the tooltip. It started working once I fixed that.