Question

I want to select some data out of a CSV file before i load it with javascript (with the d3 library).

This is how i load the CSV:

d3.csv("data.csv", function(csv) {
    vis.datum(csv).call(chart);
        });

And this is a sample of the CSV file:

Class,Age,Sex,Survived
First Class,Adult,Male,Survived
First Class,Adult,Male,Survived
First Class,Adult,Male,Survived
First Class,Adult,Male,Survived
First Class,Adult,Male,Survived
First Class,Adult,Female,Survived
First Class,Adult,Female,Survived
First Class,Adult,Female,Survived
Second Class,Adult,Male,Perished
Second Class,Adult,Male,Perished
Second Class,Adult,Male,Perished
Third Class,Adult,Male,Survived
Third Class,Adult,Male,Survived
Third Class,Adult,Male,Survived
Third Class,Adult,Male,Survived
Third Class,Adult,Male,Perished
Third Class,Adult,Male,Perished
Crew,Adult,Male,Perished
Crew,Adult,Male,Perished
Crew,Adult,Female,Survived
Crew,Adult,Female,Survived

For example i want only to select the Second Class and First Class rows before i load it with d3.csv.

i know i can just delete the other rows in the CSV, but i want to make a function so that the user can select what categories he want to use. I hope that makes some sense.

Answer 1

The quick answer is, use .filter() to select the rows you want, e.g.:

d3.csv("data.csv", function(csv) {
    csv = csv.filter(function(row) {
        return row['Class'] == 'Second Class' || row['Class'] == 'First Class';
    })
    vis.datum(csv).call(chart);
});

This is easy if you, the coder, are choosing the filters. If you need this to be chosen by user interaction, however, you’re going to need to build out a more complex function. Assuming that you have saved the user choices in an object called filters, with keys corresponding to your rows, one option might look like:

// an example filters object
var filters = {
    'Class': ['First Class', 'Second Class'],
    'Sex': 'Female'
};

d3.csv("data.csv", function(csv) {
    csv = csv.filter(function(row) {
        // run through all the filters, returning a boolean
        return ['Class','Age','Sex','Survived'].reduce(function(pass, column) {
            return pass && (
                // pass if no filter is set
                !filters[column] ||
                    // pass if the row's value is equal to the filter
                    // (i.e. the filter is set to a string)
                    row[column] === filters[column] ||
                    // pass if the row's value is in an array of filter values
                    filters[column].indexOf(row[column]) >= 0
                );
        }, true);
    })
    console.log(csv.length, csv);
});

(You don’t have to do this with .reduce(), but I like how clean it is.)

If, as is probably the case, you don’t want to do this filtering at load time, but instead filter dynamically depending on user input, you can still use the filter function, but you’ll want to store csv in memory somewhere and filter it on the fly, perhaps in an update() function triggered by user interactions.