finished

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>

hw4/js/barChart.js

@@ -23,7 +23,9 @@ class BarChart {
         // sure to leave room for the axes
 
         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", "");
 
@@ -31,11 +33,10 @@ class BarChart {
         let yaxisWidth = 60;
         d3.select("#barChart")
             .attr("transform", "scale(1,-1)");
-      data.sort(function(a, b) {
+        data.sort(function (a, b) {
             return a[1] > b[1] ? 1 : -1;
         });
 
-
         let dataNum = [];
         data.forEach(x => dataNum.push(x.data));
         let datadate = [];
@@ -43,18 +44,18 @@ class BarChart {
         var blues = d3.scaleOrdinal(d3.schemeBlues[datadate.length]);
 
         let yScale = d3.scaleLinear()
-          .domain([0 , d3.max(dataNum)])
+            .domain([0, d3.max(dataNum)])
-          .range([svgHeight-(xaxisHeight), 0]);
+            .range([svgHeight - (xaxisHeight), 0]);
 
         let xScale = d3.scaleBand()
             .domain(datadate)
-          .range([xaxisHeight, svgWidth-yaxisWidth])
+            .range([xaxisHeight, svgWidth - yaxisWidth])
             .padding(.25);
 
         let y_axis = d3.axisLeft(yScale);
 
         let x_axis = d3.axisBottom(xScale)
-          .tickFormat((d,i) => datadate[i]);
+            .tickFormat((d, i) => datadate[i]);
         //.scale(xScale);
 
 
@@ -71,42 +72,41 @@ class BarChart {
             .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)
-
-    //Create the bars (hint: use #bars)
         let barChart = d3.select("#bars")
             .selectAll('rect')
-          .data(datadate)
+            .data(data);
+
+       barChart.exit()
+            .attr('height', 0)
+            .remove();
+
+        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));
+
+
+        barChart
             .enter()
             .append('rect')
             .attr("transform", `translate(0, ${height}) scale(1,-1)`)
-          .attr('x', (d,i) => xScale(d))
+            .attr('id', (d, i) => `${d['date']}`)
-          .attr('y', (d,i) => yScale(dataNum[i]))
+            .attr('x', (d, i) => xScale(d['date']))
+            .attr('y', (d, i) => yScale(d['data']))
             .attr('width', xScale.bandwidth())
-          .attr('height', (d,i) => svgHeight - yScale(dataNum[i])-xaxisHeight)
+            .attr('height', (d, i) => svgHeight - yScale(d['data']) - xaxisHeight)
-          .attr('class', 'bar');
+            .attr('class', 'bar')
-      console.log(blues);
+            .attr('fill', (d, i) => color(svgHeight - yScale(d['data']) - xaxisHeight));
+
 
-      d3.select("#bars")
-          .selectAll('rect')
-          .attr('fill', (d, i) => blues[i]);
         //
-
+        // d3.select("#bars")
-//      barChart.exit().remove();
+        //         .selectAll('#rect')
-
+        //
-      // 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 *******
 
@@ -114,17 +114,31 @@ class BarChart {
         // Color the selected bar to indicate is has been selected.
         // Make sure only the selected bar has this new color.
 
+        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']]);
+
+            });
+
         // 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.
      */
+
     chooseData() {
         // ******* TODO: PART I *******
         //Changed the selected data when a user selects a different
@@ -133,15 +147,21 @@ class BarChart {
             .node().value;
         //.property("value");
         let selectedData = [];
-      this.allData.forEach(x => {
+        for(let i = 0; i <  this.allData.length; i++) {
             var item = [];
-          item.date = x["year"];
+            item.date = this.allData[i]["year"];
-          item.data = x[currentDataType];
+            item.data = this.allData[i][currentDataType];
+            item.index = i;
             selectedData.push(item);
-      });
 
-      console.log(this.allData);
+        }
-      console.log(selectedData);
+        // this.allData.forEach(x => {
+        //     var item = [];
+        //     item.date = x["year"];
+        //     item.data = x[currentDataType];
+        //     item.index = x;
+        //     selectedData.push(item);
+        // });
         return selectedData;
     }
 }

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.
+      host.text(oneWorldCup['host']);
-    // Hint: Select the appropriate ids to update the text content.
+      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
 
   }
 

hw4/js/map.js

@@ -13,13 +13,15 @@ class Map {
      */
     clearMap() {
 
-    // ******* TODO: PART V*******
+        d3.select("#points")
-    // Clear the map of any colors/markers; You can do this with inline styling or by
+            .selectAll("circle")
-    // defining a class style in styles.css
+            .remove();
-
+        d3.select("#map")
-    // Hint: If you followed our suggestion of using classes to style
+            .selectAll("path")
-    // the colors and markers for hosts/teams/winners, you can use
+            .classed("gold", false)
-    // d3 selection and .classed to set these classes on and off here.
+            .classed("host", false)
+            .classed("team", false)
+            .classed("silver", false);
 
     }
 
@@ -32,23 +34,28 @@ class Map {
         //Clear any previous selections;
         this.clearMap();
 
-    // ******* TODO: PART V *******
+        d3.select("#" + worldcupData.host_country_code)
-
+            .classed("host", true);
-    // 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.
-
-
-    // Select the host country and change it's color accordingly.
-
         // 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);
+        }
 
-    // We strongly suggest using CSS classes to style the selected countries.
+        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) + ")");
+
+
+        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
     }
 
     /**
@@ -57,22 +64,25 @@ class Map {
      */
     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
+        var geograt = d3.geoGraticule();
-    // we suggest you use the variable in the data element's .id field to set the id
+        d3.select("#map").append("path")
+            .datum(geograt)
+            .attr("d", path)
 
-    // Make sure and give your paths the appropriate class (see the .css selectors at
+            .attr("class", "grat");
-    // the top of the provided html file)
 
     }
 
-
 }

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");
+    barChart.updateBarChart(tmp);
-    let selectedData = [];
-    this.allData.forEach(x => selectedData.push(x[currentDataType]));
-    return selectedData;
-
 }