working on hw 5

hw5/js/script.js

@@ -0,0 +1,42 @@
+// Loads in the table information from fifa-matches.json 
+d3.json('data/fifa-matches.json').then(function(data) {
+  //console.log(data);
+
+   // Loads in the tree information from fifa-tree.csv and calls
+   // createTree(csvData) to render the tree.
+  d3.csv("data/fifa-tree.csv").then(function(csvData) {
+    //console.log(csvData);
+
+    //Create a unique "id" field for each game
+    csvData.forEach(function (d, i) {
+      d.id = d.Team + d.Opponent + i;
+    });
+
+    //Create Tree Object
+    let tree = new Tree();
+    tree.createTree(csvData);
+
+    // Create Table Object and pass in reference to tree object
+    // (for hover linking)
+    let table = new Table(data,tree);
+
+    table.createTable();
+    table.updateTable();
+  });
+});
+
+
+
+// //************************* HACKER VERSION *****************************
+// // Loads in fifa-matches.csv file, aggregates the data into the correct
+// // format, then calls the appropriate functions to create and populate
+// // the table.
+// d3.csv("data/fifa-matches.csv", function (error, matchesCSV) {
+
+//   // Loads in the tree information from fifa-tree.csv and calls
+//   // createTree(csvData) to render the tree.
+//   d3.csv("data/fifa-tree.csv", function (error, treeCSV) {
+//     // ******* TODO: PART I *******
+//   });
+// });
+// //*********************** END HACKER VERSION ***************************

hw5/js/table.js

@@ -0,0 +1,199 @@
+/** Class implementing the table. */
+class Table {
+  /**
+   * Creates a Table Object
+   */
+  constructor(teamData, treeObject) {
+
+    // Maintain reference to the tree Object;
+      console.log(treeObject);
+    this.tree = treeObject;
+
+    // Create list of all elements that will populate the table
+    // Initially, the tableElements will be identical to the teamData
+    this.tableElements = teamData.slice(0); //
+
+    // Store all match data for the 2014 Fifa cup
+    this.teamData = teamData;
+
+    // Default values for the Table Headers
+    this.tableHeaders = ["Delta Goals", "Result", "Wins", "Losses", "TotalGames"];
+
+    // To be used when sizing the svgs in the table cells.
+    this.cell = {
+      "width": 70,
+      "height": 20,
+      "buffer": 15
+    };
+
+    this.bar = {
+      "height": 20
+    };
+
+    // Set variables for commonly accessed data columns
+    this.goalsMadeHeader = 'Goals Made';
+    this.goalsConcededHeader = 'Goals Conceded';
+
+    // Setup the scales
+    this.goalScale = null;
+
+    // Used for games/wins/losses
+    this.gameScale = null;
+
+    // Color scales
+    // For aggregate columns  Use colors '#ece2f0', '#016450' for the range.
+    this.aggregateColorScale = null;
+
+    // For goal Column. Use colors '#cb181d', '#034e7b'  for the range.
+    this.goalColorScale = null;
+  }
+
+
+  /**
+   * Creates a table skeleton including headers that when clicked allow
+   * you to sort the table by the chosen attribute.
+   * Also calculates aggregate values of goals, wins, losses and total
+   * games as a function of country.
+   */
+  createTable() {
+      let teamData = this.teamData;
+
+    // ******* TODO: PART II *******
+
+    // Update Scale Domains
+      this.goalScale = d3.scaleLinear()
+          .domain([d3.min(teamData, d => d.value['Goals Made']), d3.max(teamData, d => d.value['Goals Made'])])
+          .range([0,2*this.cell.width])
+          .nice();
+      this.aggregateColorScale = d3.scaleLinear()
+          .domain([0, d3.max(teamData, d => d.value['TotalGames'])])
+          .range(["#ece2f0","#016450"])
+      this.gameScale = d3.scaleLinear()
+          .domain([0, d3.max(teamData, d => d.value['TotalGames'])])
+          .range([0,this.cell.width]);
+
+
+    // Create the x axes for the goalScale.
+      let goalAxis = d3.axisTop();
+      goalAxis.scale(this.goalScale);
+    // Add GoalAxis to header of col 1.
+      d3.select("#goalHeader").append('svg')
+          .attr('width', 2 * this.cell.width + 2 * this.cell.buffer)
+          .attr('height', this.cell.height)
+          .append('g')
+          .attr("transform", "translate(10,16)")
+          .call(goalAxis)
+
+    // ******* TODO: PART V *******
+
+    // Set sorting callback for clicking on headers
+
+    // Clicking on headers should also trigger collapseList() and
+    // updateTable().
+
+  }
+
+
+  /**
+   * Updates the table contents with a row for each element in the global
+   * variable tableElements.
+   */
+  updateTable() {
+    // ******* TODO: PART III *******
+    // Create table rows
+      console.log(this.tableElements);
+      let row = d3.select('#tbody')
+          .selectAll('tr')
+          .data(this.tableElements);
+      row.exit()
+          .remove();
+      row.enter()
+          .append('tr')
+          .on('click', (d,i) =>{
+              this.tree.updateTree(this.tableElements[i]);
+          })
+          .on('mouseover', (d,i) => {
+              this.tree.updateTree(this.tableElements[i]);
+          })
+          .on('mouseout', () => {
+              this.tree.clearTree();
+          })
+          .merge(row);
+    // Append th elements for the Team Names
+      let tableHeader = row.selectAll('th')
+          .data((d)=>{
+                  return [{'type':d.value['type'],
+                  'view': 'text',
+                  'data': d.key()}]
+          });
+      tableHeader.exit()
+          .remove();
+      tableHeader = tableHeader.enter()
+          .append('th')
+          .merge(tableHeader);
+
+
+
+    // Append td elements for the remaining columns.
+      let tcell = tableHeader.selectAll('#td')
+          .data(d => {
+              return[{'type': d.value['type'], 'view': 'goals', 'value': {'goalsMade':d.value['Goals Made'], 'goalsConceded':d.value['Goals Conceded']}},
+                  {'type': d.value['type'], 'view': 'text', 'value': d.value['Result']},
+                  {'type': d.value['type'], 'view': 'bar', 'value': d.value['Wins']},
+                  {'type': d.value['type'], 'view': 'bar', 'value': d.value['Losses']},
+                  {'type': d.value['type'], 'view': 'bar', 'value': d.value['TotalGames']}
+              ] });
+      tcell.exit().remove();
+      tcell = tcell.enter().append('td').merge(tcell);
+    // Data for each cell is of the type: {'type':<'game' or 'aggregate'>,
+    // 'value':<[array of 1 or two elements]>}
+      tableHeader.text(d =>{
+          return d.type === 'aggregate' ? d.value : "x"+d.value
+          })
+          .style('color', d => {
+              return d.type === 'aggregate' ? 'black' : 'grey'
+          });
+    //Add scores as title property to appear on hover
+
+    //Populate cells (do one type of cell at a time)
+      let values = tcell.each(d=> { console.log(d.view); return [d.view === 'goals', d.view === 'bar', d.view ==='text']});
+      let goals = tcell.filter(d =>{return d.view === 'goals'});
+      let bar = values[1];
+      let text = tcell.filter(d =>{return d.view === 'text'});
+      console.log(this.cell);
+
+      text.select('svg').remove();
+      let textBody = text.append('svg')
+          .attr("width", this.cell.width*1.6)
+          .attr("height", this.cell.height);
+      textBody.append("text")
+          .attr("x", 0)
+          .attr("y", this.cell.height/2)
+          .text(d => { return d.value['label']});
+
+    //Create diagrams in the goals column
+
+    //Set the color of all games that tied to light gray
+
+  };
+
+  /**
+   * Updates the global tableElements variable, with a row for each row
+   * to be rendered in the table.
+   */
+  updateList(i) {
+    // ******* TODO: PART IV *******
+
+    // Only update list for aggregate clicks, not game clicks
+  }
+
+  /**
+   * Collapses all expanded countries, leaving only rows for aggregate
+   * values per country.
+   */
+  collapseList() {
+
+    // ******* TODO: PART IV *******
+
+  }
+}

hw5/js/tree.js

@@ -0,0 +1,47 @@
+/** Class implementing the tree view. */
+class Tree {
+    /**
+     * Creates a Tree Object
+     */
+    constructor() {
+    }
+
+    /**
+     * Creates a node/edge structure and renders a tree layout based on
+     * the input data
+     *
+     * @param treeData an array of objects that contain parent/child
+     * information.
+     */
+  createTree(treeData) {
+
+    // ******* TODO: PART VI *******
+
+    // Create a tree and give it a size() of 800 by 300.
+
+    // Create a root for the tree using d3.stratify();
+
+    // Add nodes and links to the tree.
+
+  };
+
+  /**
+   * Updates the highlighting in the tree based on the selected team.
+   * Highlights the appropriate team nodes and labels.
+   *
+   * @param row a string specifying which team was selected in the table.
+   */
+  updateTree(row) {
+    // ******* TODO: PART VII *******
+
+  }
+
+  /**
+   * Removes all highlighting from the tree.
+   */
+  clearTree() {
+    // ******* TODO: PART VII *******
+
+    // You only need two lines of code for this! No loops!
+  }
+}