Data Visualization Projects: Visualize Data with a Bar Chart (Test #10 fail)

Hello everybody,

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

I used 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 xAxis.

Just a simple appending of the xAxis, yAxis and all the rect to the svg, and some minor tweaks to the x and y attributes of each rect will do the trick.

Thanks for the advice anyways, I appreciate it!