# D3 Visualization Projects - Bar Chart **URL:** \ **Category:** Curriculum Help\ **Tags:** javascript\ **Created:** [November 26, 2020, 4:51pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385 "2020-11-26T16:51:34Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 26, 2020, 4:51pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/1 "2020-11-26T16:51:34Z")
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](https://gist.github.com/DragonOsman/79f3216bd3261bb6344afe84871c7766). Any help is appreciated. Thanks. ---
**Author:** ![sitek94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sitek94/32/336491_2.png) [@sitek94](https://forum.freecodecamp.org/u/sitek94)\ **Post date:** [November 26, 2020, 5:18pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/2 "2020-11-26T17:18:49Z")
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 😉 ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 26, 2020, 5:28pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/3 "2020-11-26T17:28:30Z")
Yeah, sorry about that. Here’s the [pen](https://codepen.io/DragonOsman/pen/ExgxXYo). ---
**Author:** ![sitek94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sitek94/32/336491_2.png) [@sitek94](https://forum.freecodecamp.org/u/sitek94)\ **Post date:** [November 26, 2020, 6:24pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/4 "2020-11-26T18:24:22Z")
It looks like there might be something wrong going on here: ```auto 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. ```auto console.log(xScale.domain()); ``` When calling `.domain()` without arguments it returns a copy of the scale’s current domain. ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 26, 2020, 6:28pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/5 "2020-11-26T18:28:14Z")
It says I have an invalid `Date`. So I have to fix the way the date is written? How? ---
**Author:** ![sitek94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sitek94/32/336491_2.png) [@sitek94](https://forum.freecodecamp.org/u/sitek94)\ **Post date:** [November 26, 2020, 6:56pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/6 "2020-11-26T18:56:30Z")
My guess is that invalid date is because `scaleLinear()` accepts Date Objects and you’re using strings, so you’ll have to convert that. ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 27, 2020, 2:42pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/7 "2020-11-27T14:42:19Z")
I got it like this now: [DragonOsman D3 Visualization Bar Chart Project (codepen.io)](https://codepen.io/DragonOsman/pen/ExgxXYo). 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. ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 27, 2020, 9:28pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/8 "2020-11-27T21:28:04Z")
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)](https://codepen.io/DragonOsman/pen/ExgxXYo). ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 28, 2020, 2:32pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/9 "2020-11-28T14:32:58Z")
Latest code: [DragonOsman D3 Visualization Bar Chart Project (codepen.io)](https://codepen.io/DragonOsman/pen/ExgxXYo) 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). ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 28, 2020, 6:07pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/10 "2020-11-28T18:07:40Z")
It’s almost fine now except the bars got reversed somehow. How do I fix this? Updated [pen](https://codepen.io/DragonOsman/pen/ExgxXYo) ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 29, 2020, 9:58am UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/11 "2020-11-29T09:58:10Z")
Could someone please help me out here? I’m stuck and not sure what to do here. ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [November 30, 2020, 8:38pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/12 "2020-11-30T20:38:02Z")
Here’s my latest updated code [pen](https://codepen.io/DragonOsman/pen/ExgxXYo). 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? ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [December 2, 2020, 4:40pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/13 "2020-12-02T16:40:27Z")
Updated the Pen. Here’s the [link](https://codepen.io/DragonOsman/pen/ExgxXYo) 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? ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [December 4, 2020, 12:31pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/14 "2020-12-04T12:31:50Z")
@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](https://codepen.io/DragonOsman/pen/ExgxXYo) again. Thanks in advance for any help. ---
**Author:** ![sitek94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sitek94/32/336491_2.png) [@sitek94](https://forum.freecodecamp.org/u/sitek94)\ **Post date:** [December 4, 2020, 5:02pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/15 "2020-12-04T17:02:40Z")
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. ```auto .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 😉 ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [December 4, 2020, 9:23pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/16 "2020-12-04T21:23:32Z")
@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)](https://codepen.io/DragonOsman/pen/ExgxXYo). 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.log`ged `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. ---
**Author:** ![sitek94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sitek94/32/336491_2.png) [@sitek94](https://forum.freecodecamp.org/u/sitek94)\ **Post date:** [December 4, 2020, 9:29pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/17 "2020-12-04T21:29:53Z")
Try reversing `height` and `y`. I think you should be calculating `height` based on svg height and padding. `y` should be just `yScale`. ```auto .attr("height", d => (svgHeight - yScale(d[1])) - padding) .attr("y", d => yScale(d[1])) ``` ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [December 4, 2020, 9:55pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/18 "2020-12-04T21:55:01Z")
@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: ```auto 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' ``` ---
**Author:** ![sitek94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sitek94/32/336491_2.png) [@sitek94](https://forum.freecodecamp.org/u/sitek94)\ **Post date:** [December 4, 2020, 10:12pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/19 "2020-12-04T22:12:47Z")
> [@DragonOsman](#): > > According to the lessons on FCC, `y` should be `svgHeight - barHeight - padding` . 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 😃 ---
**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\ **Post date:** [December 4, 2020, 10:21pm UTC](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385/20 "2020-12-04T22:21:14Z")
I fixed that error. Now I need to fix the similar error for the x-axis. Here’s [link](https://codepen.io/DragonOsman/pen/ExgxXYo) again. How do I fix the issue with the x-axis now? [Next page](https://forum.freecodecamp.org/t/d3-visualization-projects-bar-chart/432385.md?page=2)