Published
Edited
Aug 21, 2022
data = [
{ "date" : '2013-01-01', "close" : 45 },
{ "date" : '2013-02-01', "close" : 50 },
{ "date" : '2013-03-01', "close" : 55 },
{ "date" : '2013-04-01', "close" : 50 },
{ "date" : '2013-05-01', "close" : 45 },
{ "date" : '2013-06-01', "close" : 50 },
{ "date" : '2013-07-01', "close" : 50 },
{ "date" : '2013-08-01', "close" : 52 }
]
function tabulate(data, columns) {
const svg = d3.create("svg").attr("width", 800).attr("height", 800);
let table = d3.select('svg').append('table')
let thead = table.append('thead')
let 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
let rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
// create a cell in each row for each column
let 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 svg.node();
}
d3 = require("d3")
// render the tables
{
return tabulate(data, ['date', 'close']); // 2 column 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.
