adding reset option to updateChoropleth

markmarkoh · Jan 29, 2016 · c45c73a · c45c73a
1 parent ea021da
commit c45c73a
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 8 deletions.
diff --git a/dist/datamaps.all.js b/dist/datamaps.all.js
@@ -12436,8 +12436,19 @@
       .attr('class', className || '');
   };
 
-  Datamap.prototype.updateChoropleth = function(data) {
+  Datamap.prototype.updateChoropleth = function(data, options) {
     var svg = this.svg;
+    var that = this;
+
+    // when options.reset = true, reset all the fill colors to the defaultFill and kill all data-info
+    if ( options && options.reset === true ) {
+      svg.selectAll('.datamaps-subunit')
+        .attr('data-info', function() {
+           return "{}"
+        })
+        .transition().style('fill', this.options.fills.defaultFill)
+    }
+
     for ( var subunit in data ) {
       if ( data.hasOwnProperty(subunit) ) {
         var color;

diff --git a/dist/datamaps.all.min.js b/dist/datamaps.all.min.js
diff --git a/dist/datamaps.none.min.js b/dist/datamaps.none.min.js
diff --git a/dist/datamaps.usa.js b/dist/datamaps.usa.js
@@ -975,8 +975,19 @@
       .attr('class', className || '');
   };
 
-  Datamap.prototype.updateChoropleth = function(data) {
+  Datamap.prototype.updateChoropleth = function(data, options) {
     var svg = this.svg;
+    var that = this;
+
+    // when options.reset = true, reset all the fill colors to the defaultFill and kill all data-info
+    if ( options && options.reset === true ) {
+      svg.selectAll('.datamaps-subunit')
+        .attr('data-info', function() {
+           return "{}"
+        })
+        .transition().style('fill', this.options.fills.defaultFill)
+    }
+
     for ( var subunit in data ) {
       if ( data.hasOwnProperty(subunit) ) {
         var color;

diff --git a/dist/datamaps.usa.min.js b/dist/datamaps.usa.min.js
diff --git a/dist/datamaps.world.js b/dist/datamaps.world.js
@@ -12436,8 +12436,19 @@
       .attr('class', className || '');
   };
 
-  Datamap.prototype.updateChoropleth = function(data) {
+  Datamap.prototype.updateChoropleth = function(data, options) {
     var svg = this.svg;
+    var that = this;
+
+    // when options.reset = true, reset all the fill colors to the defaultFill and kill all data-info
+    if ( options && options.reset === true ) {
+      svg.selectAll('.datamaps-subunit')
+        .attr('data-info', function() {
+           return "{}"
+        })
+        .transition().style('fill', this.options.fills.defaultFill)
+    }
+
     for ( var subunit in data ) {
       if ( data.hasOwnProperty(subunit) ) {
         var color;

diff --git a/dist/datamaps.world.min.js b/dist/datamaps.world.min.js
diff --git a/src/examples/update-choropleth-reset.html b/src/examples/update-choropleth-reset.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .active { fill: blue !important;}
+          /*.datamaps-key dt, .datamaps-key dd {float: none !important;}
+          .datamaps-key {right: -50px; top: 0;}*/
+        </style>
+      </head>
+      <body>
+
+        <div id="container1" style="border:1px dotted blue; width: 700px; height: 475px; position: relative;"></div>
+        <script src="/src/js/components/d3/d3.min.js"></script>
+        <script src="/src/js/components/topojson/topojson.js"></script>
+        <!-- <script src="/src/js/json2.js"></script> -->
+        <script src="/src/rel/datamaps.usa.js"></script>
+        <script>
+
+          var election = new Datamap({
+            scope: 'usa',
+            element: document.getElementById('container1'),
+            geographyConfig: {
+              //popupOnHover: false,
+              //highlightOnHover: false,
+              borderColor: '#444',
+              borderWidth: 0.5
+            },
+            bubblesConfig: {
+			  animate: false,
+              popupTemplate: function(geography, data) {
+                return '<div class="hoverinfo">Some From New: data about ' + data.centered + '</div>'
+              },
+              fillOpacity: 0.2
+            },
+            fills: {
+              'Visited': '#306596',
+              'neato': '#0fa0fa',
+              'Trouble': '#bada55',
+              defaultFill: '#dddddd'
+            },
+            data: {
+              NY: {
+                fillKey: 'neato',
+                numbeers: 555
+              }
+            }
+          });
+
+          window.setTimeout(function() {
+            election.updateChoropleth({
+              NY: 'blue',
+              NJ: 'blue',
+              TX: {
+                fillKey: 'Trouble',
+                numbers: 555
+              },
+              FL: {
+                fillColor: 'blue'
+              }
+            })
+          }, 1500)
+
+          window.setTimeout(function() {
+            //election.updateChoropleth({CA: 'blue'}, {reset: true})
+
+          }, 2000)
+
+</script>
+</body>
+</html>
diff --git a/src/js/datamaps.js b/src/js/datamaps.js
@@ -975,8 +975,19 @@
       .attr('class', className || '');
   };
 
-  Datamap.prototype.updateChoropleth = function(data) {
+  Datamap.prototype.updateChoropleth = function(data, options) {
     var svg = this.svg;
+    var that = this;
+
+    // when options.reset = true, reset all the fill colors to the defaultFill and kill all data-info
+    if ( options && options.reset === true ) {
+      svg.selectAll('.datamaps-subunit')
+        .attr('data-info', function() {
+           return "{}"
+        })
+        .transition().style('fill', this.options.fills.defaultFill)
+    }
+
     for ( var subunit in data ) {
       if ( data.hasOwnProperty(subunit) ) {
         var color;