Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
116
rated 0 times [  118] [ 2]  / answers: 1 / hits: 31921  / 13 Years ago, mon, february 13, 2012, 12:00:00

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.


More From » d3.js

 Answers
52

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

[#87492] Sunday, February 12, 2012, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kaya

Total Points: 531
Total Questions: 107
Total Answers: 100

Location: United States Minor Outlying Island
Member since Sat, May 28, 2022
2 Years ago
kaya questions
Mon, Feb 14, 22, 00:00, 2 Years ago
Fri, Jun 18, 21, 00:00, 3 Years ago
Tue, Jun 1, 21, 00:00, 3 Years ago
Wed, Dec 23, 20, 00:00, 3 Years ago
;