Public
Edited
Feb 12, 2024
tabulate(data, ["name", "age"])
data = [
{"name": "John", "age": 11},
{"name": "Jane", "age": 20},
{"name": "Robert", "age": 35},
{"name": "Meg", "age": 56},
{"name": "Ryan", "age": 80},
{"name": "Emma", "age": 11},
{"name": "Dale", "age": 20},
{"name": "Sam", "age": 35},
{"name": "Belle", "age": 56},
{"name": "Snow", "age": 80}
]
function tabulate(data, columns) {
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; });
return table;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
