Old school D3 from simpler times

All examples By author By category About

carlkra

Full window Github gist

Table w/selector

Built with blockbuilder.org

<!DOCTYPE html>
<head>
        <title>Team Roster</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    </head>
<script src="https://d3js.org/d3.v3.min.js"></script>

<body>
  <div class="container">
            <div id="page-title">
                <h3 id="team-name">AFC Wimbledon</h3>
            </div>
            <div id="roster"></div>
        </div>
<script>  
  var data = [];
var teams = [];
var columns = ["No","Name","Position"];
var positions = { G:"Goalkeeper", D:"Defender", M:"Midfielder", F:"Forward" };

var table = d3.select("#roster")
  .append("table")
  .classed("table", true);

var thead = table.append("thead");

var tbody = table.append("tbody");

var teamSelector = d3.select("#page-title")
  .append("select")
  .attr("id", "team-selector")
  .on("change", function() { selectTeam(this.value); });

var reload = function() {
  d3.tsv("eng2-rosters.tsv", function(records) {
    data = records;
    data.forEach(function(d) {
      d.Position = positions[d.Pos];
      if (teams.indexOf(d.TeamID) < 0) {
        teams.push(d.TeamID);
        teams[d.TeamID] = d.Team;
      };
    });
    selectTeam("afc-wimbledon");
  });
};

var redraw = function(roster) {
  teamSelector.selectAll("option")
    .data(teams)
    .enter()
    .append("option")
    .attr("value", function(d) { return d; })
    .text(function(d) { return teams[d]; })
    .sort(function(a,b) { return d3.ascending(a,b); });
    
  thead.selectAll("tr")
    .data([columns])
    .enter()
    .append("tr")
    .selectAll("th")
    .data(function(d) { return d; })
    .enter()
    .append("th")
    .on("click",  function(d) {
      tbody.selectAll("tr")
        .sort(function(a,b) {
          return (d === 'No')
            ? d3.ascending(+a[d], +b[d])
            : d3.ascending(a[d], b[d])
        })
        .style("background-color", function(d,i) { return (i%2)? "white":"lightgray"; });
    }).text(function(d) { return d; })
    ;
  
  var rows = tbody.selectAll("tr")
    .data(roster);
    
  rows.enter()
    .append("tr")
    .style("background-color", function(d,i) { return (i%2)? "white":"lightgray"; });
  rows.exit().remove();
  
  var cells = rows.selectAll("td")
    .data(function(row) { return columns.map(function(col) {
      return row[col];
    });});
    
  cells.enter().append("td");
  
  cells.text(function(d) { return d; });
};

var selectTeam = function(teamId) {
  var roster = data.filter(function(d) { return d["TeamID"] === teamId; });
  redraw(roster);
  
  d3.select("#team-name").text(teams[teamId] + " Roster");
  document.getElementById("team-selector").value = teamId;
};

reload();
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js