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.
xxxxxxxxxx<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="https://d3js.org/d3.v3.min.js"></script> --> <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