yScale not working as I imagined

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


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:

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.

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


Figured it out! This was the code I needed:

//Create and place bars
.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”)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.