Can you help with my D3 Bar Chart project ? test #10 #11

Tell us what’s happening:
Describe your issue in detail here.

It’s the first D3 project about drawing Bar Chart for US GDP. I can’t find any error logically.
I’m failing #10 #11 and sometimes tooltip #2 but it passes some other times. How fun …

So for #10 it says my data is not corrected aligned among : date-data / xAxis / x
To me this is impossible somehow because date-data is string ‘1947-01-01’ and 2 other is Date form. However it doesn’t seem like the test is checking for this.

The test seems to check for alignment. And my code fails.

I have checked many other posts here about the test#10 (I didn’t even started to tackle #11 yet) and have implemented same logics like theirs but mine fails. if I simply copy the whole page to mine, then it passes.

I have checked other parts of my codes that’s not related to x-Axis align issue. but I couldn’t find anything that would cause this problem.

Please take a look at my codepen below

And FCC project page :

Any feed back would be greatly appreciated !

Thank you !

  **Your code so far**

let isCuteMixin = function(obj) {
obj.isCute = function() {
  return true;
};
};
let singMixin = function(obj) {
obj.sing = function() {
  console.log("Singing to an awesome tune");
};
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36.

Challenge: Use an IIFE to Create a Module

Link to the challenge:

Cannot say anything about aligning, as for tooltip seems like +d[1] without space after + is not enterpreted as concatenation, add space or use template literal

hi Anne , I never knew that just wow… really I was doing it all this time. thank you !

It actually did work fine when I changed it back and forth several hours ago, before I changed it the numbers in inspector didn’t look anything they should have.
Now i see it behaves weird, “0” in month disapears sometimes,

expected ‘1953-4-01’ to equal ‘1953-04-01’
etc

I didn’t help you much , sorry
Hope someone will explain it all, I never got the answer for your first question #bookmarked :slight_smile:

Hi Anne, thank you for showing me some hope. There are more things I need to learn and figuring out how to debug should be one of them. I still don’t know how to use inspector. I will look into them. So it’s something new I haven’t thought about. 0 in month ! thank you !

There are two problems. First:

    const svg = d3.select('body')
        .append('svg')
        .attr('width', w + 'px')
        .attr('height', h + 'px')
        .attr('class', 'bar');

You’ve given the whole SVG element the class of bar. The tests for this project expect only the bars to have that class and so they try to test your entire SVG with the bar tests and fail. Second:

        .on('mouseover', (d) => {
            tooltip
                .transition()
                ...
        .on('mouseout', (d) => {
            tooltip
                .transition()
                ...

Transitions cause the tooltip tests to fail almost every time.

OMG holy… omg… Jeremy . Thank you !!
I have spent past 2 days thinking about this… my eyes were literally popping out. You saved my life :smiley:

wow, good job, jeremy.a.gray, thx!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.