yScale not working as I imagined

[jaimeggb]

Hi all!

Does anyone know why my yScale isn’t within the y-axis? There must be wrong line of code, but I can’t figure out which one, as I followed the free code camp tutorials code as closely as possible.

Thanks for your time

Jaime

D3 bar chart

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

freeCodeCamp.org

[jeremy.a.gray]

Right here:

    .attr("height", (d, i) => d)

You’re not calling yScale(d) (which won’t fix all the problems). Plus, yScale is defined after this in the code and needs to be before this. The scale functions like d3.scaleLinear() return a function that you have to call with data to use; they do not cause data to be scaled automatically on some axis.

There are some other recent posts about similar problems you may want to read.

[jaimeggb]

Hi jeremy

Thanks for your response

I changed some code and got closer, but still can’t figure it out.

At the moment my chart seems to be sort of inverted (it should be an ascending chart but it shows a descending one)

Any help would be much appreciated

Thanks for your time

Jaime

D3 bar chart

[jaimeggb]

Figured it out! This was the code I needed:

//Create and place bars
svg.selectAll(“rect”)
.data(gdpArray)
.enter()
.append(“rect”)
.attr(“x”, (d, i) => i + padding)
.attr(“y”, (d, i) => yScale(d))
.attr(“width”, 0.5)
.attr(“height”, (d, i) => h - padding - yScale(d))
.attr(“fill”, “navy”)
.attr(“class”, “bar”)