Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
d3js: Create an HTML table using d3.js and JSON

d3js: Create an HTML table using d3.js and JSON

[
{ "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" : 55 }
]
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<script type='text/javascript' src='script.js'></script>
</body>
</html>
d3.json('data.json', function (error,data) {
function tabulate(data, columns) {
var table = d3.select('body').append('table')
var thead = table.append('thead')
var 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;
}
// render the table(s)
tabulate(data, ['date', 'close']); // 2 column table
});
td, th {
padding: 1px 4px;
}
@rickschmoo

This comment has been minimized.

Copy link

rickschmoo commented Aug 25, 2014

Handy. Thx!

@joelle9045

This comment has been minimized.

Copy link

joelle9045 commented Jul 9, 2015

This example is so good! Works well! Thanks!

@ghost

This comment has been minimized.

Copy link

ghost commented Sep 10, 2016

nicely done, thanks! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.