D3 Heatmap Story # 10

Curriculum Help
2

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.