D3 HTML Tables

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
  <body>
    <div>
        <span>Time update:</span>
        1995<input id="year" type="range" min="1995" max="2012" step="1" value="1995" />2012
    </div>
    <div>
        <span>Filter by:</span>
        <label><input type="checkbox" name="US" value="1" id="filter-us-only" />US only</label>
    </div>
    <div>
        <span>Aggregation:</span>
    </div>
   
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        
      // Header columns
      var columns = ["name","continent","gdp","life_expectancy","population","year"];

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) {
              console.log(header);
              console.log(a);
              console.log(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