build table from csv

forked from cool-Blue's block: build table from csv

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div {
      white-space: pre;
    }
    td, th {
      outline: 1px solid white;
      background-color: #ccc;
    }
    th {
      text-align: left;
    }
    td:not(:first-child) {
      text-align: right;
    }
  </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<script>
  d3.text("data.csv", function (text) {
    var csv = d3.csv.parse(text), allheaders = d3.csv.parseRows(text)[0],
      table = d3.select("body").append("table");
    table.append("thead")
      .append("tr").selectAll("th")
      .data(allheaders).enter()
        .append("th")
        .text(function(d){return d});
    table.append("tbody").datum(csv)
        .selectAll("tr")
        .data(function(d){
          return d
        })
          .enter().append("tr")
            .selectAll("td")
            .data(function(row){
              return allheaders.map(function(h) { return row[h]})
            }).enter().append("td")
            .text(function(d) {
              return d
            });
  });
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js