Browser hangs when parsing dates

Question

I've succeeded in getting this visualization (small multiples of stacked area charts) to work, in slightly different form, when I use dummy data for the dates, i.e. when I use only years. However, when I use actual dates like this, it's problematic:

Record,Code,2008-1-1,2008-2-1,2008-3-1,2008-4-1,2008-5-1,2008-6-1,2008-7-1...

instead of this dummy data, which works fine

Record,Code,1895,1896,1897,1898,1899,1900,1901...

When I use full dates, the browser hangs; there is no error message. I've fixed parsing errors before, but this one seems beyond my abilities.

Here's the non-working Plunker: https://plnkr.co/edit/fOlpxo648OyCSM7Sq8ak?p=preview Another Plunker, one which actually loads, but which uses dummy data, is at the bottom of this question.

This piece of code seems particularly problematic:

function createDatesArr(start, end) {
var arr = [];
for (var i = start; i <= end; i++ ) {
    arr.push((i));  //      arr.push(String(i));
}
return arr;
}

In slightly different form, I'll get an error message that "dates" has not been defined. I've tried to solve this with the following code:

var dateFormat = d3.time.format("%Y-%m-%d");
var startDate = new Date('2008-1-1');
var endDate = new Date ('2017-12-1');
var dates = createDatesArr(startDate, endDate); 

Or like so:

var dateFormat = d3.time.format("%Y-%m-%d");
var startYear = "2008-1-1";
var endYear = "2017-12-1";
var dates = createYearsArr(startYear, endYear);

Or like this:

var dateFormat = d3.time.format("%Y-%m-%d");
var startDate = d3.min(dataset, function(d) { return d.Date; });
var endDate = d3.max(dataset, function(d) { return d.Date; });
var dates = createDatesArr(startDate, endDate);

Or, alternatively, by defining "dates" like so:

d3.csv(dataPath, function(data) {
    var dates = d3.keys(data[0]).slice(1);
    data = data.filter(function(d) {
            return true;
    });
    var dates = d3.keys(data[0]).slice(1);

None of this has worked, but I'm hopeful someone can help me fix this.

Here's another Plunker, that actually works, which demonstrates what I'm ultimately trying to achieve, albeit using dummy data (years only) for dates: http://plnkr.co/edit/jRC8iQg2kdtlZWtGE020?p=preview

Please help.

Answer 1

You are right, your problem in this code

function createDatesArr(start, end) {
  var arr = [];
  for (var i = start; i <= end; i++ ) {
    arr.push((i));  //      arr.push(String(i));
  }
  return arr;
}

More precisely here - i++;

Look at pic below, variable i it is a date as milliseconds. You increase it by one millisecond after each loop iteration. But step between your data points as I can see it is a month.

Record,Code,2008-1-1,2008-2-1,2008-3-1,2008-4-1,2008-5-1,2008-6-1,2008-7-1...

So you should increase i by one month after each loop iteration to solve your problem.

You can do it with d3.time.month.offset:

for (var i = start; i <= end; i = d3.time.month.offset(i, 1)) {
  arr.push((i));
}

After that, you should remove dateFormat(...) because data item it is exactly valid javascript date and rewrites transformData function a bit, look at my fork of you plnkr (it looks like incorrect applying of colors, I think you can fix it, but otherwise it works).