finished

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");
 
+    }
 
 }