Skip to content

Instantly share code, notes, and snippets.

@jfreels
Created September 27, 2013 19:33
Show Gist options
  • Save jfreels/6734025 to your computer and use it in GitHub Desktop.
Save jfreels/6734025 to your computer and use it in GitHub Desktop.
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
Copy link

Handy. Thx!

@joelle9045
Copy link

This example is so good! Works well! Thanks!

Copy link

ghost commented Sep 10, 2016

nicely done, thanks! 👍

@aspiringguru
Copy link

how do I mod this to make the text into an <a href link ?

thought I understood the columns.map(function (column) {...} but when I try to modify it doesn't work. I can produce <a href ... text appearing as text within the elements, but not as working links.

I feel I need to add another dom element and attribute, but can't combine the columns.map(function (column) {..} with adding an element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment