diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index a201858..40ca130 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,13 +6,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="95cda6cc-11fa-479c-aa55-189041317d70" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/hw2/js/Tree.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw2/js/Tree.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/hw3/d3.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw3/d3.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/hw3/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw3/script.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/hw4/d3.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw4/d3.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/hw4/hw4.html" beforeDir="false" afterPath="$PROJECT_DIR$/hw4/hw4.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/hw4/js/barChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw4/js/barChart.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/hw4/js/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw4/js/script.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/hw5/js/table.js" beforeDir="false" afterPath="$PROJECT_DIR$/hw5/js/table.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -27,19 +22,17 @@
     <window id="1">
       <content type="file-editors">
         <state>
-          <leaf>
+          <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
             <file pinned="false" current-in-tab="false">
               <entry file="file://$PROJECT_DIR$/hw3/d3.js">
-                <provider selected="true" editor-type-id="text-editor">
-                  <state relative-caret-position="-3025" />
-                </provider>
+                <provider selected="true" editor-type-id="text-editor" />
               </entry>
             </file>
             <file pinned="false" current-in-tab="false">
               <entry file="file://$PROJECT_DIR$/hw3/script.js">
                 <provider selected="true" editor-type-id="text-editor">
-                  <state relative-caret-position="-1976">
-                    <caret line="40" lean-forward="true" selection-start-line="40" selection-end-line="40" />
+                  <state relative-caret-position="600">
+                    <caret line="40" selection-start-line="40" selection-end-line="40" />
                   </state>
                 </provider>
               </entry>
@@ -60,7 +53,7 @@
     <window id="2">
       <content type="file-editors">
         <state>
-          <leaf>
+          <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
             <file pinned="false" current-in-tab="true">
               <entry file="file://$PROJECT_DIR$/hw4/hw4.html">
                 <provider selected="true" editor-type-id="text-editor">
@@ -79,43 +72,49 @@
     <session id="-934308036">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
+          <entry key="project.closed" value="1" />
+          <entry key="project.open.time.16" value="1" />
           <entry key="project.open.time.8" value="1" />
-          <entry key="project.opened" value="1" />
+          <entry key="project.opened" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="html" value="3" />
-          <entry key="js" value="11" />
+          <entry key="css" value="2" />
+          <entry key="html" value="5" />
+          <entry key="js" value="18" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
-          <entry key="HTML" value="3" />
-          <entry key="JavaScript" value="11" />
+          <entry key="CSS" value="2" />
+          <entry key="HTML" value="5" />
+          <entry key="JavaScript" value="18" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
+          <entry key="css" value="3" />
           <entry key="html" value="102" />
-          <entry key="js" value="2582" />
+          <entry key="js" value="3730" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
+          <entry key="CSS" value="3" />
           <entry key="HTML" value="102" />
-          <entry key="JavaScript" value="2582" />
+          <entry key="JavaScript" value="3730" />
         </counts>
       </usages-collector>
     </session>
   </component>
   <component name="FileEditorManager">
-    <leaf>
-      <file pinned="false" current-in-tab="true">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/hw4/js/barChart.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="120">
-              <caret line="23" column="6" selection-start-line="23" selection-start-column="6" selection-end-line="23" selection-end-column="6" />
+            <state relative-caret-position="292">
+              <caret line="120" column="38" lean-forward="true" selection-start-line="120" selection-start-column="38" selection-end-line="120" selection-end-column="38" />
             </state>
           </provider>
         </entry>
@@ -123,19 +122,82 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/hw4/js/script.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-143">
-              <caret line="10" column="44" selection-start-line="10" selection-start-column="44" selection-end-line="10" selection-end-column="44" />
+            <state relative-caret-position="585">
+              <caret line="39" column="54" selection-start-line="39" selection-start-column="46" selection-end-line="39" selection-end-column="54" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/hw4/d3.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="200">
+              <caret line="614" column="14" selection-start-line="614" selection-start-column="14" selection-end-line="614" selection-end-column="14" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/hw4/styles.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="360">
+              <caret line="24" column="18" lean-forward="true" selection-start-line="24" selection-start-column="18" selection-end-line="24" selection-end-column="18" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/hw5/hw5.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="285">
+              <caret line="19" lean-forward="true" selection-start-line="19" selection-end-line="19" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/hw5/js/table.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="236">
+              <caret line="177" column="32" lean-forward="true" selection-start-line="177" selection-start-column="32" selection-end-line="177" selection-end-column="32" />
             </state>
           </provider>
         </entry>
       </file>
     </leaf>
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
   <component name="FindInProjectRecents">
     <findStrings>
       <find>chooseData</find>
       <find>foreach</find>
+      <find>goalScale</find>
+      <find>updateList</find>
+      <find>tableElements</find>
+      <find>updateTable</find>
+      <find>th.</find>
+      <find>?</find>
+      <find>th</find>
+      <find>^.</find>
+      <find>tr</find>
+      <find>td</find>
+      <find>bar</find>
+      <find>vis</find>
+      <find>selected</find>
     </findStrings>
+    <replaceStrings>
+      <replace>this.gameScale</replace>
+      <replace>===</replace>
+      <replace>d =&gt;</replace>
+      <replace>view</replace>
+      <replace>this.ga</replace>
+    </replaceStrings>
   </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -145,8 +207,11 @@
       <list>
         <option value="$PROJECT_DIR$/hw4/hw4.html" />
         <option value="$PROJECT_DIR$/hw3/script.js" />
-        <option value="$PROJECT_DIR$/hw4/js/script.js" />
         <option value="$PROJECT_DIR$/hw4/js/barChart.js" />
+        <option value="$PROJECT_DIR$/hw5/styles.css" />
+        <option value="$PROJECT_DIR$/Temp.js" />
+        <option value="$PROJECT_DIR$/hw4/js/script.js" />
+        <option value="$PROJECT_DIR$/hw5/js/table.js" />
       </list>
     </option>
   </component>
@@ -165,6 +230,7 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -175,30 +241,29 @@
             <path>
               <item name="CS5890_Data_Visualization" type="b2602c69:ProjectViewProjectNode" />
               <item name="CS5890_Data_Visualization" type="462c0819:PsiDirectoryNode" />
-              <item name="hw2" type="462c0819:PsiDirectoryNode" />
+              <item name="hw4" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="CS5890_Data_Visualization" type="b2602c69:ProjectViewProjectNode" />
               <item name="CS5890_Data_Visualization" type="462c0819:PsiDirectoryNode" />
-              <item name="hw2" type="462c0819:PsiDirectoryNode" />
+              <item name="hw4" type="462c0819:PsiDirectoryNode" />
               <item name="js" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="CS5890_Data_Visualization" type="b2602c69:ProjectViewProjectNode" />
               <item name="CS5890_Data_Visualization" type="462c0819:PsiDirectoryNode" />
-              <item name="hw4" type="462c0819:PsiDirectoryNode" />
+              <item name="hw5" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="CS5890_Data_Visualization" type="b2602c69:ProjectViewProjectNode" />
               <item name="CS5890_Data_Visualization" type="462c0819:PsiDirectoryNode" />
-              <item name="hw4" type="462c0819:PsiDirectoryNode" />
+              <item name="hw5" type="462c0819:PsiDirectoryNode" />
               <item name="js" type="462c0819:PsiDirectoryNode" />
             </path>
           </expand>
           <select />
         </subPane>
       </pane>
-      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -229,12 +294,13 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1569894134559</updated>
-      <workItem from="1569894139996" duration="9680000" />
+      <workItem from="1569894139996" duration="10364000" />
+      <workItem from="1571193890127" duration="4752000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="9680000" />
+    <option name="totallyTimeSpent" value="15116000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -249,20 +315,20 @@
     <frame x="0" y="0" width="1920" height="1080" extended-state="0" />
     <editor active="true" />
     <layout>
-      <window_info id="Favorites" side_tool="true" />
       <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24960506" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Terminal" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" />
       <window_info anchor="bottom" id="Run" order="2" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
-      <window_info anchor="bottom" id="TODO" order="6" visible="true" weight="0.2960396" />
+      <window_info anchor="bottom" id="TODO" order="6" weight="0.2960396" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Terminal" order="9" visible="true" weight="0.32970297" />
+      <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -275,32 +341,16 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/hw3/d3.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-3025" />
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/hw4/d3.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="375">
-          <caret line="106" lean-forward="true" selection-start-line="106" selection-end-line="106" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/hw3/script.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-1976">
-          <caret line="40" lean-forward="true" selection-start-line="40" selection-end-line="40" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/hw2/hw2.html">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/hw4/js/script.js">
+    <entry file="file://$PROJECT_DIR$/hw3/d3.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw3/script.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-143">
-          <caret line="10" column="44" selection-start-line="10" selection-start-column="44" selection-end-line="10" selection-end-column="44" />
+        <state relative-caret-position="600">
+          <caret line="40" selection-start-line="40" selection-end-line="40" />
         </state>
       </provider>
     </entry>
@@ -318,10 +368,59 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/hw5/hw5.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="285">
+          <caret line="19" lean-forward="true" selection-start-line="19" selection-end-line="19" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/hw4/js/barChart.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="120">
-          <caret line="23" column="6" selection-start-line="23" selection-start-column="6" selection-end-line="23" selection-end-column="6" />
+        <state relative-caret-position="292">
+          <caret line="120" column="38" lean-forward="true" selection-start-line="120" selection-start-column="38" selection-end-line="120" selection-end-column="38" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw4/js/script.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="585">
+          <caret line="39" column="54" selection-start-line="39" selection-start-column="46" selection-end-line="39" selection-end-column="54" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw4/d3.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="200">
+          <caret line="614" column="14" selection-start-line="614" selection-start-column="14" selection-end-line="614" selection-end-column="14" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw4/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="360">
+          <caret line="24" column="18" lean-forward="true" selection-start-line="24" selection-start-column="18" selection-end-line="24" selection-end-column="18" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw5/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="370">
+          <caret line="138" column="20" lean-forward="true" selection-start-line="138" selection-start-column="20" selection-end-line="138" selection-end-column="20" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/Temp.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="197">
+          <caret line="39" column="12" lean-forward="true" selection-end-line="140" selection-end-column="7" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw5/js/table.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="236">
+          <caret line="177" column="32" lean-forward="true" selection-start-line="177" selection-start-column="32" selection-end-line="177" selection-end-column="32" />
         </state>
       </provider>
     </entry>
diff --git a/Temp.js b/Temp.js
new file mode 100644
index 0000000..efeb08f
--- /dev/null
+++ b/Temp.js
@@ -0,0 +1,141 @@
+let tr = d3.select('#matchTable').select('th')
+    .selectAll('tr')
+    .data(this.tableElements);
+tr.exit()
+    .remove();
+tr = tr.enter()
+    .append('tr')
+    .on('click', (d,i) => {
+
+        this.updateList(i);
+        this.updateTable();
+    })
+    .on('mouseover', (d,i) => {
+        this.tree.updateTree(this.tableElements[i]);
+    })
+    .on('mouseout', () => {
+        this.tree.clearTree();
+    })
+    .merge(tr);
+
+//Append th elements for the Team Names
+let tableHeader = tr.selectAll("th")
+    .data(d =>  { return[{'type': d.value['type'], 'view': 'text', 'value': d.key}] });
+tableHeader.exit().remove();
+tableHeader = tableHeader.enter()
+    .append('th')
+    .merge(tableHeader);
+
+
+//Append td elements for the remaining columns.
+let td = tr.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']}
+        ] })
+td.exit()
+    .remove();
+td = td.enter()
+    .append('td')
+    .merge(td);
+
+//Data for each cell is of the type: {'type':<'game' or 'aggregate'>, 'value':<[array of 1 or two elements]>}
+//th.select('svg').remove()
+tableHeader.text(d =>  {
+    return d.type==='aggregate' ? d.value : 'x'+d.value;})
+    .style('color', d =>  { return d.type==='aggregate' ? 'black' : 'gray';});
+
+//Populate cells (do one type of cell at a time )
+let goalsColumn = td.filter(d =>  { return d.view === 'goals'});
+let barColumns = td.filter(d =>  {return d.view === 'bar'});
+let textColumn = td.filter(d =>  { return d.view === 'text'});
+
+goalsColumn.select('svg').remove();
+let goalsBody = goalsColumn.append('svg')
+    .attr("width", this.cell.width * 2 + this.cell.buffer)
+    .attr("height", this.cell.height)
+goalsBody.append('rect')
+    .classed('goalBar',true)
+    .attr('fill', d =>  {
+        if (d.value['goalsMade'] > d.value['goalsConceded']) { return 'blue';}
+        else { return 'red'; }
+    })
+    .attr('width', d =>  {
+        if(d.type==='aggregate') {
+            return Math.abs(this.goalScale(d.value['goalsMade'] - d.value['goalsConceded']));
+        }
+        else {
+            return Math.abs(this.goalScale(d.value['goalsMade'] - d.value['goalsConceded']))-10;
+        }
+    })
+    .attr('height', d =>  {
+        if(d.type==='aggregate') {
+            return 10;
+        }
+        else {
+            return 5;
+        }
+    })
+    .attr('x', d =>  {
+        return d.type === 'aggregate'
+            ? d.value['goalsMade'] > d.value['goalsConceded']
+                ? this.goalScale(d.value['goalsConceded'])+6
+                :this.goalScale(d.value['goalsMade'])+6
+            : d.value['goalsMade'] > d.value['goalsConceded']
+                ? this.goalScale(d.value['goalsConceded'])+12
+                : this.goalScale(d.value['goalsMade'])+12;
+
+    })
+    .attr('y', d =>  { return d.type === 'aggregate' ? 5 : 7.5
+    });
+goalsBody.append('circle')
+    .classed("goalCircle", true)
+    .attr('fill', d =>  { return d.type === 'aggregate' ? 'blue' : 'none';})
+    .attr('stroke', d =>  {
+        return d.type === 'aggregate' ? 'none' : d.value['goalsConceded']===d.value['goalsMade'] ? 'gray' : 'blue';})
+    .attr('cy', 10)
+    .attr('cx', d =>  { return this.goalScale(d.value['goalsMade'])+6})
+    .attr('r',5);
+goalsBody.append('circle')
+    .classed("goalCircle", true)
+    .attr('fill', d =>  {return d.type === 'aggregate' ? 'red' : 'none';})
+    .attr('stroke', d =>  {
+        return d.type === 'aggregate' ? 'none' : d.value['goalsConceded'] === d.value['goalsMade'] ? "gray" : "red";
+    })
+    .attr('cy', 10)
+    .attr('cx', d =>  { return this.goalScale(d.value['goalsConceded'])+6})
+    .attr('r',5);
+
+barColumns.style("padding-left", "0px")
+barColumns.select('svg').remove();
+let barBody = barColumns.append('svg').attr("width", this.cell.width).attr("height", this.cell.height);
+barBody.append('rect')
+    .attr('width', d =>  { return this.gameScale(d.value)})
+    .attr('height', this.bar.height)
+    //
+    .attr('x', 0)
+
+    .attr('fill', d => {
+        return this.aggregateColorScale(d.value);});
+
+barBody.append('text')
+    .text(d =>  {return d.value})
+    .classed("label", true)
+    .attr("x", d =>  { return this.gameScale(d.value)-10})
+    .attr("y",15);
+
+textColumn.select('svg').remove();
+let textBody = textColumn.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']
+    });
\ No newline at end of file
diff --git a/hw5/js/table.js b/hw5/js/table.js
index ec43f2c..232d15e 100644
--- a/hw5/js/table.js
+++ b/hw5/js/table.js
@@ -101,16 +101,18 @@ class Table {
   updateTable() {
     // ******* TODO: PART III *******
     // Create table rows
-      console.log(this.tableElements);
-      let row = d3.select('#tbody')
+
+      let tableRow = d3.select('#matchTable').select('tbody')
           .selectAll('tr')
           .data(this.tableElements);
-      row.exit()
+      tableRow.exit()
           .remove();
-      row.enter()
+      tableRow = tableRow.enter()
           .append('tr')
-          .on('click', (d,i) =>{
-              this.tree.updateTree(this.tableElements[i]);
+          .on('click', (d,i) => {
+
+              this.updateList(i);
+              this.updateTable();
           })
           .on('mouseover', (d,i) => {
               this.tree.updateTree(this.tableElements[i]);
@@ -118,62 +120,122 @@ class Table {
           .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();
+          .merge(tableRow);
+
+//Append th elements for the Team Names
+      let tableHeader = tableRow.selectAll("th")
+          .data(d =>  { return[{'type': d.value['type'], 'view': 'text', 'value': d.key}] });
+      tableHeader.exit().remove();
       tableHeader = tableHeader.enter()
           .append('th')
           .merge(tableHeader);
 
 
+//Append td elements for the remaining columns.
+      let tableData = tableRow.selectAll("td")
+          .data(d =>  {
 
-    // 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']}},
+
+              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
+      tableData.exit()
+          .remove();
+      tableData = tableData.enter()
+          .append('td')
+          .merge(tableData);
 
-    //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);
+      tableHeader.text(d =>  {
+          return d.type==='aggregate' ? d.value : 'x'+d.value;})
+          .style('color', d =>  { return d.type==='aggregate' ? 'black' : 'gray';});
 
-      text.select('svg').remove();
-      let textBody = text.append('svg')
+//Populate cells (do one type of cell at a time )
+
+      let textColumn = tableData.filter(d =>  { return d.view === 'text'});
+
+      textColumn.select('svg').remove();
+      let textBody = textColumn.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']});
+          .text(d =>  {
+              return d.value['label']
+          });
+
+      let goalsColumn = tableData.filter(d =>  { return d.view === 'goals'});
+      goalsColumn.select('svg').remove();
+      let goalsBody = goalsColumn.append('svg')
+          .attr("width", this.cell.width * 2 + this.cell.buffer)
+          .attr("height", this.cell.height)
+      goalsBody.append('rect')
+          .classed('goalBar',true)
+          .attr('fill', d =>  { return d.value['goalsMade'] > d.value['goalsConceded'] ? 'blue' : 'red';})
+          .attr('width', d =>  {
+              if(d.type==='aggregate') {
+                  return Math.abs(this.goalScale(d.value['goalsMade'] - d.value['goalsConceded']));
+              }
+              else {
+                  return Math.abs(this.goalScale(d.value['goalsMade'] - d.value['goalsConceded']))-10;
+              }
+          })
+          .attr('height', d =>  { return d.type==='aggregate' ? 10 : 5;})
+          .attr('x', d =>  {
+              return d.type === 'aggregate'
+                  ? d.value['goalsMade'] > d.value['goalsConceded']
+                      ? this.goalScale(d.value['goalsConceded'])+6
+                      :this.goalScale(d.value['goalsMade'])+6
+                  : d.value['goalsMade'] > d.value['goalsConceded']
+                      ? this.goalScale(d.value['goalsConceded'])+12
+                      : this.goalScale(d.value['goalsMade'])+12;
+
+          })
+          .attr('y', d =>  { return d.type === 'aggregate' ? 5 : 7.5
+          });
+      goalsBody.append('circle')
+          .classed("goalCircle", true)
+          .attr('fill', d =>  { return d.type === 'aggregate' ? 'blue' : 'none';})
+          .attr('stroke', d =>  {
+              return d.type === 'aggregate' ? 'none' : d.value['goalsConceded']===d.value['goalsMade'] ? 'gray' : 'blue';})
+          .attr('cy', 10)
+          .attr('cx', d =>  { return this.goalScale(d.value['goalsMade'])+6})
+          .attr('r',5);
+      goalsBody.append('circle')
+          .classed("goalCircle", true)
+          .attr('fill', d =>  {return d.type === 'aggregate' ? 'red' : 'none';})
+          .attr('stroke', d =>  {
+              return d.type === 'aggregate' ? 'none' : d.value['goalsConceded'] === d.value['goalsMade'] ? "gray" : "red";
+          })
+          .attr('cy', 10)
+          .attr('cx', d =>  { return this.goalScale(d.value['goalsConceded'])+6})
+          .attr('r',5);
+
+
+
+      let barColumns = tableData.filter(d =>  {return d.view === 'bar'});
+      barColumns.style("padding-left", "0px")
+      barColumns.select('svg').remove();
+      let barBody = barColumns.append('svg').attr("width", this.cell.width).attr("height", this.cell.height);
+      barBody.append('rect')
+          .attr('width', d =>  { return this.gameScale(d.value)})
+          .attr('height', this.bar.height)
+          //
+          .attr('x', 0)
+
+          .attr('fill', d => {
+              return this.aggregateColorScale(d.value);});
+
+      barBody.append('text')
+          .text(d =>  {return d.value})
+          .classed("label", true)
+          .attr("x", d =>  { return this.gameScale(d.value)-10})
+          .attr("y",15);
 
-    //Create diagrams in the goals column
 
-    //Set the color of all games that tied to light gray
 
   };
 
@@ -183,7 +245,23 @@ class Table {
    */
   updateList(i) {
     // ******* TODO: PART IV *******
+      let teamList = this.tableElements[i].value.games;
+      if(i != this.tableElements.length-1 ) {
+          if(this.tableElements[i+1].value['type']=='aggregate') {
+              for (let j=0; j<teamList.length; j++) {
+                  this.tableElements.splice(j+i+1, 0, teamList[j])
+              }
+          }
+          else {
+              this.tableElements.splice(i+1, teamList.length)
 
+          }
+      }
+      else if(this.tableElements[i].value['type']=='aggregate'){
+          for (let j=0; j<teamList.length; j++) {
+              this.tableElements.splice(j+i+1, 0, teamList[j])
+          }
+      }
     // Only update list for aggregate clicks, not game clicks
   }