Visualize Data with a Heat Map

JavaScript
1

Okay, I finally got it figured out.

The test now passes on this fork: https://codepen.io/Ahimsaka/pen/Wabvdy

However, it still fails on this fork: https://codepen.io/Ahimsaka/pen/OBPVWg

If the moderators would like to close this, they’re welcome to do so, but if anyone wanted to help me figure out why what I did worked it might be helpful for future campers working on this project.

There may be a couple of other minor differences between the two forks, but the main difference is this:

On the passing fork, I change the month input in the data to d.month - 1, set the yScale domain based on [0,…11], and then calculate the output text based on month + 1.

On the failing fork, I left the data alone, set the yScale domain based on [1,…12], and then calculate the output text based on month.

The output shown on screen for both versions is completely identical. The bars are the same size and mapped to the same locations and matched to the same month names. I suspect the confusion lies in the ‘month’ variable used to set the tick text.

The month variable is called via an inline function, so I think it may just be taking the tickValue for each tick, which I guess is defaulted to the Domain input? But the d3 documentation on github refers to tickValue as though it were the literal text shown on the tick, and gives very little instruction for manipulating it. When I try setting tickValues to [0,…11] on the failing test it doesn’t make any difference.

leaving original request up to help catch search terms in case we get some answers

Hey all,

I’m working on “Visualize Data with a Heat Map” and have a test I’ve been trying to make pass for most of two days now.

I’m failing the test for User Story #9: My heat map should have cells that align with the corresponding month on the y-axis. It is failing with this code:

var e=document.querySelector("#y-axis"),t=document.querySelectorAll(“rect.cell”),r=e.querySelectorAll(".tick");s.assert.isTrue(Y(t,r,“y”,“data-month”,“month”,“center”),"month values don’t line up with y locations ")

If you hover over the cells, a title displays the d.month value for each cell. The values match the months on the y-axis.

The sample site provided by the test uses deprecated d3 code, so it’s harder than usual to compare. I think the problem might have something to do with where scaleBand and I placed the y-axis ticks? I’m not really able to tell from the test code what it’s checking. Is ‘month’ an attribute that the test instructions fail to ask us to assign?

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

1 Like
2

Is ‘bumping’ a thing on this board?

Maybe a waste of my time since I’ve gotten through it, but it seems like a problem that could come up again for others.

3

Bump. I’m having an issue with test 9 as well. Everything else has passed and the cells line up with the month. Here is my Heat Map

4

It looks like your code is setting the yScale based on the numeric month value that comes with the data. I still don’t know why this made a difference, but for me I couldn’t pass the test until I altered the month value passed in with the data to d.month - 1 (creating a 0-11 range) and then set the Y scale based on that. In your code I think that would be:

// set up y
const yValue = (d) => d.month - 1;
const yScale = d3.scaleLinear().range([0,height]).domain([0,11]);

Doing that (for me) didn’t change the output in any distinguishable way, but it made the test pass.

5

Thanks Ahimsaka. I updated my yValue and domain as you suggested. I still can’t seem to pass the test. It’s hard to understand exactly what the test is looking for.

6

I really hope that someone a little more advanced than me comes along soon and gives the expert opinion, but if that doesn’t happen it may be this.

You’re using d3.scaleLinear for your yScale. Since that generates a linear scale, it’s possible that the test is checking in the wrong spot and coming up with a float rather than an int.

You might try d3.scaleBand instead. I used that for mine but didn’t notice the difference earlier.

const yScale = d3.scaleBand()
.domain([0,1,2,3,4,5,6,7,8,9,10,11])
.range([height, 0]);

This sets the y value for the entire height of each band to the appropriate whole number, rather than a linear scale.

7

It was the fact that the y-axis was hidden. I had the months without the ticks on the y-axis. When I removed display:none in the css, the test passed. :slight_smile: