I need some help with the D3js Bar Chart project – for now mainly the ticks on the axes.
The ticks on the y-axis show up but the ones on the x-axis don’t. I don’t know how to create ticks myself. Why aren’t the ones on the x-axis showing up? Here’s my current code Gist.
Any help is appreciated. Thanks.
It would be better if you shared your code through codepen for example. It will be easier for others to review your code and check what’s going on 
Yeah, sorry about that. Here’s the pen.
It looks like there might be something wrong going on here:
const xScale = d3.scaleTime();
xScale.domain([data.data[0][0], data.data[data.data.length - 1][0]]);
xScale.range([padding, svgWidth - padding]);
I’d check how does the x scale domain actually look like after the computations.
console.log(xScale.domain());
When calling .domain() without arguments it returns a copy of the scale’s current domain.
It says I have an invalid Date. So I have to fix the way the date is written? How?
My guess is that invalid date is because scaleLinear() accepts Date Objects and you’re using strings, so you’ll have to convert that.
I got it like this now: DragonOsman D3 Visualization Bar Chart Project (codepen.io).
How do I add and label the ticks?
For the dates on the x-axis, maybe it’d be good to create the labels as strings made from extracting the year, month and day from the Date object into a string for each label. And for the money amounts on the y-axis, I could have both big and small ticks; big ones going from 0 to 19000, and small ones showing the actual values. I need help on how to do this, if it’s a good idea to do it this way. Thanks.
I got both axes with the ticks, but I had to make the width of the SVG element 13000 pixels to get the dates and ticks to fit correctly. I still can’t figure out how to tick labels on the y-axis to map to the money amounts exactly. Do I use tickFormat to make the tick labels?
This is what I have currently: DragonOsman D3 Visualization Bar Chart Project (codepen.io).
Latest code: DragonOsman D3 Visualization Bar Chart Project (codepen.io)
I need help with getting each data-date attribute and its corresponding bar element to align with the corresponding value on the x-axis. And the bar height also doesn’t align well with the y axis (although the test that says Each bar element's height should accurately represent the data's corresponding GDP passes).
It’s almost fine now except the bars got reversed somehow. How do I fix this? Updated pen
Could someone please help me out here? I’m stuck and not sure what to do here.
Here’s my latest updated code pen. I need help with calculating the x coordinate values for the bars. I guess I did something wrong that caused just i * 25 (or in this case i * (barWidth + spaceOffset)) to not work.
Also, why won’t just doing yScale(d[1]) for the height of the bar work? It was reversing the bar height orders when I tried it, where the bar that should’ve appeared for the last date on the x-axis appeared for the first and vice versa, so I tried reciprocating it (1 / yScale(d[1])) but that also didn’t work.
So yeah, what am I doing wrong here?
Updated the Pen. Here’s the link again.
I’m having a hard time getting the bars to align with the values on the x- and y-axes. I also don’t get why the x-axis’ tick labels don’t show the actual year numbers. Could someone please help me out here?
@sitek94 Could you help me out here, please? If you have the time. I feel close but there are still problems there with aligning the bars’ values with the values on the x- and y-axes. I’ve tried a number of things but nothing’s really worked. And I’ve probably screwed up the definition of my yScale variable since just doing yScale(d[1]) for the bar height doesn’t work.
Here’s the CodePen link again. Thanks in advance for any help.
You should definitely use yScale to compute height and y.
d[1] / 38 is just too arbitrary in my opinion just by looking at it.
.attr("y", d => (svgHeight - (d[1] / 38)) - padding)
.attr("height", d => d[1] / 38)
The whole point of using scales is to avoid calculating these values yourself.
The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.
“y values don’t line up with y locations”
I think this error is a result of everything I said. The values don’t line up because you use yScale to calculate them for y-axis but in the bar chart you use this formula: d[1] / 38.
Try replacing the formula you use with yScale and we’ll move on from there 
@sitek94 I did use yScale(d[i]) before but like I said, it didn’t work right. The bar chart becomes reversed for some reason. I’ll show you: DragonOsman D3 Visualization Bar Chart Project (codepen.io).
The x-axis is also messed up. As you can see, the test for the bar values aligning with the x-axis doesn’t pass either. The stuff appearing on the ticks is also wrong. I console.logged dates[0] and found that it’s the proper year number of 1947. But for some reason, the tick values are .950, .955, and etc.
Try reversing height and y. I think you should be calculating height based on svg height and padding. y should be just yScale.
.attr("height", d => (svgHeight - yScale(d[1])) - padding)
.attr("y", d => yScale(d[1]))
@sitek94 According to the lessons on FCC, y should be svgHeight - barHeight - padding.
Reversing it like what you suggested made test number 11 in “Content” pass, but it also made test number 9 fail. Test 9 says:
Each bar element's height should accurately represent the data's corresponding GDP
The heights of the bars should correspond to the data values : expected 'Infinity' to equal '2857.721'
Which lesson? If you can link that I’ll try to compare that lesson with your code and see what’s the difference. Just remember that I’m not a d3 expert so I may be wrong 
Anyway the other error is caused by Infinity. I’ve found that the first rect in the chart has height 0 and probably that’s where this infinity comes from.
This is because min value in your domain is min value of the dataset so the first rect is going to have height 0. I think it’d be more reasonable for a bar chart to have a domain that starts at 0.
At least that’s how I fixed that error
I fixed that error. Now I need to fix the similar error for the x-axis.
Here’s link again.
How do I fix the issue with the x-axis now?