Heat Map months not aligning with map [SOLVED]

1

My y-axis display are labeled correctly, however they’re not lining up with the map data. I’m not sure how to fix it. Can someone shed some light on the problem or give some me advice?

Link to project: https://codepen.io/Ozubergs/pen/bOzQVx?editors=0010

2

Don’t really know much about D3 but it looks to me like it is caused by the plus 1 in setUTCMonth.

date.setUTCMonth(month + 1);

You say your Y labels are correct but looking at the example project, it has January at the top and December on the bottom.

3

Substract one from .attr('y', (d, i) => y(d.month)) and .attr('data-month', (d) => d.month)

 var cell = svg.append('g')
    .attr('transform', 'translate(' + (margin.left + 1) + ', ' + (margin.top + 0.5) + ')')
    .selectAll('rect')
    .data(dataset)
    .enter().append('rect')
    .attr('x', (d, i) => x(d.year))
    .attr('y', (d, i) => y(d.month - 1)) <------ 
    .attr('width', (d, i) => x.bandwidth())
    .attr('height', (d, i) => y.bandwidth())
    .attr('class', 'cell')
    .attr('data-year', (d) => d.year)
    .attr('data-month', (d) => d.month - 1) <------
    .attr('data-temp', (d) => data.baseTemperature + d.variance)
    .style('fill', (d, i) => threshold(data.baseTemperature + d.variance))
1 Like
4

Thanks for the help. Your solution actually passes all the test. However, y-axis still does not correspond with the data-month. It’s weird…

5

change this value to :

date.setUTCMonth(month + 2);
1 Like
6

Now it does not pass test #9

1 Like
7

Sorry about that, Guess I should have tested it! :confused:. I forked it and the tests are passing now and looks like everything is correct.

all changes should be marked with //----changed

1 Like
8

Wow, thanks a lot. You’re smart

1 Like