D3 Bar Chart in React

JavaScript
1

I have been working on this challenge but my data stubbornly refuses to appear right side up, despite my following the lessons in the curriculum. Could someone take a look and see where I made my mistake? My graph is here:
https://codepen.io/macengr/pen/mddVvGG?editors=0110

2

Note that you have the following in the definition of your “y” axis in your svg.selectAll("rect") statement:

      .attr("y", (d, i) => {
            "y", (d, i) => {
                return yScale(d[1]);
             }
      })

You’ve duplicated the "y", (d, i) => { portion of this statement. (Oops!) You’ll want to get rid of the second function call. Remember to remove the complimentary closing curly bracket (}) too.

You’ll next notice that your y-axis labels are inverted. That can be corrected by inverting the values in your yScale range ("h - padding, padding" instead of “padding, h - padding”).

Remember D3 is using the topleft corner of the display area as the origin of it’s x and y referencing, even though you want your barchart to display the lowerleft corner of your chart as the origin for your chart. This can be made clearer by putting a console.log(yScale(d[1])) inside the above function call to see how the yScale values decrease as the charted y-value increases.

1 Like
3

I must have gone over that a dozen times, and I don’t know how I missed it. Thank you so much!