Data Visualization Projects - Visualize Data with a Bar Chart: Test #10

JavaScript
1

Tell us what’s happening:
I am lost on test #10. I don’t know how to space out my bars so that the are positioned correctly on the x-axis.

Your code so far

Your browser information:

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

Challenge: Data Visualization Projects - Visualize Data with a Bar Chart

Link to the challenge:

2

Log your x attribute for your bars like

    bars
      .append("rect")
      ...
      .attr("x", (d) => {
        console.log(`datum: ${d[0]} xScale: ${xScale(d[0])}`);
        return xScale(d[0]);
      })

and you’ll get output like

datum: 1990-10-01 xScale: undefined

So you are drawing all your rects over each other. The documentation indicates that the domain for a band scale must be continuous and numeric and dates are not those things. You can use a linear scale and a set width bar or try using an ordinal scale instead of a band scale. If you use a fixed with bar and linear (time) scale, then it’s up to you to insure that the bars are the right width to appear in the correct places on the x-axis.

3

I changed xScale to .scaleOrdinal(), and it is no longer undefined, but the bars are still not displaying correctly.

4

I ended up using scaleTime because I saw some one else do it lol

5

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