From CSV to HTML table (Advanced)

This code generates an HTML table based from a CSV file.

Original code by Shawn Allen via the D3 Noob.

The task of writing the CSS is left as an exercise for the reader.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            table {
                border-collapse: collapse;
                border: 2px black solid;
                font: 12px sans-serif;
            }

td, th {
                border: 1px black solid;
                padding: 5px;
            }

th {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        
        <script src="d3.min.js?v=3.2.8"></script>
        <script type="text/javascript"charset="utf-8">
            function tabulate(data, columns) {
                var table = d3.select("body").append("table"),
                    thead = table.append("thead"),
                    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;
            }

// Create some people
            var people = [
                {name: "Jill", age: 30},
                {name: "Bob", age: 32},
                {name: "George", age: 29},
                {name: "Sally", age: 31}
            ];

// Render the table
            var peopleTable = tabulate(people, ["name", "age"]);

// Uppercase the column headers
            peopleTable.selectAll("thead th")
                .text(function(column) {
                    return column.charAt(0).toUpperCase() + column.substr(1);
                });

// Sort by age
            peopleTable.selectAll("tbody tr")
                .sort(function(a, b) {
                    return d3.descending(a.age, b.age);
                });
        </script>
    </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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