States not highlighting

Question

I want some states of India highlighted. When i execute my code it shows no error in the console but the states do not get highlighted.Please help.

<div id="indian" style="position: relative;top:50px; width: 100%; height: 100%;"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="datamaps.ind.min.js"></script>
<script type="text/javascript">
var map = new Datamap({
  element: document.getElementById('indian'),
  scope: 'ind',
  fills: {
        defaultFill: '#ccc' 
    },
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(1000)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  }
});
var states = [ 'GJ', 'MH', 'KA', 'TN', 'AP', 'OR', 'WB', 'AS', 'UP', 'PB', 'HP', 'JK'];
$.each(states,function(index,state) {
    var sc = state;
    console.log(sc)
    map.updateChoropleth({[sc]:'#000'});
})

</script>

Answer 1

When you call updateChoropleth it's looking for the class names assigned to each region in the map. For this map those class are not just the state abbreviations but are the state abbreviations prefixed with IN.. Further, you do not need to keep calling updateChoropleth over and over. Build a hash object and call it once. Finally, I'm not sure why you are loading jquery just for one function when a simple for or .forEach is fine here. Putting this all together:

var states = [ 'GJ', 'MH', 'KA', 'TN', 'AP', 'OR', 'WB', 'AS', 'UP', 'PB', 'HP', 'JK'],
    update = {};
states.forEach(function(d){
  update['IN\\.' + d] = '#000';
});
map.updateChoropleth(update);

Running code:

<div id="indian" style="width: 500px; height: 500px;"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/markmarkoh/datamaps/master/dist/datamaps.ind.min.js"></script>
<script type="text/javascript">
var map = new Datamap({
  element: document.getElementById('indian'),
  scope: 'ind',
  fills: {
        defaultFill: '#ccc' 
    },
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(1000)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  }
});
var states = [ 'GJ', 'MH', 'KA', 'TN', 'AP', 'OR', 'WB', 'AS', 'UP', 'PB', 'HP', 'JK'],
    update = {};
states.forEach(function(d){
  update['IN\\.' + d] = '#000';
});
map.updateChoropleth(update);

</script>