I have been stuck at this project for quite some time. I have gotten 13 out of the 14 tests to work, except for test #10 ( The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.).
I have searched high and low for various sorts of solutions, but nothing helped at all. My code keeps failing test #10. I am at a complete loss right now, and have zero idea of why I keep failing that test.
I would greatly appreciate any kind soul that can have a look at my code and provide me advice on how to pass test #10 and this entire project.
This is the link to the repository that contains my code so far (GitHub - Fe-56/visualize-data-with-a-bar-chart). It is a React project.
You need to look into using
d3.timeParse() for your dates. You’re using a mix of raw data from the GDP dataset and localized
Date() objects, so at the beginning of each year the data will say (for 1947) 1947 for the year but a
Date() object for that datum will be in 1946 for half the time zones, and then fail the test. You can also see this if you mouse over the first bar and look at the tooltip. It says ‘1946 Q1.’ You’ll also note that your tooltip always says ‘Q1’ for similar reasons.
Additionally, it’s much easier for people to debug these projects if they are on codepen or the like since people are more likely to follow a link than clone a repo, install a CRA, and run it locally.
Hello, thanks for the response.
As suggested and for easier reference, I have written my code into a codepen: https://codepen.io/fe-56/pen/bGMMOrJ
d3.utcParse() and not
d3.timeParse() as it kept minus-ing a day off the generated date objects.
Despite that, I am still not able to pass test #10.
Would greatly appreciate any help or advice!
I think I know the reason why. It seems like I was originally appending the
yAxis to the
xAxis, and then all the
rect to the
Just a simple appending of the
yAxis and all the
rect to the
svg, and some minor tweaks to the
y attributes of each
rect will do the trick.
Thanks for the advice anyways, I appreciate it!