Major changes incorporating feedback from class collected Nov 25 Re I…

…ssue #7:

- Direct selection of data series (and indication of selected series) using the map. The map is basically the legend.
- Dynamic hide/unhide ability for series in the chart. When a series is deselected and then selected again it's data is simply shown again instead of being reloaded.
- Minor performance and reliability improvements.

app/scripts/controllers/main.js

@@ -528,15 +528,17 @@ app.controller('MainCtrl', ['$scope', '$http', 'globalService', 'RainfallSeriesP
     // Query driver
     $scope.appendSeries = function(locationid, year) {
       RainfallSeriesProvider.get({
-        startdate: year + '-01-01',
-        enddate: year + '-12-31',
+        startdate: year.toString() + '-01-01',
+        enddate: year.toString() + '-12-31',
         locationid: locationid
       },
       function(data) {
         console.log('droughtioApp.controller:MainCtrl:$scope.appendSeries:data', data);
         $scope.year = year;
-        data.unshift(locationid.toString());
-        chart.load({columns: [data]});
+        data.unshift(locationid.toString()  + ' ' + year.toString());
+        chart.load({
+          columns: [data]
+        });
       });
     };
 
@@ -575,15 +577,30 @@ app.controller('MainCtrl', ['$scope', '$http', 'globalService', 'RainfallSeriesP
 
     // C3 chart
     var chart = c3.generate($scope.config);
-    $scope.appendSeries('FIPS:12', 2012);
+    // $scope.appendSeries('FIPS:12', 2012);
 
     // Dynamically load new series
     var grab = function() {
-      var next = 'FIPS:' + globalService.nextSelection().toString().substring(0,2);
-      console.log(next);
-      $scope.appendSeries(next, 2012);
+      var id = 'FIPS:' + globalService.nextSelection().toString();
+      console.log('select ' + id);
+      if(chart.data().hasOwnProperty(id)) {
+        // The data was already loaded, so unhide id.
+        chart.show(id);
+      } else {
+        // The data was never loaded, so fetch and then load it.
+        $scope.appendSeries(id, $scope.year);
+      }
+    };
+    globalService.registerObserverCallback('select', grab);
+
+    // Dynamically remove series from the chart according to which states are deselected
+    var hide = function() {
+      var id = 'FIPS:' + globalService.nextDeselection().toString();
+      // $scope.appendSeries(id);
+      console.log('deselect ' + id);
+      chart.hide(id);
     };
-    globalService.registerObserverCallback(grab);
+    globalService.registerObserverCallback('deselect', hide);
 
   }
 ]);

app/scripts/directives/droughtMap.js

@@ -60,6 +60,8 @@ app.directive('droughtMap', ['d3Service', '$q', 'globalService',
               .call(zoom) // delete this line to disable free zooming
               .call(zoom.event);
 
+            var selectedStates = [];
+
             function clicked(d) {
               if (active.node() === this) 
                 return reset();
@@ -153,19 +155,32 @@ app.directive('droughtMap', ['d3Service', '$q', 'globalService',
                 .enter().append('path')
                   .attr('class', 'administrative')
                   .attr('d', path)
-                  .on('click', clicked);
-              g.append('g')
-                  .attr('id', 'counties')
-                .selectAll('path')
-                  .data(topojson.feature(topology, topology.objects.counties).features)
-                .enter().append('path')
-                  .attr('class', 'county')
-                  .attr('d', path)
+                  // .on('click', clicked);
                   .on('click', function(data) {
-                    var countyId = data.id;
-                    console.log(countyId);
-                    globalService.queue(countyId);
+                    var fips = data.id;
+                    if(selectedStates && selectedStates[fips] === true) {
+                      selectedStates[fips] = false;
+                      globalService.deselect(fips);
+                      d3.select(this).attr('class', 'administrative');
+                    } else {
+                      selectedStates[fips] = true;
+                      globalService.select(fips);
+                      d3.select(this).attr('class', 'administrative-selected');
+                    }
+                    console.log(fips);
                   });
+              // g.append('g')
+              //     .attr('id', 'counties')
+              //   .selectAll('path')
+              //     .data(topojson.feature(topology, topology.objects.counties).features)
+              //   .enter().append('path')
+              //     .attr('class', 'county')
+              //     .attr('d', path)
+                  // .on('click', function(data) {
+                  //   var countyId = data.id;
+                  //   console.log(countyId);
+                  //   globalService.queue(countyId);
+                  // });
             });
 
             // Draw the zones of drought severity

app/scripts/services/globalService.js

@@ -4,22 +4,35 @@ app.factory('globalService',
   function() {
 
     var selectionQueue = [];
+    var deselectionQueue = [];
     var observerCallbacks = [];
-    var notifyObservers = function(){
+    var notifyObservers = function(kind){
       angular.forEach(observerCallbacks, function(callback){
-        callback();
+        if(callback.kind === kind)
+        {
+          callback.callback();
+        }
       });
     };
 
     var globalService = {
-      registerObserverCallback: function(callback){
-        observerCallbacks.push(callback);
+      registerObserverCallback: function(kind, callback){
+        observerCallbacks.push({
+          kind: kind,
+          callback: callback
+        });
       },
-      queue: function(id) {
+      deselect: function(id) {
+        deselectionQueue.push(id);
+        notifyObservers('deselect');
+      },
+      nextDeselection: function() {
+        return deselectionQueue.shift();
+      },
+      select: function(id) {
         selectionQueue.push(id);
-        notifyObservers();
+        notifyObservers('select');
       },
-
       nextSelection: function() {
         return selectionQueue.shift();
       }

app/styles/view.scss

@@ -73,18 +73,12 @@ body {
     line-height: 100%;
   }
 }
-path.administrative, path.zone {
+.administrative, .administrative-selected, .zone {
   fill: $color-viz-focus;
   stroke: $color-viz-line;
   stroke-width: 1px;
   opacity: 0;
   transition: opacity 5ms ease-in, color 15ms ease-in-out;
-  &:hover {
-    opacity: 0.9;
-  }
-  &.active {
-    fill: $color-viz-focus;
-  }
 }
 path.county {
   opacity: 0;
@@ -95,18 +89,20 @@ path.graticule {
   stroke-width: 1px;
   stroke-opacity: 0.5;
 }
+
+// Zones and States
 #zones {
   stroke-width: 0.5px;
-  path.severity0 { fill: #FFFF00; }
-  path.severity1 { fill: #FCD37F; }
-  path.severity2 { fill: #FFAA00; }
-  path.severity3 { fill: #E60000; }
-  path.severity4 { fill: #730000; }
   path               { opacity: 1.00; }
-  &:hover path       { opacity: 0.75; }
-  &:hover path:hover { opacity: 1.00; }
 }
-#states {
-  path               { opacity: 0.10; }
-  path:hover         { opacity: 0.85; }
+.severity0 { fill: #FFFF00; }
+.severity1 { fill: #FCD37F; }
+.severity2 { fill: #FFAA00; }
+.severity3 { fill: #E60000; }
+.severity4 { fill: #730000; }
+.zone                         { opacity: 0.75; }
+.zone:hover                   { opacity: 1.00; }
+.administrative               { opacity: 0.10; }
+.administrative-selected      { opacity: 0.60; }
+.administrative:hover         { opacity: 0.85; }
 }