Filter multiple rows of a CSV in D3.js and update

Question

I'm having some issues with filtering csv data and updating some SVG's in D3.js.

Issue 1

On load I want to filter multiple rows out of a csv. I succeeded with loading the data and filtering just one row. Then I tried a similar approach for multiple rows but this didn't work.

d3.csv("sample-data.csv", function(data){
  date = data.filter(function(row) {
      return row['YYYYMMDD'] == '20100901';
  })

  period = data.filter(function(row){
    for (var i = 1950; i < 2013; i++) {
      return row['YYYYMMDD'] == (i +"0901");
    } 
  });

  createVis();
}

Issue 2:

Based on user input (left/right key down) I want to change the filtered date and period and update some SVG's.

Example:
Current date is: 20100903. User taps right arrow key, date changes to the row that contains 20100904 in the YYYYMMDD column and period changes along with it like in my for loop of issue 1.

Im just simply stuck on this one as I don't know how to structure my code.

Sample of my csv data:

YYYYMMDD, DDVEC, FHVEC, FG  
20100901, 31, 51, 57
20100902, 245, 20, 51
20100903, 279, 51, 62
20100904, 220, 36, 46
20100905, 284, 26, 41

Note that my csv will eventually contain a lot more data.

Thanks in advance for your help.

Answer 1

  period = data.filter(function(row){
    for (var i = 1950; i < 2013; i++) {
      return row['YYYYMMDD'] == (i +"0901");
    } 
  });

Won't get a chance to iterate over all the values of i since the return statement will be triggered on the first iteration. To keep your structure mostly intact, you could make a small modification:

  period = data.filter(function(row){
    for (var i = 1950; i < 2013; i++) {
      if (row['YYYYMMDD'] == (i +"0901")) { return true; }
    }
    return false; 
  });

True will be returned only if there is a match; if the loop finishes with no matches False will be returned.

To improve the structure, simplify what you're checking for:

  period = data.filter(function(row){
    var dateNum = +row['YYYYMMDD'];
    return 19500901 <= dateNum && dateNum <= 20130901;
  });

Here, your string date is converted to an integer with + and simple arithmetic (which isn't possible to do on strings since they use lexicographic comparisons) is done to check if the date is in range.

Ideally, your dates should be represented with actual dates - if your date is in the right format, everything is much easier. To convert the date strings to date objects:

period.forEach(function(d){
  d.date = d3.format('%Y%m%d').parse(d.date);
})

To check if a given row has a date meeting the critera you've specified:

   row.date.getDate() == 1   && row.getMonth() == 8 
&& 1950 <= row.getFullYear() && row.getFullYear() <= 2012