Add basic map tooltips.

static/js/modules/maps.js

@@ -19,6 +19,10 @@ var compactRules = [
   ['k', 3]
 ];
 
+_.templateSettings = {
+  interpolate: /\{\{(.+?)\}\}/g
+};
+
 function chooseRule(value) {
   return _.find(compactRules, function(rule) {
     return value >= Math.pow(10, rule[1]);
@@ -30,7 +34,7 @@ function compactNumber(value, rule) {
   return d3.round(value / divisor, 1).toString() + rule[0];
 }
 
-function stateMap($elm, data, width, height, max, addLegend) {
+function stateMap($elm, data, width, height, max, addLegend, addTooltips) {
   var svg = d3.select($elm[0])
     .append('svg')
       .attr('width', width)
@@ -63,11 +67,18 @@ function stateMap($elm, data, width, height, max, addLegend) {
         return d.properties.name;
       })
       .attr('class', 'shape')
-      .attr('d', path);
+      .attr('d', path)
+    .on('mouseover', function(d) {
+      this.parentNode.appendChild(this);
+    });
 
   if (addLegend || typeof addLegend === 'undefined') {
     stateLegend(svg, scale, quantize, quantiles);
   }
+
+  if (addTooltips) {
+    stateTooltips(svg, path, results);
+  }
 }
 
 function stateLegend(svg, scale, quantize, quantiles) {
@@ -106,6 +117,37 @@ function stateLegend(svg, scale, quantize, quantiles) {
     });
 }
 
+var tooltipTemplate = _.template(
+  '<div>{{ name }}</div>' +
+  '<div>{{ total }}</div>'
+);
+
+function stateTooltips(svg, path, results) {
+  var tooltip = d3.select('body').append('div')
+    .attr('id', 'map-tooltip')
+    .style('position', 'absolute')
+    .style('text-align', 'center')
+    .style('pointer-events', 'none')
+    .style('display', 'none');
+  svg.selectAll('path')
+    .on('mouseover', function(d) {
+      this.parentNode.appendChild(this);
+      var offset = $(this).offset();
+      var html = tooltipTemplate({
+        name: d.properties.name,
+        total: helpers.currency(results[d.properties.name])
+      });
+      tooltip
+        .style('display', 'block')
+        .style('left', parseInt(offset.left) + 'px')
+        .style('top', parseInt(offset.top) + 'px')
+        .html(html);
+    })
+    .on('mouseout', function(d) {
+      tooltip.style('display', 'none');
+    });
+}
+
 function highlightState($parent, state) {
   var rule = '[data-state="' + state + '"]';
   $parent.find('path:not(' + rule + ')').each(function(idx, elm) {

static/js/pages/committee-single.js

@@ -322,7 +322,7 @@ $(document).ready(function() {
   var $map = $('.state-map');
   var url = buildStateUrl($map);
   $.getJSON(url).done(function(data) {
-    maps.stateMap($map, data, 400, 400);
+    maps.stateMap($map, data, 400, 400, null, true, false);
   });
   events.on('state.table', function(params) {
     maps.highlightState($map, params.state);

static/js/pages/elections.js

@@ -304,7 +304,7 @@ function drawStateMap($container, candidateId, cached) {
     cached[candidateId] = results;
     updateColorScale($container, cached);
     var max = mapMax(cached);
-    maps.stateMap($map, data, 400, 300, max, false);
+    maps.stateMap($map, data, 400, 300, max, false, true);
   });
 }