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

working ish

Browse Source
This commit is contained in:
Brady
2019-10-29 23:27:34 -06:00
parent 0658642ab0
commit 37cef04ae1
2 changed files with 19 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,9 +6,6 @@
<component name="ChangeListManager">
<list default="true" id="549448f0-50d1-4ffb-b5ab-739b510c5318" name="Default Changelist" comment="">
<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/votePercentageChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/votePercentageChart.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/js/yearChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/yearChart.js" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
@@ -45,14 +42,14 @@
<counts>
<entry key="css" value="4" />
<entry key="html" value="53" />
<entry key="js" value="830" />
<entry key="js" value="1064" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
<counts>
<entry key="CSS" value="4" />
<entry key="HTML" value="53" />
<entry key="JavaScript" value="830" />
<entry key="JavaScript" value="1064" />
</counts>
</usages-collector>
</session>
@@ -99,8 +96,8 @@
<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 relative-caret-position="219">
<caret line="168" column="88" selection-start-line="168" selection-start-column="88" selection-end-line="168" selection-end-column="88" />
</state>
</provider>
</entry>
@@ -276,7 +273,7 @@
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="10332000" />
<option name="totallyTimeSpent" value="11448000" />
</component>
<component name="TodoView">
<todo-panel id="selected-file">
@@ -291,7 +288,7 @@
<frame x="0" y="23" width="1920" height="1000" extended-state="6" />
<editor active="true" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24960506" />
<window_info 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="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
@@ -300,10 +297,10 @@
<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.32929516" />
<window_info anchor="bottom" id="TODO" order="6" 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 active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.32929516" />
<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" />
@@ -321,7 +318,7 @@
<breakpoints>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/public/js/electoralVoteChart.js</url>
<line>124</line>
<line>123</line>
<properties lambdaOrdinal="-1" />
<option name="timeStamp" value="1" />
</line-breakpoint>
@@ -386,8 +383,8 @@
</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 relative-caret-position="219">
<caret line="168" column="88" selection-start-line="168" selection-start-column="88" selection-end-line="168" selection-end-column="88" />
</state>
</provider>
</entry>

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

@@ -76,7 +76,6 @@ class ElectoralVoteChart {
this.svg.selectAll("*").remove();
//Group the states based on the winning party for the state
let allVotes = 0;
let independentParty = [];
let democratParty = [];
@@ -86,12 +85,12 @@ class ElectoralVoteChart {
if(d.RD_Difference < 0) democratParty.push(d);
else if (d.RD_Difference > 0) republicanParty.push(d);
else independentParty.push(d);
})
});
//Sorts group of states based on the margin of victory
independentParty.sort((a, b) => b.Total_EV - a.Total_EV);
democratParty.sort((a, b) => a.RD_Difference - b.RD_Difference);
republicanParty.sort((a, b) => a.RD_Difference - b.RD_Difference);
independentParty.sort((a, b) => b.Total_EV - a.Total_EV);
let sortedData = [];
sortedData = sortedData.concat(independentParty);
@@ -108,7 +107,6 @@ class ElectoralVoteChart {
.domain([0, allVotes])
.range([0, this.svgWidth]);
//Create the stacked bar chart.
let electoralVoteChart = this.svg
.selectAll("rect")
.data(sortedData)
@@ -120,24 +118,21 @@ class ElectoralVoteChart {
.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")
.attr("class", "electoralVotes");
//Displays the total count of electoral votes won by the Democrat and Republican party
//on top of the corresponding groups of bars.
electoralVoteChart
.append("text")
.text(d => d.I_EV_Total)
.attr("y", 50)
.attr("class", "electoralVoteText independent")
.attr("class", "electoralVoteText independent");
electoralVoteChart
.append("text")
.text(d => d.D_EV_Total)
.attr("y", 50)
.attr("dx", d => d.I_EV_Total === "" ? 0 : 120)
.attr("class", "electoralVoteText democrat")
.attr("class", "electoralVoteText democrat");
electoralVoteChart
.append("text")
@@ -146,7 +141,6 @@ class ElectoralVoteChart {
.attr("dx", this.svgWidth)
.attr("class", "electoralVoteText republican");
//Display a bar with minimal width in the center of the bar chart to indicate the 50% mark
electoralVoteChart
.append("line")
.attr("x1", this.svgWidth/2)
@@ -155,21 +149,12 @@ class ElectoralVoteChart {
.attr("y2", 50)
.style("stroke", "black")
.style("stroke-width", 2)
.attr("class", "middlePoint")
.attr("class", "middlePoint");
//Displays the text mentioning the total number of electoral votes required
// to win the elections throughout the country
let votesToWin
if (electionResult[0].Year == 1960)
votesToWin = 269
else if(electionResult[0].Year > 1960)
votesToWin = 270
else
votesToWin = 266
electoralVoteChart
.append("text")
.text(`Electoral Vote (${votesToWin} needed to win)`)
.text(d => `Electoral Vote (` + Math.abs(d.R_EV_Total - d.D_EV_Total + 1).toString() + `) needed to win)`)
.attr('y', 45)
.attr("dx", this.svgWidth/2 - 140)
.attr("font-size", 16)