D3 Heatmap Story # 10

[mcmusire]

So I’ve been working on the heatmap assignment on the d3 section, but for the life of me cannot figure out what is wrong with the story #10. When I visually compare the x value to the tick marks they look aligned to me, but will not pass the test.

codepen : https://codepen.io/mcmusire/full/OJmZZaK

[jeremy.a.gray]

You can actually log the x-coordinates from here:

		.attr('x', (d) => xScale(d.year))

by changing your arrow function to log the scaled value before returning it if you’re curious. I did and they aligned with the tick values from the browser console, so they are aligned.

This error normally has three causes:

1. Things are actually misaligned due to miscalculation. This doesn’t seem to be the case.
2. There are extra items that are unexpected, like extra ticks or extra rect.cell's. I can’t find any looking at the graph or the code.
3. Using a scale other than the one the tests expect and not handling every detail. This doesn’t appear to be the problem either as a linear scale should work as long as you handle the time details and it seems you have.

So, the second cause looks like the most likely. I did some debugging like here, and found that you have created x-axis ticks for every month in every tick year, which confirms the extra ticks problem. The code responsible is

	const xAxis = d3.axisBottom(xScale)
		.tickValues(mappedYears.filter((data) => (data % 10 === 0)))
		.tickFormat(d3.format('d'));

which matches as long as the year is divisible by ten, which it is for every month in the year. Fixing the code does result in passing the final test.

[mcmusire]

Jeremy senpai, You have truly given me a big relief. I had been going hard at this problem solo for a solid week robbing me of sleep and triggering my anxiety pretty bad. I appreciate your knowledge and expertise so very much.

How can i repay you this grand gesture? I finally fixed my code by adding to the filter a second condition to eliminate duplicates. That was a new lesson i have engraved forever.