Visualize Data with a Bar Chart

Hello everyone, hope everything is fine!
i’m having some trouble getting the tests done in this callenge…
i am able to plot the data but cannot understand why i not getting the 7 ~ 11 tests done wrong, since the data is right…
Can someone take a look at my code?
Thanks!

“7. The bar elements’ “data-date” properties should match the order of the provided data”

“Bars should have date data in the same order as the provided data : expected ‘0.515988372092977’ to equal ‘1947-01-01’”

This is telling you that the value of the data-date attribute is not what the tests are expecting. The tests want it to be a date (such as 1947-01-01) and yours has a decimal number.

Even if your finished product looks correct you need to do what the tests are expecting in order to pass them.

oh, yes, thanks so much… i was in this code for so long, that missed it…
now only having trouble with 9 and 10…

If you want us to take a look at other issues, make sure you save your codepen so we can see your updated code.

Im saving, but still not figuring out these errors
“The heights of the bars should correspond to the data values : expected ‘Infinity’ to equal ‘3429.266’”

“x values don’t line up with x locations : expected false to be true
AssertionError: x values don’t line up with x locations : expected false to be true”

The problem is your y-axis domain:

    // Add Y axis
    var y = d3
      .scaleLinear()
      .domain([hashMap[0]["VALUE"], hashMap[hashMap.length - 1]["VALUE"]])
      .range([height, 0]);

The domain is from the smallest to the largest value, which yields a bar with height 0, which appears to confuse the failing test. Since there was a GDP that quarter, there really should be a visible bar for it.

but the domain isnt the x axis?
now im receiving this as response:
“The heights of the bars should correspond to the data values : expected ‘48.620’ to equal ‘48.562’
AssertionError: The heights of the bars should correspond to the data values : expected ‘48.620’ to equal ‘48.562’”

If we’re talking Cartesian coordinate system functions, then yes, the x-axis is typically the domain. In D3 however, scales are function (both in the programming and mathematical sense) generators that create functions that map a domain to a range. In this case, that’s a function that maps the GDP data to the bar height. Or in other words, it changes the y-axis values from one scale to another.

Looks like you’re getting closer from the error messages. Using a correct value for the lower bound of the y-axis domain does pass the failing test.

Oh thanks, im still learning D3 hehe
Yes, i’ve learn that if i put the variable height to 0, them all the tests pass but the graph disapears… why?

I’m not sure what you’re setting to 0. I checked the code again and the y-axis scale still has the same problem as earlier, you’ve just masked it using transforms of 5 to the vertical placements.

if i do height = 0 all tests get green, but the plot vanishes

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60};
    width = 800;
    height = 400; 

Yeah, in the end it was this, just setting it to zero made the tests full green!
Thank you !

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