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

working

Browse Source
This commit is contained in:
Brady
2019-10-29 23:08:42 -06:00
parent 058abde667
commit 0658642ab0
5 changed files with 344 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
hw6/.idea/workspace.xml generated
View File

@@ -5,14 +5,6 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="549448f0-50d1-4ffb-b5ab-739b510c5318" name="Default Changelist" comment=""> <list default="true" id="549448f0-50d1-4ffb-b5ab-739b510c5318" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../Temp.js" beforeDir="false" afterPath="$PROJECT_DIR$/../Temp.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../hw3/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/../hw3/script.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../hw5/d3.js" beforeDir="false" afterPath="$PROJECT_DIR$/../hw5/d3.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../hw5/js/table.js" beforeDir="false" afterPath="$PROJECT_DIR$/../hw5/js/table.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/hw6.html" beforeDir="false" afterPath="$PROJECT_DIR$/hw6.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/css/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/public/css/style.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/js/electoralVoteChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/electoralVoteChart.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/public/js/electoralVoteChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/electoralVoteChart.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/js/tileChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/tileChart.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/public/js/tileChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/tileChart.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/js/votePercentageChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/votePercentageChart.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/public/js/votePercentageChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/votePercentageChart.js" afterDir="false" />
@@ -39,28 +31,28 @@
<counts> <counts>
<entry key="css" value="1" /> <entry key="css" value="1" />
<entry key="html" value="1" /> <entry key="html" value="1" />
<entry key="js" value="6" /> <entry key="js" value="8" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.types.open"> <usages-collector id="statistics.file.types.open">
<counts> <counts>
<entry key="CSS" value="1" /> <entry key="CSS" value="1" />
<entry key="HTML" value="1" /> <entry key="HTML" value="1" />
<entry key="JavaScript" value="6" /> <entry key="JavaScript" value="8" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.extensions.edit"> <usages-collector id="statistics.file.extensions.edit">
<counts> <counts>
<entry key="css" value="4" /> <entry key="css" value="4" />
<entry key="html" value="53" /> <entry key="html" value="53" />
<entry key="js" value="636" /> <entry key="js" value="830" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.types.edit"> <usages-collector id="statistics.file.types.edit">
<counts> <counts>
<entry key="CSS" value="4" /> <entry key="CSS" value="4" />
<entry key="HTML" value="53" /> <entry key="HTML" value="53" />
<entry key="JavaScript" value="636" /> <entry key="JavaScript" value="830" />
</counts> </counts>
</usages-collector> </usages-collector>
</session> </session>
@@ -89,8 +81,8 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/public/js/tileChart.js"> <entry file="file://$PROJECT_DIR$/public/js/tileChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="304"> <state relative-caret-position="813">
<caret line="86" column="59" lean-forward="true" selection-start-line="86" selection-start-column="59" selection-end-line="86" selection-end-column="59" /> <caret line="78" column="95" lean-forward="true" selection-start-line="78" selection-start-column="95" selection-end-line="78" selection-end-column="95" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -98,17 +90,35 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/public/js/yearChart.js"> <entry file="file://$PROJECT_DIR$/public/js/yearChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360"> <state relative-caret-position="178">
<caret line="154" column="25" selection-start-line="154" selection-start-column="25" selection-end-line="154" selection-end-column="25" /> <caret line="134" column="15" selection-start-line="134" selection-start-column="11" selection-end-line="134" selection-end-column="15" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="372">
<caret line="132" column="8" selection-start-line="132" selection-start-column="8" selection-end-line="132" selection-end-column="8" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js"> <entry file="file://$PROJECT_DIR$/public/js/shiftChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="505"> <state relative-caret-position="352">
<caret line="298" column="22" selection-start-line="298" selection-start-column="22" selection-end-line="298" selection-end-column="22" /> <caret line="28" column="15" selection-start-line="28" selection-start-column="15" selection-end-line="28" selection-end-column="15" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/data/Year_Timeline_1968.csv">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="285">
<caret line="19" column="150" lean-forward="true" selection-start-line="19" selection-start-column="150" selection-end-line="19" selection-end-column="150" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -116,17 +126,17 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/public/css/style.css"> <entry file="file://$PROJECT_DIR$/public/css/style.css">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="454"> <state relative-caret-position="447">
<caret line="117" lean-forward="true" selection-start-line="117" selection-end-line="117" /> <caret line="88" column="9" selection-start-line="88" selection-start-column="1" selection-end-line="88" selection-end-column="9" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/public/js/votePercentageChart.js"> <entry file="file://$PROJECT_DIR$/public/js/votePercentageChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="388"> <state relative-caret-position="559">
<caret line="69" column="24" selection-start-line="69" selection-start-column="24" selection-end-line="69" selection-end-column="24" /> <caret line="64" column="30" lean-forward="true" selection-start-line="64" selection-start-column="30" selection-end-line="64" selection-end-column="30" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -142,8 +152,11 @@
<find>electionResult</find> <find>electionResult</find>
<find>gSvg</find> <find>gSvg</find>
<find>'r'</find> <find>'r'</find>
<find>selected</find>
<find>i</find> <find>i</find>
<find>selected</find>
<find>democrat</find>
<find>text</find>
<find>(d</find>
</findStrings> </findStrings>
</component> </component>
<component name="Git.Settings"> <component name="Git.Settings">
@@ -154,10 +167,10 @@
<list> <list>
<option value="$PROJECT_DIR$/hw6.html" /> <option value="$PROJECT_DIR$/hw6.html" />
<option value="$PROJECT_DIR$/public/css/style.css" /> <option value="$PROJECT_DIR$/public/css/style.css" />
<option value="$PROJECT_DIR$/public/js/votePercentageChart.js" />
<option value="$PROJECT_DIR$/public/js/tileChart.js" /> <option value="$PROJECT_DIR$/public/js/tileChart.js" />
<option value="$PROJECT_DIR$/public/js/yearChart.js" /> <option value="$PROJECT_DIR$/public/js/yearChart.js" />
<option value="$PROJECT_DIR$/public/js/electoralVoteChart.js" /> <option value="$PROJECT_DIR$/public/js/electoralVoteChart.js" />
<option value="$PROJECT_DIR$/public/js/votePercentageChart.js" />
</list> </list>
</option> </option>
</component> </component>
@@ -190,6 +203,17 @@
<item name="hw6" type="b2602c69:ProjectViewProjectNode" /> <item name="hw6" type="b2602c69:ProjectViewProjectNode" />
<item name="hw6" type="462c0819:PsiDirectoryNode" /> <item name="hw6" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path>
<item name="hw6" type="b2602c69:ProjectViewProjectNode" />
<item name="hw6" type="462c0819:PsiDirectoryNode" />
<item name="bower_components" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="hw6" type="b2602c69:ProjectViewProjectNode" />
<item name="hw6" type="462c0819:PsiDirectoryNode" />
<item name="bower_components" type="462c0819:PsiDirectoryNode" />
<item name="d3-tip" type="462c0819:PsiDirectoryNode" />
</path>
<path> <path>
<item name="hw6" type="b2602c69:ProjectViewProjectNode" /> <item name="hw6" type="b2602c69:ProjectViewProjectNode" />
<item name="hw6" type="462c0819:PsiDirectoryNode" /> <item name="hw6" type="462c0819:PsiDirectoryNode" />
@@ -220,6 +244,11 @@
<property name="nodejs_npm_path_reset_for_default_project" value="true" /> <property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="run.code.analysis.last.selected.profile" value="pProject Default" /> <property name="run.code.analysis.last.selected.profile" value="pProject Default" />
</component> </component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/public/js" />
</key>
</component>
<component name="RunDashboard"> <component name="RunDashboard">
<option name="ruleStates"> <option name="ruleStates">
<list> <list>
@@ -247,7 +276,7 @@
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="7461000" /> <option name="totallyTimeSpent" value="10332000" />
</component> </component>
<component name="TodoView"> <component name="TodoView">
<todo-panel id="selected-file"> <todo-panel id="selected-file">
@@ -262,13 +291,9 @@
<frame x="0" y="23" width="1920" height="1000" extended-state="6" /> <frame x="0" y="23" width="1920" height="1000" extended-state="6" />
<editor active="true" /> <editor active="true" />
<layout> <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 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 id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" /> <window_info id="Favorites" order="2" side_tool="true" />
<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 anchor="bottom" id="Message" order="0" /> <window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" /> <window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" /> <window_info anchor="bottom" id="Run" order="2" />
@@ -276,6 +301,10 @@
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" /> <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="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" visible="true" weight="0.32929516" /> <window_info anchor="bottom" id="TODO" order="6" visible="true" weight="0.32929516" />
<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" />
<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="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" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" /> <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -287,6 +316,18 @@
<component name="VcsContentAnnotationSettings"> <component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" /> <option name="myLimit" value="2678400000" />
</component> </component>
<component name="XDebuggerManager">
<breakpoint-manager>
<breakpoints>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/public/js/electoralVoteChart.js</url>
<line>124</line>
<properties lambdaOrdinal="-1" />
<option name="timeStamp" value="1" />
</line-breakpoint>
</breakpoints>
</breakpoint-manager>
</component>
<component name="editorHistoryManager"> <component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/bower_components/d3/d3.js"> <entry file="file://$PROJECT_DIR$/bower_components/d3/d3.js">
<provider selected="true" editor-type-id="text-editor" /> <provider selected="true" editor-type-id="text-editor" />
@@ -301,38 +342,52 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/public/css/style.css"> <entry file="file://$PROJECT_DIR$/data/Year_Timeline_1968.csv">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="454"> <state relative-caret-position="285">
<caret line="117" lean-forward="true" selection-start-line="117" selection-end-line="117" /> <caret line="19" column="150" lean-forward="true" selection-start-line="19" selection-start-column="150" selection-end-line="19" selection-end-column="150" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/public/js/tileChart.js"> <entry file="file://$PROJECT_DIR$/public/js/shiftChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="304"> <state relative-caret-position="352">
<caret line="86" column="59" lean-forward="true" selection-start-line="86" selection-start-column="59" selection-end-line="86" selection-end-column="59" /> <caret line="28" column="15" selection-start-line="28" selection-start-column="15" selection-end-line="28" selection-end-column="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/js/yearChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
<caret line="154" column="25" selection-start-line="154" selection-start-column="25" selection-end-line="154" selection-end-column="25" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="505">
<caret line="298" column="22" selection-start-line="298" selection-start-column="22" selection-end-line="298" selection-end-column="22" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/public/js/votePercentageChart.js"> <entry file="file://$PROJECT_DIR$/public/js/votePercentageChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="388"> <state relative-caret-position="559">
<caret line="69" column="24" selection-start-line="69" selection-start-column="24" selection-end-line="69" selection-end-column="24" /> <caret line="64" column="30" lean-forward="true" selection-start-line="64" selection-start-column="30" selection-end-line="64" selection-end-column="30" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/css/style.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="447">
<caret line="88" column="9" selection-start-line="88" selection-start-column="1" selection-end-line="88" selection-end-column="9" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/js/tileChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="813">
<caret line="78" column="95" lean-forward="true" selection-start-line="78" selection-start-column="95" selection-end-line="78" selection-end-column="95" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/js/yearChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="178">
<caret line="134" column="15" selection-start-line="134" selection-start-column="11" selection-end-line="134" selection-end-column="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="372">
<caret line="132" column="8" selection-start-line="132" selection-start-column="8" selection-end-line="132" selection-end-column="8" />
</state> </state>
</provider> </provider>
</entry> </entry>

283
hw6/public/js/electoralVoteChart.js
View File

@@ -73,189 +73,106 @@ class ElectoralVoteChart {
//HINT: Use .electoralVotesNote class to style this text element //HINT: Use .electoralVotesNote class to style this text element
//HINT: Use the chooseClass method to style your elements based on party wherever necessary. //HINT: Use the chooseClass method to style your elements based on party wherever necessary.
let electionArray = d3.nest()
.key(function(d) {return d["State_Winner"]} ) this.svg.selectAll("*").remove();
.sortValues(function(a,b) {
return parseFloat(a.RD_Difference) - parseFloat(b.RD_Difference) //Group the states based on the winning party for the state
let allVotes = 0;
let independentParty = [];
let democratParty = [];
let republicanParty = [];
electionResult.forEach(d => {
if(d.RD_Difference < 0) democratParty.push(d);
else if (d.RD_Difference > 0) republicanParty.push(d);
else independentParty.push(d);
}) })
.entries(electionResult)
let statesIArray = []; //Sorts group of states based on the margin of victory
let statesRArray = []; independentParty.sort((a, b) => b.Total_EV - a.Total_EV);
let statesDArray = []; democratParty.sort((a, b) => a.RD_Difference - b.RD_Difference);
republicanParty.sort((a, b) => a.RD_Difference - b.RD_Difference);
for(let i=0; i<electionArray.length; i++) let sortedData = [];
{ sortedData = sortedData.concat(independentParty);
if(electionArray[i].key == 'I') sortedData = sortedData.concat(democratParty);
statesIArray = electionArray[i].values sortedData = sortedData.concat(republicanParty);
if(electionArray[i].key == 'R') let xCoordinates = [];
statesRArray = electionArray[i].values sortedData.forEach(d => {
xCoordinates.push(allVotes);
allVotes += parseInt(d.Total_EV);
});
if(electionArray[i].key == 'D') let electoralVoteScale = d3.scaleLinear()
statesDArray = electionArray[i].values .domain([0, allVotes])
.range([0, this.svgWidth]);
}
let statesArray = []
statesArray = statesArray.concat(statesIArray)
statesArray = statesArray.concat(statesDArray)
statesArray = statesArray.concat(statesRArray)
//Create the stacked bar chart. //Create the stacked bar chart.
//Use the global color scale to color code the rectangles. let electoralVoteChart = this.svg
//HINT: Use .electoralVotes class to style your bars. .selectAll("rect")
var self = this; .data(sortedData)
.enter();
this.xScale = d3.scaleLinear() electoralVoteChart
.domain([0, d3.sum(statesArray, d => parseInt(d['Total_EV']))]) .append("rect")
.range([0, self.svgWidth]); .attr("width", d => this.svgWidth * d.Total_EV / allVotes)
.attr("height", 20)
.attr("x", (_, i) => electoralVoteScale(xCoordinates[i]))
.attr("y", 50)
//Uses the global color scale to color code the rectangles.
.attr("fill", d => d.RD_Difference === "0" ? "green" : colorScale(d.RD_Difference))
.attr("class", "electoralVotes")
let rectG = this.svg.select('g'); //Displays the total count of electoral votes won by the Democrat and Republican party
if(rectG.empty())
{
rectG = this.svg.append('g')
}
let statesRect = rectG.selectAll('rect')
.data(statesArray);
statesRect.exit().remove();
statesRect = statesRect.enter().append('rect').merge(statesRect);
let votesSeen = 0;
statesRect
.attr('x', function(d){
let x = self.xScale(votesSeen);
votesSeen = votesSeen + parseInt(d['Total_EV']);
return x;
})
.attr('y', 5*this.svgHeight/8)
.attr('width', function(d){
return self.xScale(d['Total_EV'])
})
.attr('height', this.svgHeight/4)
.attr('class', '')
.attr('fill', function(d){
if(d['State_Winner'] == 'I')
{
d3.select(this).attr('class', function(d){
return self.chooseClass(d["State_Winner"])
});
return;
}
return colorScale(d["RD_Difference"])
})
.attr('rd_diff', function(d){
return d["RD_Difference"];
})
.attr('state_winner', function(d){
return d["State_Winner"];
})
.attr('abbr', function(d){
return d["Abbreviation"];
})
.attr('stroke', '#ffffff')
.attr('stroke-width', 1)
//Display total count of electoral votes won by the Democrat and Republican party
//on top of the corresponding groups of bars. //on top of the corresponding groups of bars.
//HINT: Use the .electoralVoteText class to style your text elements; Use this in combination with electoralVoteChart
// chooseClass to get a color based on the party wherever necessary .append("text")
.text(d => d.I_EV_Total)
.attr("y", 50)
.attr("class", "electoralVoteText independent")
let textDEV = this.svg.selectAll('.electoralVoteText').filter('.democrat') electoralVoteChart
.data([d3.sum(statesDArray, d => parseInt(d['D_EV']))]) .append("text")
.text(d => d.D_EV_Total)
.attr("y", 50)
.attr("dx", d => d.I_EV_Total === "" ? 0 : 120)
.attr("class", "electoralVoteText democrat")
textDEV = textDEV.enter().append('text').merge(textDEV) electoralVoteChart
.append("text")
textDEV.classed('electoralVoteText', true) .text(d => d.R_EV_Total)
.classed('democrat', true) .attr("y", 50)
.attr('x', 0) .attr("dx", this.svgWidth)
.attr('y', 5*this.svgHeight/8 - 10) .attr("class", "electoralVoteText republican");
.attr('text-anchor', 'start')
.text(function(d){
return d;
})
let textIEV = this.svg.selectAll('.electoralVoteText').filter('.independent')
.data([d3.sum(statesIArray, d => parseInt(d['I_EV']))])
if(statesIArray.length != 0)
{
textDEV.attr('x', this.svgWidth/5).attr('text-anchor', 'end')
textIEV = textIEV.enter().append('text').merge(textIEV)
textIEV.classed('electoralVoteText', true)
.classed('independent', true)
.attr('x', 0)
.attr('y', 5*this.svgHeight/8 - 10)
.attr('text-anchor', 'start')
.text(function(d){
return d;
})
}
else
{
textIEV = textIEV.data([]);
textIEV.exit().remove();
textIEV.enter().merge(textIEV)
}
let textREV = this.svg.selectAll('.electoralVoteText').filter('.republican')
.data([d3.sum(statesRArray, d => parseInt(d['R_EV']))])
textREV = textREV.enter().append('text').merge(textREV)
textREV.classed('electoralVoteText', true)
.classed('republican', true)
.attr('x', this.svgWidth)
.attr('y', 5*this.svgHeight/8 - 10)
.attr('text-anchor', 'end')
.text(function(d){
return d;
})
//Display a bar with minimal width in the center of the bar chart to indicate the 50% mark //Display a bar with minimal width in the center of the bar chart to indicate the 50% mark
//HINT: Use .middlePoint class to style this bar. electoralVoteChart
.append("line")
.attr("x1", this.svgWidth/2)
.attr("y1", 50)
.attr("x2", this.svgWidth/2)
.attr("y2", 50)
.style("stroke", "black")
.style("stroke-width", 2)
.attr("class", "middlePoint")
let evLine = this.svg.selectAll('path'); //Displays the text mentioning the total number of electoral votes required
if(evLine.empty())
{
var data = [[this.svgWidth/2, 5*this.svgHeight/8 - 5], [this.svgWidth/2, 5*this.svgHeight/8 + this.svgHeight/4 + 5]];
var lineGenerator = d3.line();
var pathString = lineGenerator(data);
this.svg.append('path')
.attr('d', pathString)
.attr('stroke-width', '2')
.attr('stroke', '#000')
}
//Just above this, display the text mentioning the total number of electoral votes required
// to win the elections throughout the country // to win the elections throughout the country
//HINT: Use .electoralVotesNote class to style this text element let votesToWin
if (electionResult[0].Year == 1960)
votesToWin = 269
else if(electionResult[0].Year > 1960)
votesToWin = 270
else
votesToWin = 266
let evText = this.svg.selectAll('.electoralVotesNote') electoralVoteChart
.data([d3.sum(statesArray, d => parseInt(d['Total_EV']))]) .append("text")
.text(`Electoral Vote (${votesToWin} needed to win)`)
evText = evText.enter().append('text').merge(evText) .attr('y', 45)
.attr("dx", this.svgWidth/2 - 140)
evText.classed('electoralVotesNote', true) .attr("font-size", 16)
.attr('x', this.svgWidth/2)
.attr('y', 5*this.svgHeight/8 - 15)
.text(function(d){
let ev = d/2;
return 'Electoral Vote (' + ev + ' needed to win)';
})
//HINT: Use the chooseClass method to style your elements based on party wherever necessary.
//******* TODO: PART V ******* //******* TODO: PART V *******
//Implement brush on the bar chart created above. //Implement brush on the bar chart created above.
@@ -263,40 +180,6 @@ class ElectoralVoteChart {
//Call the update method of shiftChart and pass the data corresponding to brush selection. //Call the update method of shiftChart and pass the data corresponding to brush selection.
//HINT: Use the .brush class to style the brush. //HINT: Use the .brush class to style the brush.
let brushed = function() {
var selection = d3.event.selection;
if(selection == null)
return;
let selectedStatesArray = new Array();
let selectedStates = statesRect.filter(function(d){
let currentRect = d3.select(this);
let x1 = parseInt(currentRect.attr('x'));
let x2 = x1 + parseInt(currentRect.attr('width'));
if(x1 > selection[0] && x2 < selection[1])
{
selectedStatesArray.push(d);
return true;
}
return false;
})
console.log(selection)
console.log(selectedStatesArray)
self.shiftChart.update(selectedStatesArray)
};
var brush = d3.brushX()
.extent([[0, 5*this.svgHeight/8 - 5], [this.svgWidth, 5*this.svgHeight/8 + this.svgHeight/4 + 5]])
.on("end", brushed);
rectG.append("g")
.attr("class", "brush")
.call(brush)
}; };

89
hw6/public/js/tileChart.js
View File

@@ -78,95 +78,6 @@ class TileChart {
//then, vote percentage and number of votes won by each party. //then, vote percentage and number of votes won by each party.
//HINT: Use the .republican, .democrat and .independent classes to style your elements. //HINT: Use the .republican, .democrat and .independent classes to style your elements.
var self = this;
let statesG = this.svg.selectAll('g')
.data(electionResult);
statesG.exit().remove();
statesG = statesG.enter().append('g').merge(statesG);
let statesRect = statesG.selectAll('rect')
.data(function(d){
return d3.select(this).data()
});
//statesRect.exit().remove();
statesRect = statesRect.enter().append('rect').merge(statesRect);
statesRect
.attr('width', this.svgWidth/this.maxColumns)
.attr('height', this.svgHeight/this.maxRows)
.attr('x', function(d){
return (self.svgWidth/self.maxColumns)*(parseInt(d["Space"]))
})
.attr('y', function(d){
return (self.svgHeight/self.maxRows)*(parseInt(d["Row"]))
})
.attr('fill', function(d){
return colorScale(d["RD_Difference"])
})
.attr('space-row', function(d){
return d["Space"] + '-' + d["Row"];
})
.attr('stroke', '#ffffff')
.attr('stroke-width', 1)
.call(tip)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
let statesNameText = statesG.selectAll('text').filter('.stateName')
.data(function(d){
return d3.select(this).data()
});
//statesNameText.exit().remove();
statesNameText = statesNameText.enter().append('text').merge(statesNameText);
statesNameText
.attr('x', function(d){
let startX = (self.svgWidth/self.maxColumns)*(parseInt(d["Space"]))
return startX + (self.svgWidth/self.maxColumns)/2
})
.attr('y', function(d){
let startY = (self.svgHeight/self.maxRows)*(parseInt(d["Row"]))
return startY + (self.svgHeight/self.maxRows)/2
})
.attr('class', 'tilestext stateName')
.text(function(d){
return d["Abbreviation"]
})
.call(tip)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
let statesEVText = statesG.selectAll('text').filter('.stateEV')
.data(function(d){
return d3.select(this).data()
});
statesEVText.exit().remove();
statesEVText = statesEVText.enter().append('text').merge(statesEVText);
statesEVText
.attr('x', function(d){
let startX = (self.svgWidth/self.maxColumns)*(parseInt(d["Space"]))
return startX + (self.svgWidth/self.maxColumns)/2
})
.attr('y', function(d){
let startY = (self.svgHeight/self.maxRows)*(parseInt(d["Row"]))
return startY + (self.svgHeight/self.maxRows)/2 + 15;
})
.attr('class', 'tilestext stateEV')
.text(function(d){
return d["Total_EV"]
})
.call(tip)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
}; };

139
hw6/public/js/votePercentageChart.js
View File

@@ -65,156 +65,23 @@ class VotePercentageChart {
//Create the stacked bar chart. //Create the stacked bar chart.
//Use the global color scale to color code the rectangles. //Use the global color scale to color code the rectangles.
//HINT: Use .votesPercentage class to style your bars. //HINT: Use .votesPercentage class to style your bars.
let self = this;
electionResult[0].
let iPercent = parseFloat(electionResult[0].I_PopularPercentage === "" ? 0: electionResult[0].I_PopularPercentage);
let dPercent = parseFloat(electionResult[0].D_PopularPercentage);
let rPercent = parseFloat(electionResult[0].R_PopularPercentage);
let percentArray = [];
percentArray.push({party: "I", percent:iPercent, nominee: electionResult[0].I_Nominee_prop});
percentArray.push({party: "D", percent:dPercent, nominee: electionResult[0].D_Nominee_prop});
percentArray.push({party: "R", percent:rPercent, nominee: electionResult[0].R_Nominee_prop});
percentArray.forEach(function(d){
d.D_Nominee_prop= electionResult[0].D_Nominee_prop;
d.R_Nominee_prop= electionResult[0].R_Nominee_prop;
d.I_Nominee_prop= electionResult[0].I_Nominee_prop;
d.D_Votes = electionResult[0].D_Votes;
d.R_Votes = electionResult[0].R_Votes;
d.I_Votes = electionResult[0].I_Votes;
})
//for reference:https://github.com/Caged/d3-tip
//Use this tool tip element to handle any hover over the chart
let tip = d3.tip().attr('class', 'd3-tip')
.direction('s')
.offset(function() {
return [0,0];
})
.html((d)=> {
let tooltip_data = {
"result":[
{"nominee": d.D_Nominee_prop,"votecount": d.D_Votes,"percentage": dPercent,"party":"D"} ,
{"nominee": d.R_Nominee_prop,"votecount": d.R_Votes,"percentage": rPercent,"party":"R"} ,
{"nominee": d.I_Nominee_prop,"votecount": d.I_Votes,"percentage": iPercent,"party":"I"}
]
};
return self.tooltip_render(tooltip_data);
});
// ******* TODO: PART III *******
//Create the stacked bar chart.
//Use the global color scale to color code the rectangles.
//HINT: Use .votesPercentage class to style your bars.
let xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, this.svgWidth]);
let xPosition = [0];
percentArray.forEach(function(data){
if(xPosition.length!==0){
xPosition.push(xPosition[xPosition.length-1]+data.percent);
}
});
let rect = this.svg.selectAll(".votesPercentage").data(percentArray);
let newRect = rect.enter().append("rect");
rect.exit().remove();
rect = newRect.merge(rect);
rect.attr("x", function(d,i){
return xScale(xPosition[i]);
})
.attr("y", 150)
.attr("height", 20)
.attr("width", function(d, i){
return xScale(d.percent);
})
.attr("class", function(d, i){
return self.chooseClass(d.party);
})
.classed("votesPercentage", true);
//Display the total percentage of votes won by each party //Display the total percentage of votes won by each party
//on top of the corresponding groups of bars. //on top of the corresponding groups of bars.
//HINT: Use the .votesPercentageText class to style your text elements; Use this in combination with //HINT: Use the .votesPercentageText class to style your text elements; Use this in combination with
// chooseClass to get a color based on the party wherever necessary // chooseClass to get a color based on the party wherever necessary
let text = this.svg.selectAll(".votesPercentageText").data(percentArray);
let newText = text.enter().append("text");
text.exit().remove();
text = newText.merge(text);
text.attr("x", function(d, i){
if(i===percentArray.length-1){
return xScale(xPosition[xPosition.length-1]);
} else {
return xScale(xPosition[i]);
}
})
.attr("y", 120)
.text(function(d, i){
return d.percent===0? "": d.percent+"%";
})
.attr("class", function(d,i){
return self.chooseClass(d.party);
})
.classed("votesPercentageText", true);
let nominees = this.svg.selectAll(".nomineeNames").data(percentArray);
let newNominees = nominees.enter().append("text");
nominees.exit().remove();
nominees = newNominees.merge(nominees);
nominees.attr("x", function(d, i){
if(i===percentArray.length-1){
return xScale(xPosition[xPosition.length-1]);
} else {
return xScale(xPosition[i]);
}
})
.attr("y", 80)
.text(function(d, i){
return d.nominee;
})
.attr("class", function(d,i){
return self.chooseClass(d.party);
})
.classed("votesPercentageText", true);
if(percentArray[0].percent!==0){
let dText = text.filter(function(d){
return d.party=== 'D';
});
dText.attr("transform", "translate(50, 0)");
let dNominee = nominees.filter(function(d){
return d.party=== 'D';
});
dNominee.attr("transform", "translate(180, 0)");
}
//Display a bar with minimal width in the center of the bar chart to indicate the 50% mark //Display a bar with minimal width in the center of the bar chart to indicate the 50% mark
//HINT: Use .middlePoint class to style this bar. //HINT: Use .middlePoint class to style this bar.
let midPosition = xScale(xPosition[xPosition.length-1]/2);
this.svg.selectAll(".middlePoint").remove();
this.svg.append("rect")
.attr("x", xScale(50))
.attr("y", 145)
.attr("height", 30)
.attr("width", 3)
.classed("middlePoint", true);
//Just above this, display the text mentioning details about this mark on top of this bar //Just above this, display the text mentioning details about this mark on top of this bar
//HINT: Use .votesPercentageNote class to style this text element //HINT: Use .votesPercentageNote class to style this text element
this.svg.selectAll(".votesPercentageNote").remove();
this.svg.append("text")
.attr("x", xScale(50))
.attr("y", 120)
.classed("votesPercentageNote", true)
.text("Popular Vote(50%)");
//Call the tool tip on hover over the bars to display stateName, count of electoral votes. //Call the tool tip on hover over the bars to display stateName, count of electoral votes.
//then, vote percentage and number of votes won by each party. //then, vote percentage and number of votes won by each party.
this.svg.call(tip);
rect.on("mouseover", tip.show); //HINT: Use the chooseClass method to style your elements based on party wherever necessary.
rect.on("mouseout", tip.hide);
}; };

35
hw6/public/js/yearChart.js
View File

@@ -69,7 +69,7 @@ class YearChart {
.domain(domain) .domain(domain)
.range(range); .range(range);
// ******* DONE: PART I ******* // ******* TODO: PART I *******
// Create the chart by adding circle elements representing each election year // Create the chart by adding circle elements representing each election year
@@ -91,6 +91,7 @@ class YearChart {
//Election information corresponding to that year should be loaded and passed to //Election information corresponding to that year should be loaded and passed to
// the update methods of other visualizations // the update methods of other visualizations
let domainOfYears = [];
let yChart = this; let yChart = this;
var data = [[0, (this.svgHeight - 40)/2], [this.svgWidth, (this.svgHeight - 40)/2]]; var data = [[0, (this.svgHeight - 40)/2], [this.svgWidth, (this.svgHeight - 40)/2]];
@@ -133,32 +134,20 @@ class YearChart {
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text((d) => {return d.YEAR}); .text((d) => {return d.YEAR});
//Style the chart by adding a dashed line that connects all these years. years
//HINT: Use .lineChart to style this dashed line .on("click", d => {
//Done. Before adding circles
//Clicking on any specific year should highlight that circle and update the rest of the visualizations
//HINT: Use .highlighted class to style the highlighted circle
years.selectAll('circle')
.on('mouseover', function (d) {
d3.select(this).classed('highlighted', true);
})
.on('mouseout', function (d) {
years.selectAll('circle').classed('highlighted', false);
})
.on('click', function (d) {
years.selectAll('circle').classed('selected', false); years.selectAll('circle').classed('selected', false);
d3.select(this).classed('selected', true); d3.select(d3.event.target).classed("selected", true);
let file = 'data/Year_Timeline_' + d.YEAR + '.csv'; // Election information corresponding to the year selected is loaded and passed to the update methods of the other visualizations.
d3.csv(`data/Year_Timeline_${d.YEAR}.csv`).then(electionResult => {
d3.csv(file, function (error, electionResult) { this.electoralVoteChart.update(electionResult, this.colorScale);
yChart.electoralVoteChart.update(electionResult, self.colorScale); this.votePercentageChart.update(electionResult, this.colorScale);
yChart.votePercentageChart.update(electionResult); this.tileChart.update(electionResult, this.colorScale)
yChart.tileChart.update(electionResult, self.colorScale);
}); });
}) })
.on("mouseenter", () => d3.select(d3.event.target).classed("highlighted", true))
.on("mouseleave", () => d3.select(d3.event.target).classed("highlighted", false));
//******* TODO: EXTRA CREDIT ******* //******* TODO: EXTRA CREDIT *******