Seleccionar datos de un CSV antes de cargarlos con javascript (biblioteca d3)

Question

Quiero seleccionar algunos datos de un archivo CSV antes de cargarlos con javascript (con la biblioteca d3).

Éste es cómo cargar el archivo CSV:

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

y esto es una muestra del archivo CSV:

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 

Por ejemplo quiero sólo para seleccionar los Second Class y First Class filas antes de que yo cárgalo con d3.csv.

Sé que puedo simplemente eliminar las otras filas en el CSV, pero quiero hacer una función para que el usuario pueda seleccionar qué categorías quiere usar. Espero que tenga algo de sentido.

Answer 1

La respuesta rápida es, utilice .filter() para seleccionar las filas que desee, por ejemplo .:

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); 
}); 

Esto es fácil si usted, el codificador, está eligiendo los filtros. Sin embargo, si necesita que lo elija la interacción del usuario, tendrá que crear una función más compleja. Suponiendo que haya guardado las opciones de usuario en un objeto llamado filters, con teclas correspondientes a sus filas, una opción podría ser:

// 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); 
}); 

(Usted no tiene que hacer esto con .reduce(), pero me gusta cómo clean it is.)

Si, como probablemente sea el caso, no desea hacer este filtrado en tiempo de carga, sino que filtra de forma dinámica dependiendo de la entrada del usuario, puede seguir utilizando la función de filtro, pero ' Quiero almacenar csv en memoria en alguna parte y filtrarlo sobre la marcha, tal vez en una función update() desencadenada por interacciones del usuario.