-
-
Save tym-xqo/a85732cf586708b7313d9cc26091b82a to your computer and use it in GitHub Desktop.
simple tables in D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Simple tables in D3</title> | |
<meta charset="utf-8"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="https://cdn.jsdelivr.net/npm/d3-jetpack@2.0.15/build/d3-jetpack.min.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> | |
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: d3.f('title') }, | |
{ head: 'Year', cl: 'center', html: d3.f('year') }, | |
{ head: 'Length', cl: 'center', html: d3.f('length', length()) }, | |
{ head: 'Budget', cl: 'num', html: d3.f('budget', d3.format('$,')) }, | |
{ head: 'Rating', cl: 'num', html: d3.f('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', d3.f('cl')) | |
.text(d3.f('head')); | |
// create table body | |
table.append('tbody') | |
.appendMany(movies, 'tr') | |
.appendMany(td_data, 'td') | |
.html(d3.f('html')) | |
.attr('class', d3.f('cl')); | |
function td_data(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; | |
}); | |
} | |
function length() { | |
var fmt = d3.format('02d'); | |
return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; }; | |
} | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment