Creating a table linked to a csv file
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.
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"]);
});
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 !
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