Skip to content

Instantly share code, notes, and snippets.

@jwilber
Last active March 30, 2020 01:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jwilber/ab3bce827da968adb2ffc90355aedb42 to your computer and use it in GitHub Desktop.
Save jwilber/ab3bce827da968adb2ffc90355aedb42 to your computer and use it in GitHub Desktop.
fresh block
license: mit
[
{ "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='table.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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment