D3 Examples - D3 HTML Tables

xxxxxxxxxx
 
<!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");
​
        var cells = rows.selectAll("td")
          .data(function(row) {
              return d3.range(columns.length).map(function(column, i) {
                  //return row[Object.keys(row)[i]];
                  //console.log(column);
                  //console.log(row);
                  return row[columns[column]];
              });
          })
          .enter()
          .append("td")
          .text(function(d) { return d; })
​
      });
    </script> 
  </body>
</html>
    