making a back up
This commit is contained in:
Brady
12
hw6/.idea/hw6.iml
generated
Normal file
12
hw6/.idea/hw6.iml
generated
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
hw6/.idea/misc.xml
generated
Normal file
6
hw6/.idea/misc.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</component>
|
||||
</project>
|
||||
8
hw6/.idea/modules.xml
generated
Normal file
8
hw6/.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/hw6.iml" filepath="$PROJECT_DIR$/.idea/hw6.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
hw6/.idea/vcs.xml
generated
Normal file
6
hw6/.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
340
hw6/.idea/workspace.xml
generated
Normal file
340
hw6/.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,340 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AnalysisUIOptions">
|
||||
<option name="SCOPE_TYPE" value="3" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<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/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/" />
|
||||
<ignored path="$PROJECT_DIR$/tmp/" />
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="FUSProjectUsageTrigger">
|
||||
<session id="-1157765889">
|
||||
<usages-collector id="statistics.lifecycle.project">
|
||||
<counts>
|
||||
<entry key="project.open.time.14" value="1" />
|
||||
<entry key="project.opened" value="1" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.extensions.open">
|
||||
<counts>
|
||||
<entry key="css" value="1" />
|
||||
<entry key="html" value="1" />
|
||||
<entry key="js" value="6" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.types.open">
|
||||
<counts>
|
||||
<entry key="CSS" value="1" />
|
||||
<entry key="HTML" value="1" />
|
||||
<entry key="JavaScript" value="6" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.extensions.edit">
|
||||
<counts>
|
||||
<entry key="css" value="4" />
|
||||
<entry key="html" value="53" />
|
||||
<entry key="js" value="636" />
|
||||
</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="636" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
</session>
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/bower_components/d3/d3.js">
|
||||
<provider selected="true" editor-type-id="text-editor" />
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/public/js/script.js">
|
||||
<provider selected="true" editor-type-id="text-editor" />
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/hw6.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="375">
|
||||
<caret line="25" column="35" lean-forward="true" selection-start-line="25" selection-start-column="35" selection-end-line="25" selection-end-column="35" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/public/js/tileChart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="304">
|
||||
<caret line="86" column="59" lean-forward="true" selection-start-line="86" selection-start-column="59" selection-end-line="86" selection-end-column="59" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<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>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<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>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/public/css/style.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="454">
|
||||
<caret line="117" lean-forward="true" selection-start-line="117" selection-end-line="117" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/public/js/votePercentageChart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="388">
|
||||
<caret line="69" column="24" selection-start-line="69" selection-start-column="24" selection-end-line="69" selection-end-column="24" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
</leaf>
|
||||
</component>
|
||||
<component name="FindInProjectRecents">
|
||||
<findStrings>
|
||||
<find>lineGenerator</find>
|
||||
<find>data</find>
|
||||
<find>lineGenera</find>
|
||||
<find>gSVG</find>
|
||||
<find>electionResult</find>
|
||||
<find>gSvg</find>
|
||||
<find>'r'</find>
|
||||
<find>selected</find>
|
||||
<find>i</find>
|
||||
</findStrings>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
|
||||
</component>
|
||||
<component name="IdeDocumentHistory">
|
||||
<option name="CHANGED_PATHS">
|
||||
<list>
|
||||
<option value="$PROJECT_DIR$/hw6.html" />
|
||||
<option value="$PROJECT_DIR$/public/css/style.css" />
|
||||
<option value="$PROJECT_DIR$/public/js/tileChart.js" />
|
||||
<option value="$PROJECT_DIR$/public/js/yearChart.js" />
|
||||
<option value="$PROJECT_DIR$/public/js/electoralVoteChart.js" />
|
||||
<option value="$PROJECT_DIR$/public/js/votePercentageChart.js" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
|
||||
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
|
||||
<component name="JsGulpfileManager">
|
||||
<detection-done>true</detection-done>
|
||||
<sorting>DEFINITION_ORDER</sorting>
|
||||
</component>
|
||||
<component name="NodePackageJsonFileManager">
|
||||
<packageJsonPaths>
|
||||
<path value="$PROJECT_DIR$/bower_components/d3-tip/package.json" />
|
||||
</packageJsonPaths>
|
||||
</component>
|
||||
<component name="ProjectFrameBounds" extendedState="6">
|
||||
<option name="width" value="1920" />
|
||||
<option name="height" value="1080" />
|
||||
</component>
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||
<component name="ProjectView">
|
||||
<navigator proportions="" version="1">
|
||||
<foldersAlwaysOnTop value="true" />
|
||||
</navigator>
|
||||
<panes>
|
||||
<pane id="Scope" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
<expand>
|
||||
<path>
|
||||
<item name="hw6" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="hw6" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="hw6" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="hw6" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="public" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="hw6" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="hw6" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="public" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="css" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="hw6" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="hw6" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="public" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="js" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
</expand>
|
||||
<select />
|
||||
</subPane>
|
||||
</pane>
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
|
||||
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
|
||||
<property name="run.code.analysis.last.selected.profile" value="pProject Default" />
|
||||
</component>
|
||||
<component name="RunDashboard">
|
||||
<option name="ruleStates">
|
||||
<list>
|
||||
<RuleState>
|
||||
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
|
||||
</RuleState>
|
||||
<RuleState>
|
||||
<option name="name" value="StatusDashboardGroupingRule" />
|
||||
</RuleState>
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="549448f0-50d1-4ffb-b5ab-739b510c5318" name="Default Changelist" comment="" />
|
||||
<created>1572399291417</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1572399291417</updated>
|
||||
<workItem from="1572399299722" duration="7461000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="7461000" />
|
||||
</component>
|
||||
<component name="TodoView">
|
||||
<todo-panel id="selected-file">
|
||||
<is-autoscroll-to-source value="true" />
|
||||
</todo-panel>
|
||||
<todo-panel id="all">
|
||||
<are-packages-shown value="true" />
|
||||
<is-autoscroll-to-source value="true" />
|
||||
</todo-panel>
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="0" y="23" width="1920" height="1000" extended-state="6" />
|
||||
<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 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.32929516" />
|
||||
<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" />
|
||||
</layout>
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
<component name="VcsContentAnnotationSettings">
|
||||
<option name="myLimit" value="2678400000" />
|
||||
</component>
|
||||
<component name="editorHistoryManager">
|
||||
<entry file="file://$PROJECT_DIR$/bower_components/d3/d3.js">
|
||||
<provider selected="true" editor-type-id="text-editor" />
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/public/js/script.js">
|
||||
<provider selected="true" editor-type-id="text-editor" />
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/hw6.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="375">
|
||||
<caret line="25" column="35" lean-forward="true" selection-start-line="25" selection-start-column="35" selection-end-line="25" selection-end-column="35" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/public/css/style.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="454">
|
||||
<caret line="117" lean-forward="true" selection-start-line="117" selection-end-line="117" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/public/js/tileChart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="304">
|
||||
<caret line="86" column="59" lean-forward="true" selection-start-line="86" selection-start-column="59" selection-end-line="86" selection-end-column="59" />
|
||||
</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>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/public/js/votePercentageChart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="388">
|
||||
<caret line="69" column="24" selection-start-line="69" selection-start-column="24" selection-end-line="69" selection-end-column="24" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
@@ -16,7 +16,7 @@
|
||||
<body>
|
||||
|
||||
<h1>US Presidential Elections from 1940 to 2012</h1>
|
||||
<p class="info">Name: [Your Name]; E-Mail: [Your E-Mail]; A#: [Your A#]</p>
|
||||
<p class="info">Name: Brady Bodily; E-Mail: brady.bodily1@aggiemail.usu.edu; A#: A00987897</p>
|
||||
<div id="year-chart" class="view">
|
||||
</div>
|
||||
|
||||
|
||||
@@ -113,7 +113,7 @@ h1 {
|
||||
.selected{
|
||||
stroke: #404040;;
|
||||
stroke-width:4;
|
||||
r:25px;
|
||||
r:15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -73,13 +73,230 @@ class ElectoralVoteChart {
|
||||
//HINT: Use .electoralVotesNote class to style this text element
|
||||
|
||||
//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"]} )
|
||||
.sortValues(function(a,b) {
|
||||
return parseFloat(a.RD_Difference) - parseFloat(b.RD_Difference)
|
||||
})
|
||||
.entries(electionResult)
|
||||
|
||||
//******* TODO: PART V *******
|
||||
//Implement brush on the bar chart created above.
|
||||
//Implement a call back method to handle the brush end event.
|
||||
//Call the update method of shiftChart and pass the data corresponding to brush selection.
|
||||
//HINT: Use the .brush class to style the brush.
|
||||
let statesIArray = [];
|
||||
let statesRArray = [];
|
||||
let statesDArray = [];
|
||||
|
||||
for(let i=0; i<electionArray.length; i++)
|
||||
{
|
||||
if(electionArray[i].key == 'I')
|
||||
statesIArray = electionArray[i].values
|
||||
|
||||
if(electionArray[i].key == 'R')
|
||||
statesRArray = electionArray[i].values
|
||||
|
||||
if(electionArray[i].key == 'D')
|
||||
statesDArray = electionArray[i].values
|
||||
|
||||
}
|
||||
|
||||
let statesArray = []
|
||||
statesArray = statesArray.concat(statesIArray)
|
||||
statesArray = statesArray.concat(statesDArray)
|
||||
statesArray = statesArray.concat(statesRArray)
|
||||
|
||||
//Create the stacked bar chart.
|
||||
//Use the global color scale to color code the rectangles.
|
||||
//HINT: Use .electoralVotes class to style your bars.
|
||||
var self = this;
|
||||
|
||||
this.xScale = d3.scaleLinear()
|
||||
.domain([0, d3.sum(statesArray, d => parseInt(d['Total_EV']))])
|
||||
.range([0, self.svgWidth]);
|
||||
|
||||
let rectG = this.svg.select('g');
|
||||
|
||||
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.
|
||||
//HINT: Use the .electoralVoteText class to style your text elements; Use this in combination with
|
||||
// chooseClass to get a color based on the party wherever necessary
|
||||
|
||||
let textDEV = this.svg.selectAll('.electoralVoteText').filter('.democrat')
|
||||
.data([d3.sum(statesDArray, d => parseInt(d['D_EV']))])
|
||||
|
||||
textDEV = textDEV.enter().append('text').merge(textDEV)
|
||||
|
||||
textDEV.classed('electoralVoteText', true)
|
||||
.classed('democrat', true)
|
||||
.attr('x', 0)
|
||||
.attr('y', 5*this.svgHeight/8 - 10)
|
||||
.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
|
||||
//HINT: Use .middlePoint class to style this bar.
|
||||
|
||||
let evLine = this.svg.selectAll('path');
|
||||
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
|
||||
//HINT: Use .electoralVotesNote class to style this text element
|
||||
|
||||
let evText = this.svg.selectAll('.electoralVotesNote')
|
||||
.data([d3.sum(statesArray, d => parseInt(d['Total_EV']))])
|
||||
|
||||
evText = evText.enter().append('text').merge(evText)
|
||||
|
||||
evText.classed('electoralVotesNote', true)
|
||||
.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 *******
|
||||
//Implement brush on the bar chart created above.
|
||||
//Implement a call back method to handle the brush end event.
|
||||
//Call the update method of shiftChart and pass the data corresponding to brush selection.
|
||||
//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)
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -77,7 +77,96 @@ class TileChart {
|
||||
//Call the tool tip on hover over the tiles to display stateName, count of electoral votes
|
||||
//then, vote percentage and number of votes won by each party.
|
||||
//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)
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -65,23 +65,156 @@ class VotePercentageChart {
|
||||
//Create the stacked bar chart.
|
||||
//Use the global color scale to color code the rectangles.
|
||||
//HINT: Use .votesPercentage class to style your bars.
|
||||
let self = this;
|
||||
|
||||
//Display the total percentage of votes won by each party
|
||||
//on top of the corresponding groups of bars.
|
||||
//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
|
||||
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;
|
||||
|
||||
//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.
|
||||
})
|
||||
//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);
|
||||
});
|
||||
|
||||
//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
|
||||
|
||||
//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.
|
||||
// ******* TODO: PART III *******
|
||||
|
||||
//HINT: Use the chooseClass method to style your elements based on party wherever necessary.
|
||||
//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
|
||||
//on top of the corresponding groups of bars.
|
||||
//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
|
||||
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
|
||||
//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
|
||||
//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.
|
||||
//then, vote percentage and number of votes won by each party.
|
||||
this.svg.call(tip);
|
||||
rect.on("mouseover", tip.show);
|
||||
rect.on("mouseout", tip.hide);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -69,7 +69,7 @@ class YearChart {
|
||||
.domain(domain)
|
||||
.range(range);
|
||||
|
||||
// ******* TODO: PART I *******
|
||||
// ******* DONE: PART I *******
|
||||
|
||||
// Create the chart by adding circle elements representing each election year
|
||||
|
||||
@@ -91,6 +91,74 @@ class YearChart {
|
||||
//Election information corresponding to that year should be loaded and passed to
|
||||
// the update methods of other visualizations
|
||||
|
||||
let yChart = this;
|
||||
|
||||
var data = [[0, (this.svgHeight - 40)/2], [this.svgWidth, (this.svgHeight - 40)/2]];
|
||||
|
||||
let scaleX = d3.scaleLinear()
|
||||
.range([this.margin.left, this.svgWidth - this.margin.right])
|
||||
.domain([0, this.electionWinners.length]);
|
||||
|
||||
|
||||
|
||||
let line = d3.line();
|
||||
let pathString = line(data);
|
||||
|
||||
this.svg.append('g').append('path')
|
||||
.attr('d', pathString)
|
||||
.style("stroke-dasharray", ("2, 2"))
|
||||
.attr('stroke', 'black');
|
||||
|
||||
let years = this.svg.append('g').selectAll('g')
|
||||
.data(this.electionWinners)
|
||||
.enter()
|
||||
.append('g');
|
||||
|
||||
years.append('circle')
|
||||
.attr('cy', (this.svgHeight - 38) * .5)
|
||||
|
||||
.attr('cx', (d, i) => {return scaleX(i)} )
|
||||
.attr('r', 10)
|
||||
|
||||
.attr('class', (d) => {
|
||||
return yChart.chooseClass(d.PARTY)
|
||||
});
|
||||
|
||||
//Append text information of each year right below the corresponding circle
|
||||
//HINT: Use .yeartext class to style your text elements
|
||||
years.append('text')
|
||||
.attr('x', (d, i) => {return scaleX(i)} )
|
||||
.attr('y', (this.svgHeight - 20) * .5 + 30)
|
||||
.attr('yearText', true)
|
||||
.attr('text-anchor', 'middle')
|
||||
.text((d) => {return d.YEAR});
|
||||
|
||||
//Style the chart by adding a dashed line that connects all these years.
|
||||
//HINT: Use .lineChart to style this dashed line
|
||||
//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);
|
||||
d3.select(this).classed('selected', true);
|
||||
|
||||
let file = 'data/Year_Timeline_' + d.YEAR + '.csv';
|
||||
|
||||
d3.csv(file, function (error, electionResult) {
|
||||
yChart.electoralVoteChart.update(electionResult, self.colorScale);
|
||||
yChart.votePercentageChart.update(electionResult);
|
||||
yChart.tileChart.update(electionResult, self.colorScale);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
//******* TODO: EXTRA CREDIT *******
|
||||
|
||||
@@ -99,6 +167,7 @@ class YearChart {
|
||||
//Call the update method of shiftChart and pass the data corresponding to brush selection.
|
||||
//HINT: Use the .brush class to style the brush.
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user