Visualize Data with a Bar Chart

JavaScript
1

Tell us what’s happening:
Unable to Pass these Test Cases didn’t understand why.
9. Each bar element’s height should accurately represent the data’s corresponding GDP
10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
11. The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.

Your code so far

Screenshot%20from%202018-06-19%2001-49-52
Screenshot%20from%202018-06-19%2001-49-521366×768 39.7 KB

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36.

Link to the challenge:

2

Could you put your code somewhere we could view/run/edit it (like codepen or jsfiddle or something)?

One obvious error is the gap in the graph-- either you are laying out the dates with a gap or there was a year the US had $0 GDP (the economy was bad 10-11 years ago, but not THAT bad) :slight_smile:

3

https://prakhar.info/fcc/d3js/

4

OK, I didn’t find the problem, but this may be helpful: I looked at the error message in more detail:

AssertionError: The heights of the bars should correspond to the data values : expected ‘Infinity’ to equal '3190.015’AssertionError@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:10986:14

To me, this means the test expects 3190.015 to be one of the GDPs. However, neither view-source:https://prakhar.info/fcc/d3js/dataset/master_GDP-data.json (your dataset) nor https://fred.stlouisfed.org/data/GDP.txt have this number, so I’m stumped.

I did google “3190.015 gdp” (no quotes) to see if there was a GDP file with 3190.015 in it, but apparently not.

5

So the next way to complete this problem set.

6

Have you figured out the issue yet?

7

I had a very similar error. It resolved when I changed the yScale doman to start at 0.

  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(ds, d => d[1])])
    .range([h - p, p]);
3 Likes
8

Yes! I was debugging the same issue and I believe the idea is that unlike the x-axis, the y-axis domain should not be scaled using d3.min() from the dataset because you want the vertical axis to start from $0. If you use the min GDP value as the low domain for the graph, it will look like the GDP was 0 in 1947 like in the graph above. Cheers!