Visualize Data with Bar Chart failing tests.

[Maarondesigns]

Issue Description

Fails BarChartTests
Content 11: The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis. (TypeError: Cannot read property 'length' of null)
and
Tooltips 2: My tooltip should have a "data-date" property that corresponds to the "data-date" of the active area. (AssertionError: Tooltip's "data-date" property should be equal to the active area's "data-date" property: expected '1988-4-01' to equal '2005-07-01')

It should not be failing as far as I can tell. For the content test I am using the same dataset to generate the bar heights as well as axes. I set the tick lines of the y-axis to go all the way across as to visually see that the bar is aligned with the correct point on the axis. As for the tooltip's error, it gives seemingly random dates each time, but if I inspect with dev tools the data-date properties match.

Browser Information

• Browser Name, Version: Google Chrome, Version 67.0.3396.99 (Official Build) (64-bit)
• Operating System: Windows 10, 64 bit
• Mobile, Desktop, or Tablet: Asus Laptop

Your Code / Link to Your Pen

 https://codepen.io/maarondesigns/pen/OwywqY
 
 

[Maarondesigns]

Thanks for the quick response! I changed the y-axis to only be numbers and it still fails the test. I am having the same issue with the scatter plot exercise. Maybe it is because of the way I am generating the axis vs how the tests are expecting me to. Here's a link to the scatterplot one: https://codepen.io/maarondesigns/pen/ajdqLx

…

On Jul 16, 2018, at 01:29, Tracey Bushman ***@***.***> wrote: @Maarondesigns OK thank you. The tests check the bar's value against the respective ticks' innerText i.e. $1T, $2T etc. We will need to add an option in the tests to accommodate this labeling schema or otherwise improve the value / coordinate checks. If you wish to have your test pass before we get to this, use numbers only in your labels. I'll check on the tooltip, but your horizontal lines are no problem and the chart looks and works great. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Maarondesigns]

Thanks so much! I figured it out with the bar chart. It works if you change
the "height" and the "y" attribute.
(I also had to move the axis variables above the bar chart because the "yScale" variable didn't exist yet otherwise.)

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

.attr("height", (d, i) => h - padding - yScale(d))

The problem still persists with the yScale ticks having anything added to
them that isn't a number, but you guys said you're already on that.

Also, I had a .transition().duration(200) set on
the tooltip which threw off the test. When I changed those two things I pass all the tests!

I will see if I can do the same on the Scatterplot now.

[Maarondesigns]

I managed to get the dots on the scatterplot to be correct with

.attr("cy", (d, i) => yScale(minutes[i]))

however it is still failing the test with a message of
"Cannot read property 'length' of null"

[zrfrank]

----[update]--------
Strangely, after rewrite the code by removing all manual paddings, fixed the No.11 error message

TypeError: Cannot read property 'length' of null

Then, if the yaxis d3.linearScale reverse the range instead of domain, the test passed, i.e.

  const yAxisScale = d3.scaleLinear()
                        .domain([0, ymax])
                        .range([H, 0]);

But reverse domain will cause No.11 fail with message:

11. The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.

const yAxisScale = d3.scaleLinear()
                        .domain([ymax, 0])
                        .range([0, H]);

----[update]--------
I am having the same problem of no.11 reports can't read length, the code is attached below, notably that I've to workaround the 'data-date' attribute that use the input, i.e. res.data[i][0], that in the type of string. The test related to x-axis alignment would fail if I set the 'data-date' attribute to Date object.

The bugged version pen at
https://codepen.io/frankrui/pen/RBxjRW?editors=0010

To workaround x-axis alignment by changing Date object to string,

  svg
    .selectAll("rect")
    .data(dataSet)
    .enter()
    .append("rect")
    .attr("class", "bar")
    **.attr("data-date", (d,i)=>res.data[i][0])**here
    .attr("data-gdp", d=>d[1])
    .attr("x", (d, i) => xScale(d[0]))
    .attr("y", 0)
    .attr("width", wi)
    .attr("height", (d, i) => yScale(d[1]))
    .attr("transform", `scale(1,-1) translate(${ox},${-oy})`)
    .on("mouseover", (d, i)=>{
      tooltip.transition().style('opacity', 1.0);
      tooltip
        .html(`${d[0].getFullYear()} Q${mapM2Q[d[0].getMonth()]}\n\$${d[1]} Billion`)
        **.attr("data-date", res.data[i][0]);**here
    })

[doubleUTF]

I also have encountered issues with the tests returning null in the Scatterplot Project user story 8. In the _getSurroundingTicks() test function, it doesn't handle edge cases when one of the data points lands right on the tick, but there is no further tick on the edge. If I increase the domain of the axes to include another tick(albeit visually unnecessary), the test case passes as it finds the surrounding tick.

The test function can be found here: https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/utils/alignment-D3.js. I looked at it but not sure if I should be fixing if it's already been assigned and it's not an simple implementation. I will recommend that the tickIndex parameter should not be mutated to preserve the purity of the function and that there be a return value for edge cases like this.

FYI, my implementation if you wish. Altering the maxDate constant will yield changes of the tick that can therefore pass/fail the test (+10000 ms passes, +5000ms fails).

[ValeraS]

resolved