Create a gist now

Instantly share code, notes, and snippets.

@gka /index.html
Last active Jan 17, 2018

What would you like to do?
simple tables in D3
<!DOCTYPE html>
<html>
<head>
<title>Simple tables in D3</title>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<style type="text/css">
body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}
th { text-align: left; }
th, td { padding: 0 1em 0.5ex 0;}
th.center, td.center { text-align: center; }
th.num, td.num { text-align: right; }
</style>
</head>
<body>
<script>
// the table rows, typically loaded from data file using d3.csv
var movies = [
{ title: "The Godfather", year: 1972, length: 175, budget: 6000000, rating: 9.1 },
{ title: "The Shawshank Redemption", year: 1994, length: 142, budget: 25000000, rating: 9.1 },
{ title: "The Lord of the Rings: The Return of the King", year: 2003, length: 251, budget: 94000000, rating: 9 },
{ title: "The Godfather: Part II", year: 1974, length: 200, budget: 13000000, rating: 8.9 },
{ title: "Shichinin no samurai", year: 1954, length: 206, budget: 500000, rating: 8.9 },
{ title: "Buono, il brutto, il cattivo, Il", year: 1966, length: 180, budget: 1200000, rating: 8.8 },
{ title: "Casablanca", year: 1942, length: 102, budget: 950000, rating: 8.8 },
{ title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001, length: 208, budget: 93000000, rating: 8.8 },
{ title: "The Lord of the Rings: The Two Towers", year: 2002, length: 223, budget: 94000000, rating: 8.8 },
{ title: "Pulp Fiction", year: 1994, length: 168, budget: 8000000, rating: 8.8 }
];
// column definitions
var columns = [
{ head: 'Movie title', cl: 'title', html: ƒ('title') },
{ head: 'Year', cl: 'center', html: ƒ('year') },
{ head: 'Length', cl: 'center', html: ƒ('length', length()) },
{ head: 'Budget', cl: 'num', html: ƒ('budget', d3.format('$,')) },
{ head: 'Rating', cl: 'num', html: ƒ('rating', d3.format('.1f')) }
];
// create table
var table = d3.select('body')
.append('table');
// create table header
table.append('thead').append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.attr('class', ƒ('cl'))
.text(ƒ('head'));
// create table body
table.append('tbody')
.selectAll('tr')
.data(movies).enter()
.append('tr')
.selectAll('td')
.data(function(row, i) {
return columns.map(function(c) {
// compute cell values for this specific row
var cell = {};
d3.keys(c).forEach(function(k) {
cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
});
return cell;
});
}).enter()
.append('td')
.html(ƒ('html'))
.attr('class', ƒ('cl'));
function length() {
var fmt = d3.format('02d');
return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
}
</script>
</body>
</html>
@owendall

This comment has been minimized.

Show comment Hide comment
@owendall

owendall Aug 3, 2016

Thanks for this great example.

owendall commented Aug 3, 2016

Thanks for this great example.

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