While completing the first Data Visualization project - “Visualize Data with a Bar Chart” - I initially had a lot of issues getting the tests to pass, even though I had fulfilled all the user stories properly. I found that not everything was explained in FCC’s curriculum. So, I just wanted to share a couple of tips/pointers for anyone out there who might be pulling their hair out trying to get their tests to pass.
-
Don’t use scaleLinear() for the x-axis. While it’s the only scale that the FCC curriculum teaches, and you can get it to functionally work by formatting the tick marks and labels (which I spent time doing), unfortunately, the tests wont pass if you try it. You want to use scaleTime(). Here is a short guide: D3.js scaleTime() Function - GeeksforGeeks But the gist is that the domain needs an array of two Date objects (the earliest date in your dataset and latest date in your dataset). I don’t recall if the JavaScript DS&A covers date objects (I don’t think it does), but you can Google “javascript date constructor” to find a tutorial.
-
Ignore the FCC “Add a Tooltip to a D3 Element” challenge - this method will work fine, but the tests will fail. Instead you need to create a tooltip like a modal. I don’t think FCC covers modals at all, but there are plenty of tutorials out there. In short, you want to create a div element that appears when the bars are hovered over. And I just passed all the info the modal needs via data attributes.
-
You can’t use standard JavaScript event handlers to make the tooltip modal appear/disappear or the tests will fail. You need to use D3’s built-in .on() method. Again, this isn’t explained at all in the FCC curriculum, but it’s pretty simple. It just takes two parameters - the event and a function - the same as the standard JavaScript .addEventListener() method.
I hope that helps anyone. Here is a link to my completed Bar Chart project, if anyone is still confused and wants to take a look: https://codepen.io/andytburke/full/OJEyJGd