Merge pull request #36 from ClimateCompatibleGrowth/issue_33

Hard coded partner and associated countries into world map

app/static/js/world.js

@@ -1,12 +1,16 @@
-const HOVER_COLOUR = "#f03b20"
-const HIGHLIGHT_COLOUR = "#feb24c"
-const BACKGROUND_COLOUR = "#ffeda0"
+const colours = ['#d7191c','#fdae61','#ffffbf','#abd9e9','#2c7bb6']
+
+const BACKGROUND_COLOUR = colours[3]
+const HIGHLIGHT_COLOUR = colours[1]
+const PARTNER_COLOUR = colours[0]
+const ASSOC_COLOUR = colours[4]
+const HOVER_COLOUR = colours[2]
 
 function mouseOverHandler(d, i) {
-    d3.select(this).attr("fill", HOVER_COLOUR)
+    d3.select(this).transition().duration('50').attr('opacity', '.85');
   }
   function mouseOutHandler(d, i) {
-    d3.select(this).attr("fill", HIGHLIGHT_COLOUR)
+    d3.select(this).transition().duration('50').attr('opacity', '1')
   }
   function clickHandler(d, i) {
     const url = "/countries/" + i.id
@@ -19,12 +23,18 @@ const svg = d3.select("svg"),
     width = +svg.attr("width"),
     height = +svg.attr("height");
 
+// svg.append("rect")
+//     .attr("width", width)
+//     .attr("height", height)
+//     .attr("fill", colours[2]);
+
 // Map and projection
 const projection = d3.geoNaturalEarth1()
-    .scale(width / 1.3 / Math.PI)
+    .scale(width / 1.1 / Math.PI)
     .translate([width / 2, height / 2])
 
 
+
 const countries = country_data;
 
 // Load external data and draw base map
@@ -55,5 +65,36 @@ d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/w
               .on("click", clickHandler)
               .attr("fill", HIGHLIGHT_COLOUR);
 
+    // Add different actions for partner countries
+    let partner_countries = ['KEN', 'ZMB', 'LAO', 'GHA', 'VNM', 'IND', 'NPL', 'MWI']
+    filtered = features.filter(function(d,i){ return partner_countries.indexOf(d.id) >= 0 })
+
+    // Add the interactive elements for the filtered countries
+    filtered.on("mouseover", mouseOverHandler)
+    .on("mouseout", mouseOutHandler)
+    .on("click", clickHandler)
+    .attr("fill", PARTNER_COLOUR);
+
+    // Add different actions for associated countries
+    let associated_countries = ['ZAF', 'CRI', 'SLE']
+    filtered = features.filter(function(d,i){ return associated_countries.indexOf(d.id) >= 0 })
+
+    // Add the interactive elements for the filtered countries
+    filtered.on("mouseover", mouseOverHandler)
+    .on("mouseout", mouseOutHandler)
+    .on("click", clickHandler)
+    .attr("fill", ASSOC_COLOUR);
+
+
+  // Handmade legend
+  const legend_x = 400
+  const legend_y = 500
+  svg.append("circle").attr("cx",legend_x).attr("cy",legend_y).attr("r", 6).style("fill", HIGHLIGHT_COLOUR)
+  svg.append("circle").attr("cx",legend_x).attr("cy",legend_y + 20).attr("r", 6).style("fill", PARTNER_COLOUR)
+  svg.append("circle").attr("cx",legend_x).attr("cy",legend_y + 40).attr("r", 6).style("fill", ASSOC_COLOUR)
+
+  svg.append("text").attr("x", legend_x + 20).attr("y", legend_y).text("CCG outputs available").style("font-size", "15px").attr("alignment-baseline","middle")
+  svg.append("text").attr("x", legend_x + 20).attr("y", legend_y + 20).text("CCG partner country").style("font-size", "15px").attr("alignment-baseline","middle")
+  svg.append("text").attr("x", legend_x + 20).attr("y", legend_y + 40).text("CCG associated country").style("font-size", "15px").attr("alignment-baseline","middle")
   })