Question

99

Select data from a CSV before loading it with javascript (d3 library)

rated 0 times [ 104] [ 5] / answers: 1 / hits: 18638 / 12 Years ago, wed, may 16, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

clifford

Add To Favorites

Follow

Total Points: 86

Total Questions: 114

Total Answers: 111

Location: Wales

Member since Mon, May 17, 2021

3 Years ago

answered 12 Years ago lailab · Accepted Answer

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.