CODEWITHSUNDEEP
javascriptcsvd3.jsrows
First Last
First Last

Reputation: 43

How to skip or ignore rows above header?

Title: This is parsed file      
Job: Proj Doom

Flow,Value  
102,2   
103,3   
104,4   
105,5   
106,6

I am new here and to D3. My d3 graph works fine if I take the above csv and remove everything above the header. The csv is produced after a test and I can't go thru every file and remove the rows above the header before loading to D3 graph. I would like to grab this files and visualize it without modifying it.

So, my only issue is how to filter out the top 5 rows. The number of rows above the header is the same among all the *.csv produced, the contents might change.

Can it be done within the d3.csv("myCsv", type, function(){});? Or it needs to be done before with js? I'm using d3 v4.

Upvotes: 4

Views: 1110

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

The problem of using a type function, better known as row function, is that it will be called for all rows. That's not what you want.

Probably the best idea here is loading that CSV as plain text. In v5:

d3.text("data.csv").then(function(data){

And in v4:

d3.text("data.csv", function(data){

... and then we remove the first rows. Here, I'm removing the first 3 rows:

const filtered = data.split('\n').slice(3);

Then, we recreate the CSV file:

const newCSV = filtered.join('\n');

And finally we parse it:

const newData = d3.csvParse(newCSV);

By the way, d3.csvParse works both on v4 and v5.

Of course, all this can be done in just 1 line:

data = d3.csvParse(data.split('\n').slice(3).join('\n'))

Here is a bl.ocks showing it (using v5): https://bl.ocks.org/GerardoFurtado/5a43fdcedc214ecdb2eb20ac91af8623/6473eb3dfb05361a3dd7972756a490d9885542f5

Upvotes: 7

Related Questions