CODEWITHSUNDEEP
d3.jslinechart
enflam3
enflam3

Reputation: 177

d3.js data array if statement

I am trying to cancel out rows that have y value > 5000. Here is graph with all data from csv file:

http://dtech.id.lv/d3/origin.html

And here is my attempt to modify forEach function with if statement:

http://dtech.id.lv/d3/modif.html

// Get the data
    d3.csv("data.csv", function(error, data) {
        data.forEach(function(d) {

            if (d.close < 5000) {
                less5000++;
      d.close = +d.close;
      d.date = parseDate(d.date);
            }
    if (d.close > 5000) {
                over5000++;
            }

    total++;

        });

Something isn't right here and I cant figure out how to write this properly. Can someone please point me to correct way of doing this? Thanks!

Upvotes: 0

Views: 450

Answers (1)

vuza
vuza

Reputation: 2634

The error is somewhere else:

Several of your data entries have wrong date format, so x(d.date) in your valueline method returns NaN, which can't be displayed and d3 crashes (see your JS console at http://dtech.id.lv/d3/modif.html).

That is how your first data entry looks like, which is fine: {dd: "2016-03-13", date: Mon Jan 01 1900 00:00:03 GMT+0100 (CET), close: 131}

... and this is how an invalid one in your data set looks like: {dd: "2016-03-13", date: "10:54:43", close: "10465"}

There are about 20 data entries which have invalid date objects in you data.csv

UPDATE

Behavior above is because, you do not parse d.date if d.close is 5000 or more. Update your code to

// Get the data
d3.csv("data.csv", function(error, data) {
     data.forEach(function(d) {
         if (d.close < 5000) {
              less5000++;
         }
         if (d.close > 5000) {
              over5000++;
         }

         d.close = +d.close;
         d.date = parseDate(d.date);

         total++;
     });
...

UPDATE 2

To filter your array use array.filter (see: https://github.com/mbostock/d3/wiki/Arrays)! In your case:

// Get the data
d3.csv("data.csv", function(error, data) {
     data = data.filter(function(d){
          d.close = +d.close;
          d.date = parseDate(d.date);

          return d.close < 5000;
     });
...

data will only contain entries which have d.close smaller then 5000.

Upvotes: 1

Related Questions