bradybod-usu/cs5890_data_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

just fixing little bugs

Browse Source
This commit is contained in:
Brady
2019-10-15 22:08:23 -06:00
parent 4024107844
commit 778fe73e4a
3 changed files with 425 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
.idea/workspace.xml generated
View File

@@ -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>

141
Temp.js Normal file
View File

@@ -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']
});

162
hw5/js/table.js
View File

@@ -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
}