Why do no numbers appear on my x-axis?

[jaimeggb]

Hi all!

Why do no numbers appear on my x-axis?

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

[manjupillai16]

Hi @jaimeggb ,

On your xScale, scaleLinear is being used and the domain passed is 0 to max of timeArray which is a string causing the conflict.

const xScale = d3.scaleLinear()
  .domain([0, d3.max(timeArray)])

You could use scaleTime and also convert the max and min of timeArray to a date for it to work.

[jaimeggb]

it now works, thank you @manjupillai16 !

One other question regarding this matter: in line 36 of my code, why must I write ‘timeArray[i]’ for the code to work instead of just ‘d’? Aren’t ‘timeArray[i]’ and ‘d’ meant to be the same exact thing?

line 36: .attr("x", (d, i) => xScale(new Date(timeArray[i])))

For example, for the y axis I can use either ‘d’ or ‘gdpArray[i]’, they both work:

.attr("y", (d, i) => yScale(gdpArray[i]))    

and
.attr(“y”, (d, i) => yScale(d))
both work

[manjupillai16]

That’s coz you’re passing the gdpArray as the dataset to the svg

svg.selectAll("rect")
    .data(gdpArray)   <--  change this to timeArray and the x co-ordinate will work with d
    .enter()
    .append("rect")