D3 Examples - Table2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
   var columns = ["State","Time","Class","Rank"];
   var columns2 = ["State", "TotalTime", "RankAvg"] 
  
 d3.csv("tabledata.csv", function(error, data) { 
    
   data.forEach(function(d){
            d.Time = +d.Time;
            d.Rank = +d.Rank;
  });
  // console.log(JSON.stringify(data));
   
   var nested_data = d3.nest()
                     .key(function(d) { return d.State; }).sortKeys(d3.ascending)
                     .rollup(function(v) {return{
                      total:d3.sum(v, function(d) {return d.Time; }),
                      avg: d3.mean(v, function(d) { return d.Rank; })
                     }; })
                                     .entries(data);
   
   
   nested_data.forEach(function(d){
     d.State = d.key;
     d.TotalTime = d.values.total;
     d.RankAvg = d.values.avg;
     }); 
   
   console.log(JSON.stringify(nested_data));
     
  var table = d3.select("#container1")
               .append("table")
               .classed("table", true),
      thead = table.append("thead"),
      tbody = table.append("tbody");    
     
   
   thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(column) { return column; });
       
   var rows = tbody.selectAll("tr")
    .data(data);
    
   rows.enter()
    .append("tr");
    
   rows.exit().remove();
       
   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; }); 
   
   //ROLLUP TABLE
   
   var table2 = d3.select("#container2")
               .append("table")
               .classed("table", true),
      thead2 = table2.append("thead"),
      tbody2 = table2.append("tbody");    
     
   
   thead2.append("tr")
    .selectAll("th")
    .data(columns2)
    .enter()
    .append("th")
    .text(function(column) { return column; });
   
    var rows2 = tbody2.selectAll("tr")
    .data(nested_data);
 
    rows2.enter().append("tr");
    rows2.exit().remove();
    
   var cells2 = rows2.selectAll("td")
    .data(function(row) { return columns2.map(function(col) {
      return row[col];
    });});
 
  cells2.enter().append("td");  
  cells2.text(function(d) { return d;
  });
 
  //SELECTOR LIST 
   
  var list = d3.select("#container3")
               .append("select")
               .attr("id","stateopt");
 
  list.selectAll("option")
      .data(nested_data)
      .enter()
      .append("option")
      .attr("value", function(d) {return d.State;})
      .text(function(d) {
            return d.State;});
   
  d3.select("#stateopt").on("change", change);
  
   function change() {
      var me = d3.select("#stateopt").node().value;
     console.log(me)
  }
​
 });   
    
  </script>
  
  <div id="container1">ALL DATA:</div>
  <div id="container2">ROLL-UP BY STATE:</div>
  
 STATE SELECTOR:
  <div id="container3"></div>
  
</body>
    