Visualize Data with a Bar Chart Tests

Siege211 · August 15, 2018, 8:29pm

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?

DaniloNovakovic · August 15, 2018, 8:50pm

Glad i’m not the only one
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.
edit: + my tooltip also is for some reason behind chart… xD

lubodrinka · August 15, 2018, 10:25pm

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)

github.com

d3/d3-time-format/blob/master/README.md#timeFormat

# d3-time-format

This module provides a JavaScript implementation of the venerable [strptime](http://pubs.opengroup.org/onlinepubs/009695399/functions/strptime.html) and [strftime](http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html) functions from the C standard library, and can be used to parse or format [dates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) in a variety of locale-specific representations. To format a date, create a [formatter](#locale_format) from a specifier (a string with the desired format *directives*, indicated by `%`); then pass a date to the formatter, which returns a string. For example, to convert the current date to a human-readable string:

```js
var formatTime = d3.timeFormat("%B %d, %Y");
formatTime(new Date); // "June 30, 2015"
```

Likewise, to convert a string back to a date, create a [parser](#locale_parse):

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

You can implement more elaborate conditional time formats, too. For example, here’s a [multi-scale time format](http://bl.ocks.org/mbostock/4149176) using [time intervals](https://github.com/d3/d3-time):

```js
var formatMillisecond = d3.timeFormat(".%L"),

This file has been truncated. show original

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

lubodrinka · August 15, 2018, 11:11pm

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.

DaniloNovakovic · August 16, 2018, 11:09am

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…

lubodrinka · August 16, 2018, 12:03pm

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