From 8c213db798a04db85ef943bf0bfdf08717ad983b Mon Sep 17 00:00:00 2001
From: bbod <bradybod@gmail.com>
Date: Wed, 2 Oct 2019 08:30:45 -0600
Subject: [PATCH] finished

---
 hw4/.idea/workspace.xml | 242 +++++++++++++++++++++++++++++++++++++
 hw4/js/barChart.js      | 260 +++++++++++++++++++++-------------------
 hw4/js/infoPanel.js     |  22 +++-
 hw4/js/map.js           | 120 ++++++++++---------
 hw4/js/script.js        |   8 +-
 5 files changed, 468 insertions(+), 184 deletions(-)

diff --git a/hw4/.idea/workspace.xml b/hw4/.idea/workspace.xml
index f990078..5c68beb 100644
--- a/hw4/.idea/workspace.xml
+++ b/hw4/.idea/workspace.xml
@@ -2,22 +2,170 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="906ccaea-ddf8-4975-a2c6-85ccd75313dc" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/js/barChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/barChart.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/infoPanel.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/infoPanel.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/map.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/map.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/script.js" afterDir="false" />
     </list>
     <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="-764738881">
+      <usages-collector id="statistics.file.extensions.edit">
+        <counts>
+          <entry key="js" value="3403" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.edit">
+        <counts>
+          <entry key="JavaScript" value="3403" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.open">
+        <counts>
+          <entry key="css" value="1" />
+          <entry key="js" value="1" />
+          <entry key="json" value="1" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.open">
+        <counts>
+          <entry key="CSS" value="1" />
+          <entry key="JSON" value="1" />
+          <entry key="JavaScript" value="1" />
+        </counts>
+      </usages-collector>
+    </session>
+  </component>
+  <component name="FileEditorManager">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/hw4.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="115">
+              <caret line="18" column="23" lean-forward="true" selection-start-line="18" selection-start-column="23" selection-end-line="18" selection-end-column="23" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/js/barChart.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="181">
+              <caret line="129" column="85" selection-start-line="129" selection-start-column="85" selection-end-line="129" selection-end-column="85" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/js/script.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="375">
+              <caret line="28" column="20" selection-start-line="28" selection-start-column="20" selection-end-line="28" selection-end-column="20" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/js/infoPanel.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="262">
+              <caret line="41" lean-forward="true" selection-start-line="41" selection-end-line="41" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/js/map.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="705">
+              <caret line="47" column="95" selection-start-line="47" selection-start-column="95" selection-end-line="47" selection-end-column="95" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/data/world.json">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="-1363" />
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/styles.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="113">
+              <caret line="24" column="10" lean-forward="true" selection-start-line="24" selection-start-column="10" selection-end-line="24" selection-end-column="10" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
   <component name="FindInProjectRecents">
     <findStrings>
+      <find>console</find>
       <find>xaxis</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$/js/script.js" />
+        <option value="$PROJECT_DIR$/js/barChart.js" />
+        <option value="$PROJECT_DIR$/js/infoPanel.js" />
+        <option value="$PROJECT_DIR$/js/map.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="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="hw4" type="b2602c69:ProjectViewProjectNode" />
+              <item name="hw4" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="hw4" type="b2602c69:ProjectViewProjectNode" />
+              <item name="hw4" type="462c0819:PsiDirectoryNode" />
+              <item name="data" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="hw4" type="b2602c69:ProjectViewProjectNode" />
+              <item name="hw4" type="462c0819:PsiDirectoryNode" />
+              <item name="figs" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="hw4" type="b2602c69:ProjectViewProjectNode" />
+              <item name="hw4" type="462c0819:PsiDirectoryNode" />
+              <item name="js" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
+      <pane id="Scope" />
+    </panes>
+  </component>
   <component name="PropertiesComponent">
     <property name="last_opened_file_path" value="$PROJECT_DIR$/../hw3/script.js" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
@@ -50,4 +198,98 @@
     </task>
     <servers />
   </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="16249000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="0" y="23" width="1280" height="731" extended-state="0" />
+    <editor active="true" />
+    <layout>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Favorites" order="2" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <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.3286385" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Terminal" order="9" weight="0.3286385" />
+      <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+    </layout>
+    <layout-to-restore>
+      <window_info content_ui="combo" id="Project" order="0" weight="0.2494043" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Favorites" order="2" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <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.3286385" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Terminal" order="9" weight="0.3286385" />
+      <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+    </layout-to-restore>
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/js/barChart.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="181">
+          <caret line="129" column="85" selection-start-line="129" selection-start-column="85" selection-end-line="129" selection-end-column="85" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/script.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="375">
+          <caret line="28" column="20" selection-start-line="28" selection-start-column="20" selection-end-line="28" selection-end-column="20" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="113">
+          <caret line="24" column="10" lean-forward="true" selection-start-line="24" selection-start-column="10" selection-end-line="24" selection-end-column="10" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/data/world.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-1363" />
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/infoPanel.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="262">
+          <caret line="41" lean-forward="true" selection-start-line="41" selection-end-line="41" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/map.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="705">
+          <caret line="47" column="95" selection-start-line="47" selection-start-column="95" selection-end-line="47" selection-end-column="95" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/hw4.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="115">
+          <caret line="18" column="23" lean-forward="true" selection-start-line="18" selection-start-column="23" selection-end-line="18" selection-end-column="23" />
+        </state>
+      </provider>
+    </entry>
+  </component>
 </project>
\ No newline at end of file
diff --git a/hw4/js/barChart.js b/hw4/js/barChart.js
index c813ac6..918c088 100644
--- a/hw4/js/barChart.js
+++ b/hw4/js/barChart.js
@@ -1,147 +1,167 @@
 /** Class implementing the bar chart view. */
 class BarChart {
 
-  /**
-   * Create a bar chart instance and pass the other views in.
-   * @param worldMap
-   * @param infoPanel
-   * @param allData
-   */
-  constructor(worldMap, infoPanel, allData) {
-    this.worldMap = worldMap;
-    this.infoPanel = infoPanel;
-    this.allData = allData;
-  }
+    /**
+     * Create a bar chart instance and pass the other views in.
+     * @param worldMap
+     * @param infoPanel
+     * @param allData
+     */
+    constructor(worldMap, infoPanel, allData) {
+        this.worldMap = worldMap;
+        this.infoPanel = infoPanel;
+        this.allData = allData;
+    }
 
-  /**
-   * Render and update the bar chart based on the selection of the data type in the drop-down box
-   */
-  updateBarChart(selectedDimension) {
-    // ******* TODO: PART I *******
+    /**
+     * Render and update the bar chart based on the selection of the data type in the drop-down box
+     */
+    updateBarChart(selectedDimension) {
+        // ******* TODO: PART I *******
 
-    // Create the x and y scales; make
-    // sure to leave room for the axes
+        // Create the x and y scales; make
+        // sure to leave room for the axes
 
-      let data = this.chooseData(selectedDimension);
+        let data = this.chooseData(selectedDimension);
+        let allData = this.allData;
+        let infoPanel = this.infoPanel;
+        let worldMap = this.worldMap;
+        let svgHeight = d3.select("#barChart").style("height").replace("px", "");
+        let svgWidth = d3.select("#barChart").style("width").replace("px", "");
 
-      let svgHeight = d3.select("#barChart").style("height").replace("px", "");
-      let svgWidth = d3.select("#barChart").style("width").replace("px", "");
+        let xaxisHeight = 60;
+        let yaxisWidth = 60;
+        d3.select("#barChart")
+            .attr("transform", "scale(1,-1)");
+        data.sort(function (a, b) {
+            return a[1] > b[1] ? 1 : -1;
+        });
 
-      let xaxisHeight = 60;
-      let yaxisWidth = 60;
-      d3.select("#barChart")
-          .attr("transform", "scale(1,-1)");
-      data.sort(function(a, b) {
-          return a[1] > b[1] ? 1 : -1;
-      });
+        let dataNum = [];
+        data.forEach(x => dataNum.push(x.data));
+        let datadate = [];
+        data.forEach(x => datadate.push(x.date));
+        var blues = d3.scaleOrdinal(d3.schemeBlues[datadate.length]);
+
+        let yScale = d3.scaleLinear()
+            .domain([0, d3.max(dataNum)])
+            .range([svgHeight - (xaxisHeight), 0]);
+
+        let xScale = d3.scaleBand()
+            .domain(datadate)
+            .range([xaxisHeight, svgWidth - yaxisWidth])
+            .padding(.25);
+
+        let y_axis = d3.axisLeft(yScale);
+
+        let x_axis = d3.axisBottom(xScale)
+            .tickFormat((d, i) => datadate[i]);
+        //.scale(xScale);
 
 
-      let dataNum = [];
-      data.forEach(x => dataNum.push(x.data));
-      let datadate = [];
-      data.forEach(x => datadate.push(x.date));
-      var blues = d3.scaleOrdinal(d3.schemeBlues[datadate.length]);
+        d3.select("#xAxis")
+            .style("height", xaxisHeight)
+            .attr("transform", `translate(0, ${yaxisWidth}) scale(1,-1)`)
+            .call(x_axis)
+            .selectAll("text")
+            .attr('transform', 'translate(15, 30) rotate(90)');
 
-      let yScale = d3.scaleLinear()
-          .domain([0 , d3.max(dataNum)])
-          .range([svgHeight-(xaxisHeight), 0]);
+        let height = svgHeight;
+        d3.select("#yAxis")
+        //.style("width", yaxisWidth)
+            .attr("transform", `translate(${xaxisHeight}, ${svgHeight}) scale(1,-1)`)
+            .call(y_axis);
+        // Create colorScale
+        let color = d3.scaleLinear().domain([1, svgHeight - yScale(d3.max(dataNum)) - xaxisHeight])
+            .interpolate(d3.interpolateHcl)
+            .range([d3.rgb("#00f9ff"), d3.rgb('#0051ff')]);
+        // Create the axes (hint: use #xAxis and #yAxis)
+        let barChart = d3.select("#bars")
+            .selectAll('rect')
+            .data(data);
 
-      let xScale = d3.scaleBand()
-          .domain(datadate)
-          .range([xaxisHeight, svgWidth-yaxisWidth])
-          .padding(.25);
+       barChart.exit()
+            .attr('height', 0)
+            .remove();
 
-      let y_axis = d3.axisLeft(yScale);
-
-      let x_axis = d3.axisBottom(xScale)
-          .tickFormat((d,i) => datadate[i]);
-          //.scale(xScale);
+        barChart.attr('height', (d, i) => svgHeight - yScale(d['data']) - xaxisHeight)
+            .attr('x', (d, i) => xScale(d['date']))
+            .attr('y', (d, i) => yScale(d['data']))
+            .attr('fill', (d, i) => color(svgHeight - yScale(d['data']) - xaxisHeight));
 
 
-      d3.select("#xAxis")
-          .style("height", xaxisHeight)
-          .attr("transform",  `translate(0, ${yaxisWidth}) scale(1,-1)`)
-          .call(x_axis)
-          .selectAll("text")
-          .attr('transform', 'translate(15, 30) rotate(90)');
+        barChart
+            .enter()
+            .append('rect')
+            .attr("transform", `translate(0, ${height}) scale(1,-1)`)
+            .attr('id', (d, i) => `${d['date']}`)
+            .attr('x', (d, i) => xScale(d['date']))
+            .attr('y', (d, i) => yScale(d['data']))
+            .attr('width', xScale.bandwidth())
+            .attr('height', (d, i) => svgHeight - yScale(d['data']) - xaxisHeight)
+            .attr('class', 'bar')
+            .attr('fill', (d, i) => color(svgHeight - yScale(d['data']) - xaxisHeight));
 
-    let height = svgHeight;
-      d3.select("#yAxis")
-          //.style("width", yaxisWidth)
-          .attr("transform",  `translate(${xaxisHeight}, ${svgHeight}) scale(1,-1)`)
-          .call(y_axis);
-    // Create colorScale
 
-    // Create the axes (hint: use #xAxis and #yAxis)
+        //
+        // d3.select("#bars")
+        //         .selectAll('#rect')
+        //
 
-    //Create the bars (hint: use #bars)
-      let barChart = d3.select("#bars")
-          .selectAll('rect')
-          .data(datadate)
-          .enter()
-          .append('rect')
-          .attr("transform",  `translate(0, ${height}) scale(1,-1)`)
-          .attr('x', (d,i) => xScale(d))
-          .attr('y', (d,i) => yScale(dataNum[i]))
-          .attr('width', xScale.bandwidth())
-          .attr('height', (d,i) => svgHeight - yScale(dataNum[i])-xaxisHeight)
-          .attr('class', 'bar');
-      console.log(blues);
+        // ******* TODO: PART II *******
 
-      d3.select("#bars")
-          .selectAll('rect')
-          .attr('fill', (d, i) => blues[i]);
-    //
+        // Implement how the bars respond to click events
+        // Color the selected bar to indicate is has been selected.
+        // Make sure only the selected bar has this new color.
 
-//      barChart.exit().remove();
+        d3.select("#bars")
+            .selectAll('rect')
+            .on('click', function (d, i) {
+                d3.select(".selected").classed("selected", false);
+                // Select current item
+                d3.select(this).classed("selected", true);
+                infoPanel.updateInfo(allData[d['index']]);
+                console.log(allData[d['index']]);
+                worldMap.updateMap(allData[d['index']]);
 
-      // barChart.enter()
-      //     .append("rect")
-      //     .attr("data", function (d, i) {
-      //         console.log(d);
-      //         console.log(i);
-      //         return i;
-      //     })
-      //     .attr("height", d => yScale(d))
-      //     .attr("y", 0)
-      //     .attr("width", (svgWidth-100)/(dataNum.length +1))
-      //     .attr("transform",  "translate(60, 310) scale(1,-1)")
-      //     .style("fill", "steelblue");
+            });
 
-    // ******* TODO: PART II *******
+        // Call the necessary update functions for when a user clicks on a bar.
+        // Note: think about what you want to update when a different bar is selected.
 
-    // Implement how the bars respond to click events
-    // Color the selected bar to indicate is has been selected.
-    // Make sure only the selected bar has this new color.
+    }
 
-    // Call the necessary update functions for when a user clicks on a bar.
-    // Note: think about what you want to update when a different bar is selected.
 
-  }
+    /**
+     *  Check the drop-down box for the currently selected data type and update the bar chart accordingly.
+     *
+     *  There are 4 attributes that can be selected:
+     *  goals, matches, attendance and teams.
+     */
 
-  /**
-   *  Check the drop-down box for the currently selected data type and update the bar chart accordingly.
-   *
-   *  There are 4 attributes that can be selected:
-   *  goals, matches, attendance and teams.
-   */
-  chooseData() {
-    // ******* TODO: PART I *******
-    //Changed the selected data when a user selects a different
-    // menu item from the drop down.
-      let currentDataType = d3.select('#dataset')
-          .node().value;
-          //.property("value");
-      let selectedData = [];
-      this.allData.forEach(x => {
-          var item = [];
-          item.date = x["year"];
-          item.data = x[currentDataType];
-          selectedData.push(item);
-      });
+    chooseData() {
+        // ******* TODO: PART I *******
+        //Changed the selected data when a user selects a different
+        // menu item from the drop down.
+        let currentDataType = d3.select('#dataset')
+            .node().value;
+        //.property("value");
+        let selectedData = [];
+        for(let i = 0; i <  this.allData.length; i++) {
+            var item = [];
+            item.date = this.allData[i]["year"];
+            item.data = this.allData[i][currentDataType];
+            item.index = i;
+            selectedData.push(item);
 
-      console.log(this.allData);
-      console.log(selectedData);
-      return selectedData;
-  }
-}
+        }
+        // this.allData.forEach(x => {
+        //     var item = [];
+        //     item.date = x["year"];
+        //     item.data = x[currentDataType];
+        //     item.index = x;
+        //     selectedData.push(item);
+        // });
+        return selectedData;
+    }
+}
\ No newline at end of file
diff --git a/hw4/js/infoPanel.js b/hw4/js/infoPanel.js
index b7bbb1b..0037a96 100644
--- a/hw4/js/infoPanel.js
+++ b/hw4/js/infoPanel.js
@@ -16,11 +16,27 @@ class InfoPanel {
 
     // Update the text elements in the infoBox to reflect:
     // World Cup Title, host, winner, runner_up, and all participating teams that year
+      let host = d3.select('#details').select('#host');
+      let title = d3.select('#details').select('#edition');
+      let winner = d3.select('#details').select('#winner');
+      let runner_up = d3.select('#details').select('#silver');
+      let teams = d3.select('#details').select('#teams');
 
-    // Hint: For the list of teams, you can create an list element for each team.
-    // Hint: Select the appropriate ids to update the text content.
+      host.text(oneWorldCup['host']);
+      title.text(oneWorldCup['EDITION']);
+      winner.text(oneWorldCup['winner']);
+      runner_up.text(oneWorldCup['runner_up']);
+      let list = d3.select("#teams").selectAll('li').data(oneWorldCup.teams_names);
+
+      let newList = list.enter()
+          .append('li')
+          .text((d,i) => d);
+      list.exit().remove();
+      list = newList.merge(list);
+      list.transition()
+          .duration(2000)
+          .text((d,i) => d);
 
-    //Set Labels
 
   }
 
diff --git a/hw4/js/map.js b/hw4/js/map.js
index bcca145..b6be97d 100644
--- a/hw4/js/map.js
+++ b/hw4/js/map.js
@@ -1,78 +1,88 @@
 /** Class implementing the map view. */
 class Map {
-  /**
-   * Creates a Map Object
-   */
-  constructor() {
-    this.projection = d3.geoConicConformal().scale(150).translate([400, 350]);
+    /**
+     * Creates a Map Object
+     */
+    constructor() {
+        this.projection = d3.geoConicConformal().scale(150).translate([400, 350]);
 
-  }
+    }
 
-  /**
-   * Function that clears the map
-   */
-  clearMap() {
+    /**
+     * Function that clears the map
+     */
+    clearMap() {
 
-    // ******* TODO: PART V*******
-    // Clear the map of any colors/markers; You can do this with inline styling or by
-    // defining a class style in styles.css
+        d3.select("#points")
+            .selectAll("circle")
+            .remove();
+        d3.select("#map")
+            .selectAll("path")
+            .classed("gold", false)
+            .classed("host", false)
+            .classed("team", false)
+            .classed("silver", false);
 
-    // Hint: If you followed our suggestion of using classes to style
-    // the colors and markers for hosts/teams/winners, you can use
-    // d3 selection and .classed to set these classes on and off here.
+    }
 
-  }
+    /**
+     * Update Map with info for a specific FIFA World Cup
+     * @param wordcupData the data for one specific world cup
+     */
+    updateMap(worldcupData) {
 
-  /**
-   * Update Map with info for a specific FIFA World Cup
-   * @param wordcupData the data for one specific world cup
-   */
-  updateMap(worldcupData) {
+        //Clear any previous selections;
+        this.clearMap();
 
-    //Clear any previous selections;
-    this.clearMap();
+        d3.select("#" + worldcupData.host_country_code)
+            .classed("host", true);
+        // Iterate through all participating teams and change their color as well.
+        for (let i = 0; i < worldcupData.teams_names.length; i++) {
+            d3.select("#" + worldcupData.teams_iso[i])
+                .classed("team", true);
+        }
 
-    // ******* TODO: PART V *******
-
-    // Add a marker for the winner and runner up to the map.
-
-    // Hint: remember we have a conveniently labeled class called .winner
-    // as well as a .silver. These have styling attributes for the two
-    // markers.
+        let projection = this.projection;
+        let points = d3.select("#points");
+        points.append("circle")
+            .classed("gold", "true")
+            .attr("r", 15)
+            .attr("transform", (d, i) => "translate(" + projection(worldcupData.win_pos) + ")");
 
 
-    // Select the host country and change it's color accordingly.
-
-    // Iterate through all participating teams and change their color as well.
-
-    // We strongly suggest using CSS classes to style the selected countries.
+        points.append("circle")
+            .classed("silver", "true")
+            .attr("r", 15)
+            .attr("transform", (d, i) => "translate(" + projection(worldcupData.ru_pos) + ")")
 
 
-    // Add a marker for gold/silver medalists
-  }
+    }
 
-  /**
-   * Renders the actual map
-   * @param the json data with the shape of all countries
-   */
-  drawMap(world) {
+    /**
+     * Renders the actual map
+     * @param the json data with the shape of all countries
+     */
+    drawMap(world) {
 
-    //(note that projection is a class member
-    // updateMap() will need it to add the winner/runner_up markers.)
 
-    // ******* TODO: PART IV *******
+        let path = d3.geoPath().projection(this.projection);
+        d3.select("#map")
+            .selectAll("path")
+            .data(topojson.feature(world, world.objects.countries).features)
+            .enter()
+            .append('path')
+            .attr("id", d => d.id)
+            .attr("d", path)
+            .classed("countries", true);
 
-    // Draw the background (country outlines; hint: use #map).
-    // You will need to convert the topoJSON file to geoJSON.
-    // Make sure and add gridlines to the map.
 
-    // Hint: assign an id to each country path to make it easier to select afterwards
-    // we suggest you use the variable in the data element's .id field to set the id
+        var geograt = d3.geoGraticule();
+        d3.select("#map").append("path")
+            .datum(geograt)
+            .attr("d", path)
 
-    // Make sure and give your paths the appropriate class (see the .css selectors at
-    // the top of the provided html file)
-
-  }
+            .attr("class", "grat");
 
+    }
 
 }
diff --git a/hw4/js/script.js b/hw4/js/script.js
index 84a12b9..14a49be 100644
--- a/hw4/js/script.js
+++ b/hw4/js/script.js
@@ -46,11 +46,7 @@ function chooseData() {
   // ******* TODO: PART I *******
   // Changed the selected data when a user selects a different
   // menu item from the drop down.
-    let currentDataType = d3.select('#dataset')
+    let tmp = d3.select('#dataset')
         .node().value;
-    //.property("value");
-    let selectedData = [];
-    this.allData.forEach(x => selectedData.push(x[currentDataType]));
-    return selectedData;
-
+    barChart.updateBarChart(tmp);
 }