Merge pull request #41 from markmarkoh/update-choropleth

allowing for the updating of colors after drawing
markmarkoh · Jan 21, 2014 · 32b6fce · 32b6fce
2 parents c785ae6 + ff9a78e
commit 32b6fce
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 199 deletions.
diff --git a/dist/datamaps.all.js b/dist/datamaps.all.js
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
@@ -48,6 +48,7 @@
  function addContainer( element ) {
  this.svg = d3.select( element ).append('svg')
  .attr('width', element.offsetWidth)
+ .attr('class', 'datamap')
  .attr('height', element.offsetHeight);
 
  return this.svg;
@@ -80,7 +81,7 @@
  function addStyleBlock() {
  if ( d3.select('.datamaps-style-block').empty() ) {
  d3.select('head').attr('class', 'datamaps-style-block').append('style')
- .html('path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');
+ .html('.datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');
  }
  }
 
@@ -513,6 +514,28 @@
  .attr('class', className || '');
  };
 
+ Datamap.prototype.updateChoropleth = function(data) {
+ var svg = this.svg;
+ for ( var subunit in data ) {
+ if ( data.hasOwnProperty(subunit) ) {
+ var color;
+ if ( typeof data[subunit] === "string" ) {
+ color = data[subunit];
+ }
+ else if ( typeof data[subunit].color === "string" ) {
+ color = data[subunit].color;
+ }
+ else {
+ color = this.options.fills[ data[subunit].fillKey ];
+ }
+ svg
+ .selectAll('.' + subunit)
+ .transition()
+ .style('fill', color);
+ }
+ }
+ };
+
  Datamap.prototype.updatePopup = function (element, d, options) {
  var self = this;
  element.on('mousemove', null);

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
diff --git a/dist/datamaps.world.min.js b/dist/datamaps.world.min.js
diff --git a/src/js/datamaps.js b/src/js/datamaps.js
@@ -48,6 +48,7 @@
  function addContainer( element ) {
  this.svg = d3.select( element ).append('svg')
  .attr('width', element.offsetWidth)
+ .attr('class', 'datamap')
  .attr('height', element.offsetHeight);
 
  return this.svg;
@@ -80,7 +81,7 @@
  function addStyleBlock() {
  if ( d3.select('.datamaps-style-block').empty() ) {
  d3.select('head').attr('class', 'datamaps-style-block').append('style')
- .html('path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');
+ .html('.datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');
  }
  }
 
@@ -513,6 +514,28 @@
  .attr('class', className || '');
  };
 
+ Datamap.prototype.updateChoropleth = function(data) {
+ var svg = this.svg;
+ for ( var subunit in data ) {
+ if ( data.hasOwnProperty(subunit) ) {
+ var color;
+ if ( typeof data[subunit] === "string" ) {
+ color = data[subunit];
+ }
+ else if ( typeof data[subunit].color === "string" ) {
+ color = data[subunit].color;
+ }
+ else {
+ color = this.options.fills[ data[subunit].fillKey ];
+ }
+ svg
+ .selectAll('.' + subunit)
+ .transition()
+ .style('fill', color);
+ }
+ }
+ };
+
  Datamap.prototype.updatePopup = function (element, d, options) {
  var self = this;
  element.on('mousemove', null);