D3 Visualization Projects - Bar Chart

JavaScript
21

What have you tried so far to fix the x-axis?

22

My code is right there in the pen. Do I need have the domain for xScale start at 0 too, by the way?

23

Yeah, I know the code is there. But what have you tried to do to solve the issue. I’m not going to just tell you what’s wrong :smiley:

This is what I wrote before:

Have you tried for example that?

24

@sitek94 console.log(xScale.domain()) gives this:

Array(2)
0: Thu Jan 01 1970 05:00:01 GMT+0500 (Pakistan Standard Time) {}
1: Thu Jan 01 1970 05:00:02 GMT+0500 (Pakistan Standard Time) {}
length: 2
__proto__: Array(0)

Why are there empty braces? Are those empty objects?

25

@sitek94 Did you read my last message?

I said that trying console.log(xScale.domain()) gives this result:

 Array(2)
0: Thu Jan 01 1970 05:00:01 GMT+0500 (Pakistan Standard Time) {}
1: Thu Jan 01 1970 05:00:02 GMT+0500 (Pakistan Standard Time) {}
length: 2
__proto__: Array(0)

Why are there empty braces? Are those empty objects?

26

I got it up to this: DragonOsman D3 Visualization Bar Chart Project (codepen.io).

Why is there a space between the last two bars, though?

I got the code I used on lines 33, 34 and 51 from here: https://codepen.io/freeCodeCamp/full/GrZVaM . It’s the example project. I feel kind of guilty for doing this but I didn’t have a choice. Though I don’t really understand the reason for adding 3 to xMax.getMonth() .

Can anyone help me fix the issue with that space between the last two bars?

27

This is what I have now: DragonOsman D3 Visualization Bar Chart Project (codepen.io).

I switched to plain JavaScript from TypeScript because the former gives an error on type unknown. There’s still a space between the last two bars. Could someone please help me out here? Thanks.

28

I’m having a problem with the tooltip now. Here’s the updated Pen.

How do I have the tooltip appear near the bar that the mouseover event was triggered on, relative to the mouse event coordinates? I tried to use e.pageX and e.pageY for that, but what did I do wrong there? And to change the background, do I just do style("background", ...) and put a color as the second argument?

29

I fixed it. I had forgotten that you need absolute positioning for it to work.