HTML Data Table

forked from romsson's block: HTML Data Table

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
  <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>

d3.json("countries_2012.json", function(error, data){

var columns = Object.keys(data[0]);

var table = d3.select("body").append("table"),
          thead = table.append("thead")
                       .attr("class", "thead");
          tbody = table.append("tbody");

table.append("caption")
          .html("World Countries Ranking");

thead.append("tr").selectAll("th")
          .data(columns)
        .enter()
          .append("th")
          .text(function(d) { return d; })
          .on("click", function(header, i) {
            tbody.selectAll("tr").sort(function(a, b) {
              return d3.descending(a[header], b[header]);
            });
          });

var rows = tbody.selectAll("tr.row")
          .data(data)
          .enter()
          .append("tr").attr("class", "row");

});
    </script> 
  </body>
</html>

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

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