Adding HW 4

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.
+
+}