Browser freezes when parsing dates

Question

I managed to get this visualization (small multiple diagrams by regions) to work in a slightly different form when I use dummy data for dates, i.e. when i use only years. However, when I use actual dates like this, this is 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 that works great

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

When I use full dates, the browser freezes; no error message. I used to correct parsing errors, but this seems to be beyond my capabilities.

Here's the broken Plunker: https://plnkr.co/edit/fOlpxo648OyCSM7Sq8ak?p=preview Another Plunker that actually loads but uses dummy data is at the bottom of this question.

This piece of code seems especially problematic:

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

In a slightly different form, I will get an error that the "dates" are not defined. I tried to solve this problem 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 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, defining "dates" as follows:

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 worked, but I hope someone can help me fix it.

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

Please, help.

Answer 1

You're right, your problem is 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++;

. , i - . . , , .

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

, i , .

d3.time.month.offset:

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

dateFormat(...), javascript transformData , fork plnkr ( , , , ).

Answer 2

:

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

++ , . , :

( Fri Dec 01 2017 00:00:00 GMT+0400 (+04) ) ++

, :

   function createDatesArr(startDate, endDate) {
       var _start = new Date(startDate),
           _end = new Date(endDate),
           _result = [];

       while(_start < _end){
           _result.push(_start);
           // going next
           var _newDate = _start.setDate(_start.getDate() + 1);
               _start = new Date(_newDate);
       }
       return _result;
    }

Answer 3

, : createDatesArr ( ).

, time.ticks([interval]), :

. ( ), (, ) .

, , idiomatic D3, , D3.

Here is a demo version of v3 that is your version. I changed the end date to 2009 instead of 2017, so we will have fewer dates in the console. Check this:

var startDate = new Date('2008-1-1');
var endDate = new Date('2009-6-1');
var dates = d3.time.scale()
  .domain([startDate, endDate])
  .ticks(d3.time.months, 1);

console.log(dates)

<script src="https://d3js.org/d3.v3.min.js"></script>

Run code

In fact, it can be even shorter, just one line, dropping the timeline and using only d3.time.monthsor d3.time.month.range:

var dates = d3.time.month.range(new Date('2008-1-1'), new Date('2009-6-1'), 1)

console.log(dates)

<script src="https://d3js.org/d3.v3.min.js"></script>

Run code