Table2

<!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;});

var me = d3.select("#stateopt").node().value;
   drawFilterTable(me);
   
 
 d3.select("#stateopt").on("change", change);

//function  
 function drawFilterTable(stateID) {
     var table3 = d3.select("#container4")
                    .append("table")
                    .classed("table", true),
         thead3 = table3.append("thead"),
         tbody3 = table3.append("tbody");    
     
    thead3.append("tr")
            .selectAll("th")
            .data(columns)
            .enter()
            .append("th")
            .text(function(column) { return column; });
      
 //   thead3.exit().remove(); 
 
   //select data for table body
    var rows3 = tbody3.selectAll("tr")
         .data(data);
          
          rows3.enter().append("tr").filter(function(d) {return d.State === stateID });
          rows3.exit().remove();
         var cells = rows3.selectAll("td")
           .data(function(row) {
           return columns.map(function(column) {
           return {column: column, value: row[column]};
           });
       		})
   }
   
   
   
   function change() {
   me = d3.select("#stateopt").node().value;
     //console.log(me)
     drawFilterTable(me);  
  }

});   
    
  </script>
  
  <div id="container1">ALL DATA:</div>
  <div id="container2">ROLL-UP BY STATE:</div>
  
 STATE SELECTOR:
  <div id="container3"></div>
  <div id="container4"></div>
</body>

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