D3 Examples - Table3

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 data =[];
 var states = [];
 var columns = ["State","Time","Class","Rank"];
   
 var table3 = d3.select("#container4")
                    .append("table")
                    .classed("table", true);
 
 var thead3 = table3.append("thead");
 
 var tbody3 = table3.append("tbody");    
 
  var stateSelector = d3.select("#container3")
               .append("select")
               .attr("id","state-selector")
               .on("change", function() { selectState(this.value); });
 
 var reload = function() {
      d3.csv("tabledata2.csv", function(records){
         data = records;
         selectState("HI");
         });
 
     var nested_data = d3.nest()
         .key(function(d) { return d.State; }).sortKeys(d3.ascending)
         .entries(data);
     
    // nested_data.forEach(function(d){
    //   d.State = d.key; });
   
    };
 
  var redraw = function(thisItem) {
  var list = d3.select("#container3")
              .append("select")
              .attr("id","state-selector")
              .on("change", function() { selectState(this.value); });
 
  list.selectAll("option")
      .data(nested_data)
      .enter()
      .append("option")
      .attr("value", function(d) {return d.key;})
      .text(function(d) {return d.key;});
    
    
    thead3.selectAll("tr")
    .data([columns])
    .enter()
    .append("tr")
    .selectAll("th")
    .data(function(d) { return d; })
    .enter()
    .append("th") 
    .data(function(d) { return d; })
    .enter()
    .append("th");
   
 var rows3 = tbody3.selectAll("tr")
    .data(thisItem);
    
  rows3.enter()
    .append("tr")
    .style("background-color", function(d,i) { return (i%2)? "white":"lightgray"; });
  
  rows3.exit().remove();
    
 var cells3 = rows3.selectAll("td")
    .data(function(row) { return columns.map(function(col) {
      return row[col];
    });});
    
  cells3.enter().append("td");
  cells3.text(function(d) { return d; });  
  };
  
  
var selectState = function(stateId) {
  var thisItem = data.filter(function(d) { return d.State === stateId; });
  
redraw(thisItem);  
  
 // d3.select("#container4").text(states["State"] + " Listing");
 // document.getElementById("state-selector").value = stateID;
  
}; 
 
reload();
  
  </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>
​
    