CanadaMap.js

// CODE SNIPPET, NOT THE FULL FILE //

///////////////////////////////////////////////////////////////////////////////////// DRAW MAP (called on load and on interactions)

var gTopo;
function ready(error, topo) {
  gTopo = topo;
  updateDate();
  drawMap();
}

////////////////////////// drawMap() - draws map comprised of individual provinces, styled according to current interaction state
function drawMap() {
  //clear old map
  if (d3.selectAll(".oldChart")) {
        d3.selectAll(".oldChart").remove();
    }

  //--------------------------------------------- Draw the map
  svg.append("g")
    .attr("class", "oldChart")
    .selectAll("path")
    .data(gTopo.features)
    .enter()
    .append("path")
      //----------------------------------------- Draw each province
      .attr("d", d3.geoPath()
        .projection(projection)
      )
      // Set the color of each province
      .attr("fill", function (d, i) {
        var output;
        if (usingMonth){
          switch(curColorCode){
              case colorCoding.T: output = colorScaleT(-getValueByMonth(dataNest, convertName(d.properties.NAME), curYear, curMonth, "tMean")); break;
              case colorCoding.TD: output = colorScaleTD(-getValueByMonth(dataNest, convertName(d.properties.NAME), curYear, curMonth, "tDiff")); break;
              case colorCoding.P: output = colorScaleP(getValueByMonth(dataNest, convertName(d.properties.NAME), curYear, curMonth, "pMean")); break;
              case colorCoding.PD: output = colorScalePD(getValueByMonth(dataNest, convertName(d.properties.NAME), curYear, curMonth, "pDiff")); break;
          }
        } else {
          switch(curColorCode){
              case colorCoding.T: output = colorScaleT(-getValueByYear(dataNest, convertName(d.properties.NAME), curYear, "tMean")); break;
              case colorCoding.TD: output = colorScaleTD(-getValueByYear(dataNest, convertName(d.properties.NAME), curYear, "tDiff")); break;
              case colorCoding.P: output = colorScaleP(getValueByYear(dataNest, convertName(d.properties.NAME), curYear, "pMean")); break;
              case colorCoding.PD: output = colorScalePD(getValueByYear(dataNest, convertName(d.properties.NAME), curYear, "pDiff")); break;
          }
        }
        return output;
      })
      .style("stroke", "transparent")
      .attr("class", function(d){ return "Country" } )
      .style("opacity", 1)
      // Listen for mouse interactions
      .on("mouseover", mouseOver )
      .on("mouseleave", mouseLeave );
}

///////////////////////////////////////////////////////////////////////////////////////////////////// Hover
let mouseOver = function(d) {
  // Interact with individual provinces only if toggled to Provincial data
  if (!showingCanada){
    // To highlight the province, set all others to .5 opacity
    d3.selectAll(".Country")
    .transition()
    .duration(200)
    .style("opacity", .5)
    d3.select(this)
      .transition()
      .duration(200)
      .style("opacity", 1)
    // Update province label in the legend, call updateDateData() to update t and p values in the legend
    curProvince = d.properties.NAME;
    lblProvince.text(d.properties.NAME);
    updateDateData(false);
  } else {
    // If toggled to Canadian data, highlight Provincial data button while hovering
    document.getElementById("canadaMapShowProvincial").classList.add("highlightPbtn");
  }
}

let mouseLeave = function(d) {
  d3.selectAll(".Country")
    .transition()
    .duration(200)
    .style("opacity", 1)
  d3.select(this)
    .transition()
    .duration(200)
    .style("stroke", "transparent")
  if (showingCanada) document.getElementById("canadaMapShowProvincial").classList.remove("highlightPbtn");
}