Adding HW 4

hw4/.idea/hw4.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>

hw4/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,5 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="PROJECT_PROFILE" />
+  </settings>
+</component>

hw4/.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>

hw4/.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/hw4.iml" filepath="$PROJECT_DIR$/.idea/hw4.iml" />
+    </modules>
+  </component>
+</project>

hw4/.idea/workspace.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PropertiesComponent">
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+  </component>
+</project>

hw4/data/fifa-world-cup.csv

@@ -0,0 +1,21 @@
+EDITION,YEAR,host,host_country_code,winner,WIN_LAT,WIN_LON,runner_up,RUP_LAT,RUP_LON,TEAMS,MATCHES,GOALS,AVERAGE_GOALS,AVERAGE_ATTENDANCE,TEAM_NAMES,TEAM_LIST
+2014 FIFA World Cup Brazil,2014,Brazil,BRA,Germany,52.52,13.405,Argentina,-34.6037,-58.3816,32,64,171,2.7,52918,"Algeria,Cameroon,Cote d'Ivoire,Ghana,Nigeria,Australia,Iran,Japan,KoreaRepublic,Belgium,Bosnia, Herzegovina, Croatia,England,France,Germany,Greece,Italy,Netherlands, Portugal,Russia,Spain,Switzerland,Costa Rica,Honduras,Mexico,USA,Argentina,Brazil,Chile,Colombia,Ecuador,Uruguay","DZA,CMR,CIV,GHA,NGA,AUS,IRN,JPN,KOR,BEL,BIH,HRV,GBR,FRA,DEU,GRC,ITA,NLD,PRT,RUS,ESP,CHE,CRI,HND,MEX,USA,ARG,BRA,CHL,COL,ECU,URY"
+2010 FIFA World Cup South Africa ,2010,South Africa,ZAF,Spain,40.4168,-3.7038,Netherlands,52.3702,4.8952,32,64,145,2.3,49669,"Algeria,Cameroon,Ghana,Ivory Coast,Nigeria,South Africa,Australia,Japan,Korea DPR,Korea Republic,Denmark,England,France,Germany,Greece,Italy,Netherlands,Portugal,Serbia,Slovakia,Slovenia,Spain,Switzerland,Honduras,Mexico,USA,New Zealand,Argentina,Brazil,Chile,Paraguay,Uruguay","DZA,CMR,GHA,NGA,ZAF,AUS,JPN,KOR,KOR,DNK,GBR,FRA,DEU,GRC,ITA,NLD,PRT,SRB,SVK,SVN,ESP,CHE,HND,MEX,USA,NZL,ARG,BRA,CHL,PRY,URY"
+2006 FIFA World Cup Germany ,2006,Germany,DEU,Italy,41.9028,12.4964,France,48.8566,2.3522,32,64,147,2.3,52491,"Angola,Ghana,Ivory Coast,Togo,Tunisia,Australia,Iran,Japan,Korea Republic,Saudi Arabia,Croatia,Czech Republic,England,France,Germany,Italy,Netherlands,Poland,Portugal,Serbia and Montenegro,Spain,Sweden,Switzerland,Ukraine,Costa Rica,Mexico,Trinidad and Tobago,USA,Argentina,Brazil,Ecuador,Paraguay","AGO,GHA,TGO,TUN,AUS,IRN,JPN,KOR,SAU,HRV,CZE,GBR,FRA,DEU,ITA,NLD,POL,PRT,ESP,SWE,CHE,UKR,CRI,MEX,TTO,USA,ARG,BRA,ECU,PRY"
+2002 FIFA World Cup Korea/Japan ,2002,Korea/Japan,KOR,Brazil,-15.7942,-47.8822,Germany,52.52,13.405,32,64,161,2.5,42268,"Cameroon,Nigeria,Senegal,South Africa,Tunisia,China PR,Japan,Korea Republic,Saudi Arabia,Belgium,Croatia,Denmark,England,France,Germany,Italy,Poland,Portugal,Republic of Ireland,Russia,Slovenia,Spain,Sweden,Turkey,Costa Rica,Mexico,USA,Argentina,Brazil,Ecuador,Paraguay,Uruguay","CMR,NGA,SEN,ZAF,TUN,CHN,JPN,KOR,SAU,BEL,HRV,DNK,GBR,FRA,DEU,ITA,POL,PRT,RUS,SVN,ESP,SWE,TUR,CRI,MEX,USA,ARG,BRA,ECU,PRY,URY"
+1998 FIFA World Cup France ,1998,France,FRA,France,48.8566,2.3522,Brazil,-15.7942,-47.8822,32,64,171,2.7,43517,"Cameroon,Morocco,Nigeria,South Africa,Tunisia,Iran,Japan,Korea Republic,Saudi Arabia,Austria,Belgium,Bulgaria,Croatia,Denmark,England,France,Germany,Italy,Netherlands,Norway,Romania,Scotland,Spain,Yugoslavia,Jamaica,Mexico,USA,Argentina,Brazil,Chile,Colombia,Paraguay","CMR,MAR,NGA,ZAF,TUN,IRN,JPN,KOR,SAU,AUT,BEL,BGR,HRV,DNK,GBR,FRA,DEU,ITA,NLD,NOR,ROU,ESP,JAM,MEX,USA,ARG,BRA,CHL,COL,PRY"
+1994 FIFA World Cup USA ,1994,USA,USA,Brazil,-15.7942,-47.8822,Italy,41.9028,12.4964,24,52,141,2.7,68991,"Cameroon,Morocco,Nigeria,Korea Republic,Saudi Arabia,Belgium,Bulgaria,Germany,Greece,Italy,Netherlands,Norway,Republic of Ireland,Romania,Russia,Spain,Sweden,Switzerland,Mexico,USA,Argentina,Bolivia,Brazil,Colombia","CMR,MAR,NGA,KOR,SAU,BEL,BGR,DEU,GRC,ITA,NLD,NOR,ROU,RUS,ESP,SWE,CHE,MEX,USA,ARG,BOL,BRA,COL"
+1990 FIFA World Cup Italy ,1990,Italy,ITA,Germany,52.52,13.405,Argentina,-34.6037,-58.3816,24,52,115,2.2,48388,"Cameroon,Egypt,Korea Republic,United Arab Emirates,Austria,Belgium,Czechoslovakia,England,Germany FR,Italy,Netherlands,Republic of Ireland,Romania,Scotland,Soviet Union,Spain,Sweden,Yugoslavia,Costa Rica,USA,Argentina,Brazil,Colombia,Uruguay","CMR,EGY,KOR,ARE,AUT,BEL,GBR,DEU,ITA,NLD,ROU,RUS,ESP,SWE,CRI,USA,ARG,BRA,COL,URY"
+1986 FIFA World Cup Mexico,1986,Mexico,MEX,Argentina,-34.6037,-58.3816,Germany,52.52,13.405,24,52,132,2.5,46039,"Algeria,Morocco,Iraq,Korea Republic,Belgium,Bulgaria,Denmark,England,France,Germany FR,Hungary,Italy,Northern Ireland,Poland,Portugal,Scotland,Soviet Union,Spain,Canada,Mexico,Argentina,Brazil,Paraguay,Uruguay","DZA,MAR,IRQ,KOR,BEL,BGR,DNK,GBR,FRA,DEU,HUN,ITA,POL,PRT,RUS,ESP,CAN,MEX,ARG,BRA,PRY,URY"
+1982 FIFA World Cup Spain ,1982,Spain,ESP,Italy,41.9028,12.4964,Germany,52.52,13.405,24,52,146,2.8,40571,"Algeria,Cameroon,Kuwait,Austria,Belgium,Czechoslovakia,England,France,Germany FR,Hungary,Italy,Northern Ireland,Poland,Scotland,Soviet Union,Spain,Yugoslavia,El Salvador,Honduras,New Zealand,Argentina,Brazil,Chile,Peru","DZA,CMR,KWT,AUT,BEL,GBR,FRA,DEU,HUN,ITA,POL,RUS,ESP,SLV,HND,NZL,ARG,BRA,CHL,PER"
+1978 FIFA World Cup Argentina ,1978,Argentina,ARG,Argentina,-34.6037,-58.3816,Netherlands,52.3702,4.8952,16,38,102,2.7,40678,"Tunisia,Iran,Austria,France,Germany FR,Hungary,Italy,Netherlands,Poland,Scotland,Spain,Sweden,Mexico,Argentina,Brazil,Peru","TUN,IRN,AUT,FRA,DEU,HUN,ITA,NLD,POL,ESP,SWE,MEX,ARG,BRA,PER"
+1974 FIFA World Cup Germany,1974,Germany,DEU,Germany,52.52,13.405,Netherlands,52.3702,4.8952,16,38,97,2.6,49098,"Zaire,Australia,Bulgaria,Germany,Italy,Netherlands,Poland,Scotland,Sweden,Yugoslavia,Haiti,Argentina,Brazil,Chile,Uruguay","AUS,BGR,DEU,ITA,NLD,POL,SWE,HTI,ARG,BRA,CHL,URY"
+1970 FIFA World Cup Mexico ,1970,Mexico,MEX,Brazil,-15.7942,-47.8822,Italy,41.9028,12.4964,16,32,95,3,50124,"Morocco,Belgium,Bulgaria,Czechoslovakia,England,Germany FR,Israel,Italy,Romania,Soviet Union,Sweden,El Salvador,Mexico,Brazil,Peru,Uruguay","MAR,BEL,BGR,GBR,DEU,ISR,ITA,ROU,RUS,SWE,SLV,MEX,BRA,PER,URY"
+1966 FIFA World Cup England ,1966,England,GBR,England,51.5074,-0.1278,Germany,52.52,13.405,16,32,89,2.8,48847,"Korea DPR,Bulgaria,England,France,Germany FR,Hungary,Italy,Portugal,Soviet Union,Spain,Switzerland,Mexico,Argentina,Brazil,Chile,Uruguay","KOR,BGR,GBR,FRA,DEU,HUN,ITA,PRT,RUS,ESP,CHE,MEX,ARG,BRA,CHL,URY"
+1962 FIFA World Cup Chile ,1962,Chile,CHL,Brazil,-15.7942,-47.8822,Czechoslovakia,50.0755,14.4378,16,32,89,2.8,27911,"Bulgaria,Czechoslovakia,England,Germany FR,Hungary,Italy,Soviet Union,Spain,Switzerland,Yugoslavia,Mexico,Argentina,Brazil,Chile,Colombia,Uruguay","BGR,GBR,DEU,HUN,ITA,RUS,ESP,CHE,MEX,ARG,BRA,CHL,COL,URY"
+1958 FIFA World Cup Sweden ,1958,Sweden,SWE,Brazil,-15.7942,-47.8822,Sweden,59.3293,18.0686,16,35,126,3.6,23423,"Austria,Czechoslovakia,England,France,Germany FR,Hungary,Northern Ireland,Scotland,Soviet Union,Sweden,Wales,Yugoslavia,Mexico,Argentina,Brazil,Paraguay","AUT,GBR,FRA,DEU,HUN,RUS,SWE,MEX,ARG,BRA,PRY"
+1954 FIFA World Cup Switzerland ,1954,Switzerland,CHE,Germany,52.52,13.405,Hungary,47.4979,19.0402,16,26,140,5.4,29561,"Korea Republic,Austria,Belgium,Czechoslovakia,England,France,Germany FR,Hungary,Italy,Scotland,Switzerland,Turkey,Yugoslavia,Mexico,Brazil,Uruguay","KOR,AUT,BEL,GBR,FRA,DEU,HUN,ITA,CHE,TUR,MEX,BRA,URY"
+1950 FIFA World Cup Brazil ,1950,Brazil,BRA,Uruguay,-34.9011,-56.1645,Brazil,-15.7942,-47.8822,13,22,88,4,47511,"England,Italy,Spain,Sweden,Switzerland,Yugoslavia,Mexico,USA,Bolivia,Brazil,Chile,Paraguay,Uruguay","GBR,ITA,ESP,SWE,CHE,MEX,USA,BOL,BRA,CHL,PRY,URY"
+1938 FIFA World Cup France ,1938,France,FRA,Italy,41.9028,12.4964,Hungary,47.4979,19.0402,15,18,84,4.7,20872,"Dutch East Indies,Belgium,Czechoslovakia,France,Germany,Hungary,Italy,Netherlands,Norway,Poland,Romania,Sweden,Switzerland,Cuba,Brazil","BEL,FRA,DEU,HUN,ITA,NLD,NOR,POL,ROU,SWE,CHE,CUB,BRA"
+1934 FIFA World Cup Italy ,1934,Italy,ITA,Italy,41.9028,12.4964,Czechoslovakia,50.0755,14.4378,16,17,70,4.1,21352,"Egypt,Austria,Belgium,Czechoslovakia,France,Germany,Hungary,Italy,Netherlands,Romania,Spain,Sweden,Switzerland,USA,Argentina,Brazil","EGY,AUT,BEL,FRA,DEU,HUN,ITA,NLD,ROU,ESP,SWE,CHE,USA,ARG,BRA"
+1930 FIFA World Cup Uruguay ,1930,Uruguay,URY,Uruguay,-34.9011,-56.1645,Argentina,-34.6037,-58.3816,13,18,70,3.9,32808,"Belgium,France,Romania,Yugoslavia,Mexico,USA,Argentina,Bolivia,Brazil,Chile,Paraguay,Peru,Uruguay","BEL,FRA,ROU,MEX,USA,ARG,BOL,BRA,CHL,PRY,PER,URY"

hw4/data/world.json

@@ -0,0 +1 @@
+{"type":"Topology","transform":{"scale":[0.0036000360003600037,0.0016885772698826992],"translate":[-180,-85.22193775799991]},"objects":{"countries":{"type":"GeometryCollection","crs":{"type":"EPSG","properties":{"code":"4326"}},"geometries":[{"type":"MultiPolygon","id":"ABW","arcs":[[[0]]]},{"type":"MultiPolygon","id":"AFG","arcs":[[[1,2,3,4,5,6]]]},{"type":"MultiPolygon","id":"AGO","arcs":[[[7]],[[8,9,10,11]],[[12,13,14]]]},{"type":"MultiPolygon","id":"AIA","arcs":[[[15]],[[16]]]},{"type":"MultiPolygon","id":"ALB","arcs":[[[17,18,19,20,21]]]},{"type":"MultiPolygon","id":"ALA","arcs":[[[22]],[[23]],[[24]],[[25]],[[26]],[[27]],[[28]],[[29]],[[30]],[[31]],[[32]],[[33]],[[34]],[[35]],[[36]],[[37]]]},{"type":"MultiPolygon","id":"AND","arcs":[[[38,39]]]},{"type":"MultiPolygon","id":"ARE","arcs":[[[40]],[[41]],[[42]],[[43]],[[44]],[[45]],[[46]],[[47]],[[48]],[[49,50,51,52,53],[54]]]},{"type":"MultiPolygon","id":"ARG","arcs":[[[55,56]],[[57]],[[58,59]],[[60]],[[61]],[[62]],[[63]],[[64,65,66,67,68,69]]]},{"type":"MultiPolygon","id":"ARM","arcs":[[[70]],[[71,72,73,74,75],[76],[77]]]},{"type":"MultiPolygon","id":"BGR","arcs":[[[78,79,80,81,82,83]]]},{"type":"MultiPolygon","id":"ASM","arcs":[[[84]],[[85]],[[86]],[[87]],[[88]]]},{"type":"MultiPolygon","id":"ATA","arcs":[[[89]],[[90]],[[91]],[[92]],[[93]],[[94]],[[95]],[[96]],[[97]],[[98]],[[99]],[[100]],[[101]],[[102]],[[103]],[[104]],[[105]],[[106]],[[107]],[[108]],[[109]],[[110]],[[111]],[[112]],[[113]],[[114]],[[115]],[[116]],[[117]],[[118]],[[119]],[[120]],[[121]],[[122]],[[123]],[[124]],[[125]],[[126]],[[127]],[[128]],[[129]],[[130]],[[131]],[[132]],[[133]],[[134]],[[135]],[[136]],[[137]],[[138]],[[139]],[[140]],[[141]],[[142]],[[143]],[[144]],[[145]],[[146]],[[147]],[[148]],[[149]],[[150]],[[151]],[[152]],[[153]],[[154]],[[155]],[[156]],[[157]],[[158]],[[159]],[[160]],[[161]],[[162]],[[163]],[[164]],[[165]],[[166]],[[167]],[[168]],[[169]],[[170]],[[171]],[[172]],[[173]],[[174]],[[175]],[[176]],[[177]],[[178]],[[179]],[[180]],[[181]],[[182]],[[183]],[[184]],[[185]],[[186]],[[187]],[[188]],[[189]],[[190]],[[191]],[[192]],[[193]],[[194]],[[195]],[[196]],[[197]],[[198]],[[199]],[[200]],[[201]],[[202]],[[203]],[[204]],[[205]],[[206]],[[207]],[[208]],[[209]],[[210]],[[211]],[[212]],[[213]],[[214]],[[215]],[[216]],[[217]],[[218]],[[219]],[[220]],[[221]],[[222]],[[223]],[[224]],[[225]],[[226]],[[227]],[[228]],[[229]],[[230]],[[231]],[[232]],[[233]],[[234]],[[235]],[[236]],[[237]],[[238]],[[239]],[[240]],[[241]],[[242]],[[243]],[[244]],[[245]],[[246]],[[247]],[[248]],[[249]],[[250]],[[251]],[[252]],[[253]],[[254]],[[255]],[[256]],[[257]],[[258]],[[259]],[[260]],[[261]],[[262]],[[263]],[[264]],[[265]],[[266]],[[267]]]},{"type":"MultiPolygon","id":"ATF","arcs":[[[268]],[[269]],[[270]],[[271]],[[272]],[[273]],[[274]],[[275]],[[276]],[[277]],[[278]],[[279]],[[280]],[[281]],[[282]],[[283]],[[284]],[[285]]]},{"type":"MultiPolygon","id":"ATG","arcs":[[[286]],[[287]]]},{"type":"MultiPolygon","id":"AUS","arcs":[[[288]],[[289]],[[290]],[[291]],[[292]],[[293]],[[294]],[[295]],[[296]],[[297]],[[298]],[[299]],[[300]],[[301]],[[302]],[[303]],[[304]],[[305]],[[306]],[[307]],[[308]],[[309]],[[310]],[[311]],[[312]],[[313]],[[314]],[[315]],[[316]],[[317]],[[318]],[[319]],[[320]],[[321]],[[322]],[[323]],[[324]],[[325]],[[326]],[[327]],[[328]],[[329]],[[330]],[[331]],[[332]],[[333]],[[334]],[[335]],[[336]],[[337]],[[338]],[[339]],[[340]],[[341]],[[342]],[[343]],[[344]],[[345]],[[346]],[[347]],[[348]],[[349]],[[350]],[[351]],[[352]],[[353]],[[354]],[[355]],[[356]],[[357]],[[358]],[[359]],[[360]],[[361]],[[362]],[[363]],[[364]],[[365]],[[366]],[[367]],[[368]],[[369]],[[370]],[[371]],[[372]],[[373]],[[374]],[[375]],[[376]],[[377]],[[378]],[[379]],[[380]],[[381]]]},{"type":"MultiPolygon","id":"AUT","arcs":[[[382,383,384,385,386,387,388,389,390]]]},{"type":"MultiPolygon","id":"AZE","arcs":[[[391,392,-74]],[[393]],[[394]],[[-78]],[[-77]],[[395,396,397,-72,398],[-71]]]},{"type":"MultiPolygon","id":"BDI","arcs":[[[399,400,401]]]},{"type":"MultiPolygon","id":"BEL","arcs":[[[402,403,404,405,406,407,408]]]},{"type":"MultiPolygon","id":"BEN","arcs":[[[409,410,411,412,413]]]},{"type":"MultiPolygon","id":"BFA","arcs":[[[414,-413,415,416,417,418]]]},{"type":"MultiPolygon","id":"BGD","arcs":[[[419]],[[420]],[[421]],[[422]],[[423]],[[424]],[[425]],[[426]],[[427]],[[428]],[[429]],[[430]],[[431]],[[432]],[[433]],[[434]],[[435]],[[436]],[[437]],[[438]],[[439]],[[440,441,442]]]},{"type":"MultiPolygon","id":"BHR","arcs":[[[443]]]},{"type":"MultiPolygon","id":"BHS","arcs":[[[444]],[[445]],[[446]],[[447]],[[448]],[[449]],[[450]],[[451]],[[452]],[[453]],[[454]],[[455]],[[456]],[[457]],[[458]],[[459]],[[460]],[[461]],[[462]],[[463]],[[464]],[[465]],[[466]],[[467]],[[468]],[[469]],[[470]],[[471]],[[472]],[[473]],[[474]],[[475]],[[476]],[[477]],[[478]],[[479]],[[480]],[[481]],[[482]],[[483]],[[484]]]},{"type":"MultiPolygon","id":"BIH","arcs":[[[485,486,487,488,489]]]},{"type":"MultiPolygon","id":"-99","arcs":[[[490]]]Line truncated

hw4/hw4.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Visualization - Homework 4</title>
+    <link rel="stylesheet" href="styles.css"/>
+    <!--script src="https://d3js.org/d3.v5.js"></script-->
+    <script src="d3.js"></script>
+    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script-->
+    <script src="topojson.min.js"></script>
+    <script src="js/infoPanel.js" async></script>
+    <script src="js/barChart.js" async></script>
+    <script src="js/map.js" async></script>
+    <script src="js/script.js" async></script>
+</head>
+
+<body>
+<div class="container">
+    <header>
+        <img src="assets/fifa_russia_logo.png" alt="Fifa WC Russia Logo" id="logo"/>
+        <h1>Exploring FIFA World Cup Statistics: CS-5630/6630 Homework 4</h1>
+        <div>Name: YOURNAME; E-Mail: YOUREMAIL; A#: A12345678</div>
+    </header>
+
+    <div id="details" class="view">
+        <h2 id="edition">World Cup Title</h2>
+        <h3>Host</h3>
+        <span id="host"></span>
+        <h3>Winner</h3>
+        <span id="winner"></span>
+        <h3>Silver</h3>
+        <span id="silver"></span>
+        <h3>Teams</h3>
+        <span id="teams"></span>
+    </div>
+
+    <div id="bar-chart" class="view">
+        <h2 class="">Bar Chart</h2>
+        <div id="plot-selector">
+            <label>Plot:</label>
+            <select id="dataset" onchange="chooseData()">
+                <option selected value="attendance">Attendance</option>
+                <option value="teams">Teams</option>
+                <option value="matches">Matches</option>
+                <option value="goals">Goals</option>
+            </select>
+        </div>
+
+        <svg width="500" height="400" id="barChart">
+            <g id="xAxis"></g>
+            <g id="yAxis"></g>
+            <g id="bars"></g>
+        </svg>
+    </div>
+
+    <div id="map-view" class="view">
+        <h2>World Map</h2>
+
+        <svg width="400" height="30">
+            <rect class="host legend-element" x="0" y="5" ></rect>
+            <text x="18" y="18">Host</text>
+            <rect class="team legend-element" x="60" y="5" ></rect>
+            <text x="78" y="18">Participant</text>
+            <circle class="gold" cx="176" cy="12" r="8"></circle>
+            <text x="188" y="18">Winner</text>
+            <circle class="silver" cx="258" cy="12" r="8" ></circle>
+            <text x="270" y="18">Runner-Up</text>
+        </svg>
+
+        <svg width="900" height="600">
+            <g id="map">            </g>
+            <g id="points"></g>
+        </svg>
+    </div>
+</div>
+
+</body>
+</html>

hw4/js/barChart.js

@@ -0,0 +1,55 @@
+/** 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;
+  }
+
+  /**
+   * 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 colorScale
+
+    // Create the axes (hint: use #xAxis and #yAxis)
+
+    // Create the bars (hint: use #bars)
+
+
+    // ******* TODO: PART II *******
+
+    // 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.
+   */
+  chooseData() {
+    // ******* TODO: PART I *******
+    //Changed the selected data when a user selects a different
+    // menu item from the drop down.
+  }
+}

hw4/js/infoPanel.js

@@ -0,0 +1,27 @@
+/** Class implementing the infoPanel view. */
+class InfoPanel {
+  /**
+   * Creates a infoPanel Object
+   */
+  constructor() {
+  }
+
+  /**
+   * Update the info panel to show info about the currently selected world cup
+   * @param oneWorldCup the currently selected world cup
+   */
+  updateInfo(oneWorldCup) {
+
+    // ******* TODO: PART III *******
+
+    // Update the text elements in the infoBox to reflect:
+    // World Cup Title, host, winner, runner_up, and all participating teams that year
+
+    // 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.
+
+    //Set Labels
+
+  }
+
+}

hw4/js/map.js

@@ -0,0 +1,78 @@
+/** Class implementing the map view. */
+class Map {
+  /**
+   * Creates a Map Object
+   */
+  constructor() {
+    this.projection = d3.geoConicConformal().scale(150).translate([400, 350]);
+
+  }
+
+  /**
+   * 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
+
+    // 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) {
+
+    //Clear any previous selections;
+    this.clearMap();
+
+    // ******* 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.
+
+
+    // 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.
+
+
+    // Add a marker for gold/silver medalists
+  }
+
+  /**
+   * 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 *******
+
+    // 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
+
+    // Make sure and give your paths the appropriate class (see the .css selectors at
+    // the top of the provided html file)
+
+  }
+
+
+}

hw4/js/script.js

@@ -0,0 +1,50 @@
+
+// Load CSV file
+d3.csv("data/fifa-world-cup.csv", function (d) {
+  // Convert numeric values to 'numbers'
+  d.year = +d.YEAR;
+  d.teams = +d.TEAMS;
+  d.matches = +d.MATCHES;
+  d.goals = +d.GOALS;
+  d.avg_goals = +d.AVERAGE_GOALS;
+  d.attendance = +d.AVERAGE_ATTENDANCE;
+  // Lat and Lons of gold and silver medals teams
+  d.win_pos = [+d.WIN_LON, +d.WIN_LAT];
+  d.ru_pos = [+d.RUP_LON, +d.RUP_LAT];
+
+  //Break up lists into javascript arrays
+  d.teams_iso = d3.csvParse(d.TEAM_LIST).columns;
+  d.teams_names = d3.csvParse(d.TEAM_NAMES).columns;
+  return d;
+}).then(function(allData) {
+
+  /* Create infoPanel, barChart and Map objects  */
+  let infoPanel = new InfoPanel();
+  let worldMap = new Map();
+
+  /* DATA LOADING */
+  //Load in json data to make map
+  d3.json("data/world.json")
+    .then(function(world) {
+      worldMap.drawMap(world);
+    });
+
+  // Define this as a global variable
+  window.barChart = new BarChart(worldMap, infoPanel, allData);
+
+  // Draw the Bar chart for the first time
+  barChart.updateBarChart('attendance');
+});
+
+/**
+ *  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.
+ */
+function chooseData() {
+  // ******* TODO: PART I *******
+  // Changed the selected data when a user selects a different
+  // menu item from the drop down.
+
+}

hw4/styles.css

@@ -0,0 +1,146 @@
+
+.countries {
+    stroke: #f7f7f7;
+    fill: #d9d9d9;
+}
+
+.legend-element {
+    width: 15px;
+    height: 15px;
+}
+
+.team {
+    fill: #fee8c8;
+}
+
+.team-html {
+    background-color: #fee8c8;
+}
+
+.host {
+    fill: #2b8cbe;
+}
+
+.gold {
+    fill: #FFD700;
+    opacity: .8;
+    stroke: #252525;
+    stroke-width: 2px;
+}
+
+.silver {
+    fill: #d9d9d9;
+    opacity: .8;
+    stroke: #252525;
+}
+
+.selected {
+    fill: #d20a11;
+}
+
+/*Map grid style*/
+.grat {
+    stroke: grey;
+    stroke-width: 1px;
+    opacity: .2;
+}
+
+@font-face {
+    font-family: 'font2';
+    src: url('assets/font2.ttf');
+}
+
+@font-face {
+    font-family: 'font1';
+    src: url('assets/font1.ttf');
+}
+
+h1 {
+    margin-top: 0;
+    font-family: 'font2';
+    color: #d20a11;
+}
+
+h2 {
+    font-family: 'font2';
+    color: #d20a11;
+    padding-bottom: 0;
+    margin-top: 3px;
+    margin-bottom: 0;
+}
+
+h3 {
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+}
+
+* {
+    font-family: 'font1';
+}
+
+header {
+    padding: 0.5em;
+    clear: left;
+    text-align: left;
+    height: 100px;
+}
+
+#logo {
+    float: right;
+    height: 100px;
+}
+
+
+#plot-selector {
+    float: right;
+    margin-bottom: 5px;
+
+}
+
+.view {
+    padding: 0.5em;
+
+}
+
+
+#details {
+    width: 200px;
+    padding: 0.5em;
+    float: left;
+
+    border-width: 1px;
+    border-color: #d9d9d9;
+    border-right-style: solid;
+}
+
+#bar-chart {
+    width: 500px;
+    margin-right: 20px;
+    float: left;
+
+}
+
+#map-view {
+    margin-left: 750px;
+    width: 910px;
+    border-width: 1px;
+    border-color: #d9d9d9;
+    border-left-style: solid;
+}
+
+
+#links > line {
+    stroke: rgb(216, 216, 216);
+}
+
+#xAxis path,
+#yAxis path {
+    fill: none;
+    stroke: black;
+}
+
+#xAxis text,
+#yAxis text {
+    font-size: 14px;
+
+}

hw4/topojson.min.js

@@ -0,0 +1 @@
+!function(){var m={version:"1.6.19",mesh:function(t){return q(t,l.apply(this,arguments))},meshArcs:l,merge:function(t){return q(t,o.apply(this,arguments))},mergeArcs:o,feature:s,neighbors:k,presimplify:d};function a(A,t){var u={},v={},w={},x=[],B=-1;t.forEach(function(F,C){var E=A.arcs[F<0?~F:F],D;if(E.length<3&&!E[1][0]&&!E[1][1]){D=t[++B],t[B]=F,t[C]=D}});t.forEach(function(F){var I=y(F),J=I[0],D=I[1],H,G;if(H=w[J]){delete w[H.end];H.push(F);H.end=D;if(G=v[D]){delete v[G.start];var C=G===H?H:H.concat(G);v[C.start=H.start]=w[C.end=G.end]=C}else{v[H.start]=w[H.end]=H}}else{if(H=v[D]){delete v[H.start];H.unshift(F);H.start=J;if(G=w[J]){delete w[G.end];var E=G===H?H:G.concat(H);v[E.start=G.start]=w[E.end=H.end]=E}else{v[H.start]=w[H.end]=H}}else{H=[F];v[H.start=J]=w[H.end=D]=H}}});function y(D){var C=A.arcs[D<0?~D:D],F=C[0],E;if(A.transform){E=[0,0],C.forEach(function(G){E[0]+=G[0],E[1]+=G[1]})}else{E=C[C.length-1]}return D<0?[E,F]:[F,E]}function z(D,F){for(var C in D){var E=D[C];delete F[E.start];delete E.start;delete E.end;E.forEach(function(G){u[G<0?~G:G]=1});x.push(E)}}z(w,v);z(v,w);t.forEach(function(C){if(!u[C<0?~C:C]){x.push([C])}});return x}function l(E,w,u){var t=[];if(arguments.length>1){var z=[],B;function v(H){var G=H<0?~H:H;(z[G]||(z[G]=[])).push({i:H,g:B})}function F(G){G.forEach(v)}function C(G){G.forEach(F)}function A(G){if(G.type==="GeometryCollection"){G.geometries.forEach(A)}else{if(G.type in D){B=G,D[G.type](G.arcs)}}}var D={LineString:F,MultiLineString:C,Polygon:C,MultiPolygon:function(G){G.forEach(C)}};A(w);z.forEach(arguments.length<3?function(G){t.push(G[0].i)}:function(G){if(u(G[0].g,G[G.length-1].g)){t.push(G[0].i)}})}else{for(var y=0,x=E.arcs.length;y<x;++y){t.push(y)}}return{type:"MultiLineString",arcs:a(E,t)}}function o(z,y){var w={},t=[],v=[];y.forEach(function(A){if(A.type==="Polygon"){u(A.arcs)}else{if(A.type==="MultiPolygon"){A.arcs.forEach(u)}}});function u(A){A.forEach(function(B){B.forEach(function(C){(w[C=C<0?~C:C]||(w[C]=[])).push(A)})});t.push(A)}function x(A){return j(q(z,{type:"Polygon",arcs:[A]}).coordinates[0])>0}t.forEach(function(C){if(!C._){var A=[],B=[C];C._=1;v.push(A);while(C=B.pop()){A.push(C);C.forEach(function(D){D.forEach(function(E){w[E<0?~E:E].forEach(function(F){if(!F._){F._=1;B.push(F)}})})})}}});t.forEach(function(A){delete A._});return{type:"MultiPolygon",arcs:v.map(function(A){var D=[];A.forEach(function(F){F.forEach(function(G){G.forEach(function(H){if(w[H<0?~H:H].length<2){D.push(H)}})})});D=a(z,D);if((n=D.length)>1){var E=x(A[0][0]);for(var C=0,B;C<n;++C){if(E===x(D[C])){B=D[0],D[0]=D[C],D[C]=B;break}}}return D})}}function s(u,t){return t.type==="GeometryCollection"?{type:"FeatureCollection",features:t.geometries.map(function(v){return g(u,v)})}:g(u,t)}function g(v,u){var t={type:"Feature",id:u.id,properties:u.properties||{},geometry:q(v,u)};if(u.id==null){delete t.id}return t}function q(C,v){var z=c(C.transform),t=C.arcs;function u(G,H){if(H.length){H.pop()}for(var E=t[G<0?~G:G],F=0,J=E.length,I;F<J;++F){H.push(I=E[F].slice());z(I,F)}if(G<0){i(H,J)}}function A(E){E=E.slice();z(E,0);return E}function D(G){var F=[];for(var E=0,H=G.length;E<H;++E){u(G[E],F)}if(F.length<2){F.push(F[0].slice())}return F}function w(F){var E=D(F);while(E.length<4){E.push(E[0].slice())}return E}function y(E){return E.map(w)}function x(F){var E=F.type;return E==="GeometryCollection"?{type:E,geometries:F.geometries.map(x)}:E in B?{type:E,coordinates:B[E](F)}:null}var B={Point:function(E){return A(E.coordinates)},MultiPoint:function(E){return E.coordinates.map(A)},LineString:function(E){return D(E.arcs)},MultiLineString:function(E){return E.arcs.map(D)},Polygon:function(E){return y(E.arcs)},MultiPolygon:function(E){return E.arcs.map(y)}};return x(v)}function i(y,x){var w,u=y.length,v=u-x;while(v<--u){w=y[v],y[v++]=y[u],y[u]=w}}function p(u,t){var y=0,w=u.length;while(y<w){var v=y+w>>>1;if(u[v]<t){y=v+1}else{w=v}}return y}function k(F){var v={},G=F.map(function(){return[]});function H(J,I){J.forEach(function(K){if(K<0){K=~K}var L=v[K];if(L){L.push(I)}else{v[K]=[I]}})}function B(J,I){J.forEach(function(K){H(K,I)})}function A(J,I){if(J.type==="GeometryCollection"){J.geometries.forEach(function(K){A(K,I)})}else{if(J.type in E){E[J.type](J.arcs,I)}}}var E={LineString:H,MultiLineString:B,Polygon:B,MultiPolygon:function(J,I){J.forEach(function(K){B(K,I)})}};F.forEach(A);for(var y in v){for(var z=v[y],u=z.length,x=0;x<u;++x){for(var w=x+1;w<u;++w){var D=z[x],C=z[w],t;if((t=G[D])[y=p(t,C)]!==C){t.splice(y,0,C)}if((t=G[C])[y=p(t,D)]!==D){t.splice(y,0,D)}}}}return G}function d(y,t){var x=c(y.transform),v=b(y.transform),u=h();if(!t){t=f}y.arcs.forEach(function(A){var C=[],H=0,F;for(var D=0,B=A.length,z;D<B;++D){z=A[D];x(A[D]=[z[0],z[1],Infinity],D)}for(var D=1,B=A.length-1;D<B;++D){F=A.slice(D-1,D+2);F[1][2]=t(F);C.push(F);u.push(F)}for(var D=0,B=C.length;D<B;++D){F=C[D];F.previous=C[D-1];F.next=C[D+1]}while(F=u.pop()){var G=F.previous,E=F.next;if(F[1][2]<H){F[1][2]=H}else{H=F[1][2]}iLine truncated