Why Does This Vanilla Js Function Return Different Results In D3v3 And D3v4

This is a MWE based on some templates going from v3 to v4 of the amazing d3.js. The data is in csv file, both examples load the same file (its clean): day,movie1,movie2,movie3,movi

Solution 1:

The reason for this difference is that D3 v4.x creates an additional property named columns to the data array when it parses the CSV (look at the documentation).

So, for instance, given your data:

day,movie1,movie2,movie3,movie4,movie5,movie6
1,20,8,3,0,0,0
2,18,5,1,13,0,0
...

D3 creates, after the "normal" objects, this additional object (technically speaking, an additional property to the array):

columns: ["day", "movie", "movie2", "movie3", "movie4", "movie5", "movie6"]

Which you can call using data.columns.

The problem you're facing right now is that when you use a for...in loop you end up iterating this property as well, getting a lot of NaN.

Answer : you can simply avoid iterating over columns or, if you don't need it, you can remove it from your data. There are several ways for removing an property from an array in JavaScript, the simpler way being this:

delete incData.columns;

To check this columns property, simply console.log(data) using D3 v3 and v4, comparing the results.