D3 Examples - simple tables in D3

simple tables in D3

There is NO WAY I'm claiming credit for this. Not cause it's bad but because it works and someone else sorted it out. In fact it was Gregor Aisch who did so. Here's the link: /gka/17ee676dc59aa752b4e6

So feel free to play with it. The liscense is as always: if you do something cool with this code please let me know so I can learn more and give you a high five, or not if you're not into random stranger high fives. :/

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Simple tables in D3</title>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-jetpack@1.0.2/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>
    