Data Visualization. Proj 1. I don't understand what they are asking or how they 're testing US #10

JavaScript
1

It says:

User Story #10: The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.

My code, that is actually working has something like:

  g.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
      .attr('class', 'bar')
      .attr('data-date', d=>d[0])
      .attr('data-gdp', d=>d[1])
      .attr('x', (d,i) => x(d[0]))
      .attr('y', d => y(d[1]))
      .attr('width', x.bandwidth())
      .attr('height', d => h - y(d[1]))

I know this works. The data-date gets its values from the corresponding record at d[0]. The bar are displayed at d[0], so how can’t they be “aligned”?

What does “aligned” means in this exercise?

Everything else is already working. Thanks.

2

The tests for this project are using JavaScript DOM methods to grab the appropriate elements from the SVG and comparing their coordinates to determine if they match the corresponding coordinates of the values on the axes. So your bar for January 1984 should have a horizontal coordinate that matches the horizontal coordinate for January 1984 on the x-axis, and so on.

Just because this code is correct, however, doesn’t mean the test will pass as the error could be anywhere else. The most likely causes are problems in the definition of your axis and scale, problems in the class and id attributes of the bars or other elements, problems with the format of the data used for the attributes or axes, or missing or extra elements.

You’ll need to post a link to your codepen (or similar) of the project (preferable) or post all the code.

3

This is the codepen: https://codepen.io/luisferfranco/pen/eYeBZWg?editors=1111

I know I can work better my x-axis, and that the tooltip is just a div that hides and unhides, but as they are, they cover the requirements. I may do them better, but right now my problem is with that “alignment”

The only “important” difference I see against the official answer is that they use a scaleLinear() and I use a scaleBand(). In fact, scaleBand() is a better answer since its the “official” way to construct bar charts, since you don’t have to calculate the X’s coordinates or the bar width since D3 makes the calcs for you.

4

The scale type doesn’t matter as long as the tests pass. The tests expect the left side of the bars to start at the correct position relative to the axis, so the GDP bar for 1985-07-01 needs its left side above the axis position for 1985-07-01. D3’s band scale centers the bands on ticks, since it’s supposed to be used for discrete or categorical data and that would be appropriate. But the tests are treating time as a continuous variable and expecting the bar over the whole time period (quarter) not centered on the start.

You can see this in the chart if you zoom in far enough; the bars overlap. The first bar also overlaps the y-axis. Since the code otherwise appears correct, I believe this is the problem. You should be able to verify this is the problem by either translating the bars to the right or by using a linear or time scale for the x-axis.

5

Yeah, that’s how I understood the instructions, and it’s how it works. The first data is in the first bar, second in the second and so on…

I realized that the scale doesn’t matter, I also tried scaleLinear.

I haven’t tried converting the data to date… I’m pretty lazy, thought a scaleLinear() would suffice… but that’s the only thing left to try… Thanks!

6

That may be necessary, but I would do it last. If the bars are overlapping each other and centered on the time position on the axis and not starting (with their left edge) on the time position, the tests will always fail.

7

Well… overlapping is never a problem if you use scaleBand() instead of scaleLinear() (as I did)

8

It can be a problem if you set your bandwidth wider than the ratio of the axis length divided by the number of bands (shouldn’t be a problem as long as bandwidth() is calculating like you think it is). Regardless, I just rechecked you posted codepen above and the bars still overlap. I zoomed to about 400% and looked at the first bar which overlaps the y-axis and other individual bars (look for neighbors with different heights) overlap but it’s hard to see unless you look at the tops and you can see the colors zig-zag.

All you can do is try something. Shrink the bar width, change scales, or muck with the dates, whatever it takes to get the tests passing.

9

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