Crear una tabla vinculada a un archivo csv

Question

Estoy tratando de crear una tabla vinculada a un archivo *.csv usando d3, pero todo lo que obtengo es una página web en blanco. Incluso con el ejemplo de Crimea me aparece una página en blanco.
Estaría agradecido de ser dirigido o mostrar un ejemplo de trabajo o una sugerencia de lo que estoy haciendo mal.

Answer 1

Si preguntas acerca de cómo crear una tabla HTML a partir de datos CSV, esto es lo que quiere:

d3.csv("data.csv", function(data) { 
    // the columns you'd like to display 
    var columns = ["name", "age"]; 

    var table = d3.select("#container").append("table"), 
     thead = table.append("thead"), 
     tbody = table.append("tbody"); 

    // append the header row 
    thead.append("tr") 
     .selectAll("th") 
     .data(columns) 
     .enter() 
     .append("th") 
      .text(function(column) { return column; }); 

    // create a row for each object in the data 
    var rows = tbody.selectAll("tr") 
     .data(data) 
     .enter() 
     .append("tr"); 

    // create a cell in each row for each column 
    var cells = rows.selectAll("td") 
     .data(function(row) { 
      return columns.map(function(column) { 
       return {column: column, value: row[column]}; 
      }); 
     }) 
     .enter() 
     .append("td") 
      .text(function(d) { return d.value; }); 
}); 

Mira la working example. Si está copiando ese código, deberá actualizar la función tabulate() para que seleccione una tabla existente o un contenedor diferente (en lugar de "#container"), luego puede usarlo con datos CSV como los siguientes:

d3.csv("path/to/data.csv", function(data) { 
    tabulate(data, ["name", "age"]); 
}); 

Answer 2

Hay un error en la respuesta propuesta por @Shawn_allen.

Para solucionarlo basta con cambiar la siguiente línea de código

return {column: column, value: row[column]}; 

por éste

return {column: column, value: row[columns.indexOf(column)]}; 

chat!

Answer 3

A menudo, necesito actualizar una tabla de datos periódicamente. Aquí es cómo rellenar una tabla con los datos:

HTML:

<table id="t1"> 
    <thead> 
     <tr><th>Name<th>Age 
    </thead> 
</table> 

JavaScript:

function tabulate(data, columns) { 
    var table = d3.select("#t1"); 
    table.select('tbody').remove(); // remove any existing data 
    var tbody = table.append('tbody'); 
    data.forEach(function(row) { 
    var tr = tbody.append('tr'); 
    columns.forEach(function(column) { 
     tr.append('td').text(row[column]); 
    }); 
    }); 
    return table; 
} 

Notas:

• me gusta poner encabezados de tabla en el código HTML, en lugar que generarlos desde JavaScript.
• No adjunté los datos a las filas y celdas de la tabla (como muestra @Shawn en su respuesta), porque no tengo necesidad de eso. Entonces el código es más simple.

fiddle

Answer 4

Lo siento añadir esta sesión como una nueva respuesta, pero no tengo suficientes puntos para añadirlo en como un comentario. Solo un ligero ajuste al final del código de @Shawn_Allen. Yo creo que esto también funciona.

//create a cell in each row for each column 
var cells = rows.selectAll("td") 
    .data(function(row) { 
     return columns.map(function(column) { 
      return row[column]; 
     }); 
    }) 
    .enter() 
    .append("td") 
     .text(function(d) { return d; }); 

});

No hubo necesidad de crear ese JSON con columna, valor.