How to dynamically change the color of a country on d3 map

var COLOR = 'blue';
var map = new Datamap({
  element: document.getElementById('map'),
  responsive: false,
});

function changeColor(countryCode) {
  map.updateChoropleth({
    countryCode: COLOR
  });
}

setInterval(function() {
  changeColor('USA');
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
<div id="map"></div>

I have the following javascript which renders a world map on HTML.

var map = new Datamap({
  element: document.getElementById('map'),
  responsive: true,
});

function changeColor(countryCode) {
  map.updateChoropleth({
    countryCode: 'blue'
  });
  console.log(countryCode + '--> colorChange');
}

setInterval(function() {
  changeColor('USA');
}, 2000);

I want to update the color of a particular country after a 2s. When I run the above code, the function changeColor is called after every 2s, but the function map.updateChoropleth does not seem to have any effect. In case, I change the following snippet:

function changeColor(countryCode) {
  map.updateChoropleth({
    countryCode: 'blue'
  });
  console.log(countryCode + '--> colorChange');
}

to

function changeColor(countryCode) {
  map.updateChoropleth({
    "USA": 'blue'
  });
  console.log(countryCode + '--> colorChange');
}

the function works as expected. Why does this not work?

2 thoughts on “How to dynamically change the color of a country on d3 map”

  1. The updateChoropleth function is looking for a property key literally named countryCode.

    A solution is populating an object and passing it to the function:

    var COLOR = 'blue';
    var map = new Datamap({
      element: document.getElementById('map'),
      responsive: false,
    });
    
    function changeColor(countryCode) {
      var obj = {};
      obj[countryCode] = COLOR;
      map.updateChoropleth(obj);
    }
    
    setInterval(function() {
      changeColor('USA');
    }, 2000);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
    <div id="map"></div>
    Reply
  2. This seem to work for me

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
          <div id="map" class="world-map"></div>
          <script>
            // https://github.com/markmarkoh/datamaps
            // https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3
    
            var defaultColor = '#c3c3c3';
            var activeColor = '#00b3c6';
            var highlightColorHover = '#037582';
            var highlightBorderColor = '#037582';
    
            var map = new Datamap({
              element: document.getElementById('map'),
              responsive: false,
              fills: {
                defaultFill: defaultColor
              },
              geographyConfig: {
                highlightFillColor: highlightColorHover,
                highlightBorderColor: highlightBorderColor,
              },
            });
    
            map.updateChoropleth({
              USA: activeColor,
              MEX: activeColor,
              PAN: activeColor,
              ARG: activeColor,
              BRA: activeColor,
              CHL: activeColor,
              COL: activeColor,
              AUT: activeColor,
              BEL: activeColor,
              BGR: activeColor,
              DNK: activeColor,
              FIN: activeColor,
              FRA: activeColor,
              DEU: activeColor,
              HUN: activeColor,
              IRL: activeColor,
              ITA: activeColor,
              LTU: activeColor,
              NLD: activeColor,
              POL: activeColor,
              PRT: activeColor,
              ROU: activeColor,
              RUS: activeColor,
              ESP: activeColor,
              SWE: activeColor,
              CHE: activeColor,
              TUR: activeColor,
              GBR: activeColor,
              CHN: activeColor,
              IND: activeColor,
              JPN: activeColor,
              MYS: activeColor,
              PAK: activeColor,
              SGP: activeColor,
              AUS: activeColor,
              ARE: activeColor,
              ZAF: activeColor,
            });
          </script>
    
    Reply

Leave a Comment