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
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:
- Things are actually misaligned due to miscalculation. This doesn’t seem to be the case.
- 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.
- 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)))
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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.