hw6 first commit

hw6/public/js/tooltip.js

@@ -0,0 +1,71 @@
+class Tooltip {
+
+  constructor() {
+    //----------------------------------------
+    // tooltip
+    //----------------------------------------
+    this.tooltip = d3.select("body")
+      .append("div")
+      .style("position", "absolute")
+      .style("z-index", "10")
+      .style("visibility", "hidden")
+      .style("background", "#FFFFFF")
+      .attr('id', 'tooltip')
+      .classed('tooltipDiv', true)
+    ;
+  };
+
+  chooseClass (party) {
+    if (party == "R"){
+      return "republican";
+    }
+    else if (party== "D"){
+      return "democrat";
+    }
+    else if (party == "I"){
+      return "independent";
+    }
+  }
+
+  /**
+   * Gets the HTML content for a tool tip.
+   */
+  tooltip_html(d) {
+    let text = "<h2 class ="  + this.chooseClass(d.State_Winner) +
+      " >" + d.State + "</h2>";
+    text +=  "Electoral Votes: " + d.Total_EV;
+    text += "<ul>"
+    // Democrat
+    text += "<li class = democrat>" +
+      d.D_Nominee_prop+":\t\t"+d.D_Votes+"("+d.D_Percentage+"%)" + "</li>"
+    // Republican
+    text += "<li class = republican>" +
+      d.R_Nominee_prop+":\t\t"+d.R_Votes+"("+d.R_Percentage+"%)" + "</li>"
+    // Independent
+    if (d.I_Percentage) {
+      text += "<li class = independent>" +
+        d.I_Nominee_prop+":\t\t"+d.I_Votes+"("+d.I_Percentage+"%)" + "</li>"
+    }
+    text += "</ul>";
+
+    return text;
+  }
+
+  mouseover(d) {
+    this.tooltip
+      .html(this.tooltip_html(d))
+      .classed('tooltip-title', true)
+    ;
+    this.tooltip.style("visibility", "visible");
+  }
+
+  mousemove(d) {
+    this.tooltip.style("top", (d3.event.pageY-10)+"px")
+      .style("left",(d3.event.pageX+10)+"px");
+  }
+
+  mouseout(d) {
+    this.tooltip.style("visibility", "hidden");
+  }
+
+};