From 058abde667490b402a3799807d0841095936c072 Mon Sep 17 00:00:00 2001
From: Brady <bradybodily@Bradys-iMac-2.local>
Date: Tue, 29 Oct 2019 21:59:44 -0600
Subject: [PATCH] making a back up

---
 hw6/.idea/hw6.iml                    |  12 +
 hw6/.idea/misc.xml                   |   6 +
 hw6/.idea/modules.xml                |   8 +
 hw6/.idea/vcs.xml                    |   6 +
 hw6/.idea/workspace.xml              | 340 +++++++++++++++++++++++++++
 hw6/hw6.html                         |   2 +-
 hw6/public/css/style.css             |   2 +-
 hw6/public/js/electoralVoteChart.js  | 227 +++++++++++++++++-
 hw6/public/js/tileChart.js           |  91 ++++++-
 hw6/public/js/votePercentageChart.js | 155 +++++++++++-
 hw6/public/js/yearChart.js           |  71 +++++-
 11 files changed, 900 insertions(+), 20 deletions(-)
 create mode 100644 hw6/.idea/hw6.iml
 create mode 100644 hw6/.idea/misc.xml
 create mode 100644 hw6/.idea/modules.xml
 create mode 100644 hw6/.idea/vcs.xml
 create mode 100644 hw6/.idea/workspace.xml

diff --git a/hw6/.idea/hw6.iml b/hw6/.idea/hw6.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/hw6/.idea/hw6.iml
@@ -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>
\ No newline at end of file
diff --git a/hw6/.idea/misc.xml b/hw6/.idea/misc.xml
new file mode 100644
index 0000000..28a804d
--- /dev/null
+++ b/hw6/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/hw6/.idea/modules.xml b/hw6/.idea/modules.xml
new file mode 100644
index 0000000..165f137
--- /dev/null
+++ b/hw6/.idea/modules.xml
@@ -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>
\ No newline at end of file
diff --git a/hw6/.idea/vcs.xml b/hw6/.idea/vcs.xml
new file mode 100644
index 0000000..6c0b863
--- /dev/null
+++ b/hw6/.idea/vcs.xml
@@ -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>
\ No newline at end of file
diff --git a/hw6/.idea/workspace.xml b/hw6/.idea/workspace.xml
new file mode 100644
index 0000000..194178a
--- /dev/null
+++ b/hw6/.idea/workspace.xml
@@ -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>
\ No newline at end of file
diff --git a/hw6/hw6.html b/hw6/hw6.html
index 0580840..19a230d 100755
--- a/hw6/hw6.html
+++ b/hw6/hw6.html
@@ -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>
 
diff --git a/hw6/public/css/style.css b/hw6/public/css/style.css
index d1fc3cc..34691ba 100755
--- a/hw6/public/css/style.css
+++ b/hw6/public/css/style.css
@@ -113,7 +113,7 @@ h1 {
 .selected{
     stroke: #404040;;
     stroke-width:4;
-    r:25px;
+    r:15px;
 }
 
 
diff --git a/hw6/public/js/electoralVoteChart.js b/hw6/public/js/electoralVoteChart.js
index 670cb8c..2262435 100644
--- a/hw6/public/js/electoralVoteChart.js
+++ b/hw6/public/js/electoralVoteChart.js
@@ -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)
   };
 
   
diff --git a/hw6/public/js/tileChart.js b/hw6/public/js/tileChart.js
index a73d1e1..beb10aa 100644
--- a/hw6/public/js/tileChart.js
+++ b/hw6/public/js/tileChart.js
@@ -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)
+
+
   };
 
 
diff --git a/hw6/public/js/votePercentageChart.js b/hw6/public/js/votePercentageChart.js
index 995f9c7..5aec8c4 100644
--- a/hw6/public/js/votePercentageChart.js
+++ b/hw6/public/js/votePercentageChart.js
@@ -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);
   };
 
 
diff --git a/hw6/public/js/yearChart.js b/hw6/public/js/yearChart.js
index 8613024..2bbd45c 100644
--- a/hw6/public/js/yearChart.js
+++ b/hw6/public/js/yearChart.js
@@ -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.
 
+
   }
 
 }