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"> <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 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/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> </list>
<ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" /> <ignored path="$PROJECT_DIR$/temp/" />
@@ -45,14 +42,14 @@
<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="830" /> <entry key="js" value="1064" />
</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="830" /> <entry key="JavaScript" value="1064" />
</counts> </counts>
</usages-collector> </usages-collector>
</session> </session>
@@ -99,8 +96,8 @@
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js"> <entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="372"> <state relative-caret-position="219">
<caret line="132" column="8" selection-start-line="132" selection-start-column="8" selection-end-line="132" selection-end-column="8" /> <caret line="168" column="88" selection-start-line="168" selection-start-column="88" selection-end-line="168" selection-end-column="88" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -276,7 +273,7 @@
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="10332000" /> <option name="totallyTimeSpent" value="11448000" />
</component> </component>
<component name="TodoView"> <component name="TodoView">
<todo-panel id="selected-file"> <todo-panel id="selected-file">
@@ -291,7 +288,7 @@
<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 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="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" 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="Message" order="0" />
@@ -300,10 +297,10 @@
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" /> <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="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" weight="0.32929516" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" /> <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="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="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" />
@@ -321,7 +318,7 @@
<breakpoints> <breakpoints>
<line-breakpoint enabled="true" type="javascript"> <line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/public/js/electoralVoteChart.js</url> <url>file://$PROJECT_DIR$/public/js/electoralVoteChart.js</url>
<line>124</line> <line>123</line>
<properties lambdaOrdinal="-1" /> <properties lambdaOrdinal="-1" />
<option name="timeStamp" value="1" /> <option name="timeStamp" value="1" />
</line-breakpoint> </line-breakpoint>
@@ -386,8 +383,8 @@
</entry> </entry>
<entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js"> <entry file="file://$PROJECT_DIR$/public/js/electoralVoteChart.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="372"> <state relative-caret-position="219">
<caret line="132" column="8" selection-start-line="132" selection-start-column="8" selection-end-line="132" selection-end-column="8" /> <caret line="168" column="88" selection-start-line="168" selection-start-column="88" selection-end-line="168" selection-end-column="88" />
</state> </state>
</provider> </provider>
</entry> </entry>

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

@@ -76,7 +76,6 @@ class ElectoralVoteChart {
this.svg.selectAll("*").remove(); this.svg.selectAll("*").remove();
//Group the states based on the winning party for the state
let allVotes = 0; let allVotes = 0;
let independentParty = []; let independentParty = [];
let democratParty = []; let democratParty = [];
@@ -86,12 +85,12 @@ class ElectoralVoteChart {
if(d.RD_Difference < 0) democratParty.push(d); if(d.RD_Difference < 0) democratParty.push(d);
else if (d.RD_Difference > 0) republicanParty.push(d); else if (d.RD_Difference > 0) republicanParty.push(d);
else independentParty.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); democratParty.sort((a, b) => a.RD_Difference - b.RD_Difference);
republicanParty.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 = []; let sortedData = [];
sortedData = sortedData.concat(independentParty); sortedData = sortedData.concat(independentParty);
@@ -108,7 +107,6 @@ class ElectoralVoteChart {
.domain([0, allVotes]) .domain([0, allVotes])
.range([0, this.svgWidth]); .range([0, this.svgWidth]);
//Create the stacked bar chart.
let electoralVoteChart = this.svg let electoralVoteChart = this.svg
.selectAll("rect") .selectAll("rect")
.data(sortedData) .data(sortedData)
@@ -120,24 +118,21 @@ class ElectoralVoteChart {
.attr("height", 20) .attr("height", 20)
.attr("x", (_, i) => electoralVoteScale(xCoordinates[i])) .attr("x", (_, i) => electoralVoteScale(xCoordinates[i]))
.attr("y", 50) .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("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 electoralVoteChart
.append("text") .append("text")
.text(d => d.I_EV_Total) .text(d => d.I_EV_Total)
.attr("y", 50) .attr("y", 50)
.attr("class", "electoralVoteText independent") .attr("class", "electoralVoteText independent");
electoralVoteChart electoralVoteChart
.append("text") .append("text")
.text(d => d.D_EV_Total) .text(d => d.D_EV_Total)
.attr("y", 50) .attr("y", 50)
.attr("dx", d => d.I_EV_Total === "" ? 0 : 120) .attr("dx", d => d.I_EV_Total === "" ? 0 : 120)
.attr("class", "electoralVoteText democrat") .attr("class", "electoralVoteText democrat");
electoralVoteChart electoralVoteChart
.append("text") .append("text")
@@ -146,7 +141,6 @@ class ElectoralVoteChart {
.attr("dx", this.svgWidth) .attr("dx", this.svgWidth)
.attr("class", "electoralVoteText republican"); .attr("class", "electoralVoteText republican");
//Display a bar with minimal width in the center of the bar chart to indicate the 50% mark
electoralVoteChart electoralVoteChart
.append("line") .append("line")
.attr("x1", this.svgWidth/2) .attr("x1", this.svgWidth/2)
@@ -155,21 +149,12 @@ class ElectoralVoteChart {
.attr("y2", 50) .attr("y2", 50)
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 2) .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 electoralVoteChart
.append("text") .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('y', 45)
.attr("dx", this.svgWidth/2 - 140) .attr("dx", this.svgWidth/2 - 140)
.attr("font-size", 16) .attr("font-size", 16)