Creating a table linked to a csv file

Question

I am trying to create a table linked to a *.csv file using d3, but all I get is a blank webpage. Even with the example Crimea I get a blank page.
I would be grateful to be directed or shown a working example or a suggestion of what I am doing wrong.

Answer 1

If you're asking about creating an HTML table from CSV data, this is what you want:

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

Check out the working example. If you're copying that code, you'll need to update the tabulate() function so that it either selects an existing table or a different container (rather than "#container"), then you can use it with CSV data like so:

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

Answer 2

There is a bug in the answer proposed by @Shawn_allen.

To solve it just change the following line of code

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

by this one

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

Enjoy !

Answer 3

Often, I need to refresh a table of data periodically. Here's how I populate a table with data:

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

Notes:

• I like to put table headers in the HTML, rather than generate them from JavaScript.
• I didn't attach the data to the table rows and cells (like @Shawn shows in his answer), because I don't have a need for that. So the code is simpler.

fiddle

Answer 4

I'm sorry to add this in as a new answer but I don't have enough points to add it in as a comment. Just a slight tweak to the end of the code of @Shawn_Allen. I believe that this works too.

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

});

There was no need to create that JSON with column, value.