Visualize Data with a Bar Chart Tests

Visualize Data with a Bar Chart Tests
0

#1

Here is my Bar Chart Project so far.

I cannot pass test 10 no matter how precisely I align the bars in the chart. In this iteration, they all seem to be exactly where they must. There are exactly 20 bars between each 5-year tick mark, and each of those displays a tool-tip with the correct placement. The bar just to the right of the 1950 tick says ‘1950-01-01’, etc. I don’t understand what this test is testing for, I think. The error says ‘d is null.’

On the last test, the error I get is:
'expected ‘1947-01-01’ to equal '1964-01-01

Except that second number changes everytime I rerun the test. Again, the tool-tip display data for each date seems to be correct. What am I missing about how this last test works?


#2

Glad i’m not the only one :stuck_out_tongue:
https://codepen.io/danilonovakovic/full/oMRdZR/ i think i have similar problem, but i feel like
i made mistake somewhere in calculation although i don’t know what it is. :cry:
edit: + my tooltip also is for some reason behind chart… xD


#3

This is first graph and I studied for week all manuals when I did that.

  let year = d[0].substring(0, 4);
        let month = d[0].substring(5, 7);
        return 30 + xScale(i + 1947) / 4;

in this you are not using the variables year and month in xScale.

if you want like that you must make domain 1947*12, 2016*12
and return 30 +i + 1947 ; not tested
and )I cannot say how that show data after 2015 if you have domain max value 2015
Consider use d3
.scaleTime() for that you also need format d3.format}
something like an example

var parseTime = d3.timeParse("%B %d, %Y");
parseTime(“June 30, 2015”); // Tue Jun 30 2015 00:00:00 GMT-0700 (PDT)


believe me in next projects know scaleTime it will make life more easy.


#4

I spent hour with your work and I did not find some errors, then I check my solution which have passed two months ago all test and now the same.
report that on GitHub.
Ahh I got it, I have larger graph and I use timeline, so I see the missing bar and some months in JSON missing 11. and 12. month in 1949 for example so it cannot pass.


#5

Thanks for looking into my solution for so long. In the end i just redid displayData function from padding-logic into margin logic, also this time, i used 0 for min value on yScale instead of d3.min(…), and instead of getting year from my date i just created new Date() and used it in xScale which is now scaleTime instead of scaleLinear (i didn’t know this existed until i did some research this morning) + instead of appending tooltip to svg i created it seperately into body as a absolute positioned div and now it works… :stuck_out_tongue:


#6

It actually doesn’t. it is because some months in dataset json are missing and that the test throw as undefined
It must something like others browser handle errors because in chrome pass
Edge


Chrome