movies - fork

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
/*
 * read more about this demo:
 * https://www.vis4.net/blog/posts/making-html-tables-in-d3-doesnt-need-to-be-a-pain/
 *
 * in case you're wondering about d3.f or appendMany(), please check out d3-jetpack
 * https://github.com/gka/d3-jetpack
 */

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' },
    { head: 'Year', cl: 'center' },
    { head: 'Length', cl: 'center' },
    { head: 'Budget', cl: 'num' },
    { head: 'Rating', cl: 'num' }
];

// 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', function(d){ return d.cl; })
    .text(function(d){ return d.head; });

// create table body
table.append('tbody')
	.selectAll('tr')
    .data(movies)
    .enter()
    .append('tr')
	.selectAll('td')
    .data(columns)
    .enter()
    .append('td')
    .html(function(d){ return d.html})
    .attr('class', function(d){ return d.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>

https://d3js.org/d3.v4.min.js