Datamap is undefined in datamaps d3

Question

I need to get the datamap world graph added to the "maps-world" id in the div element as given below:

            <div id="maps-world" class="clearfix map"  style="position: relative; width: 80%; max-height: 450px;"></div>

Following are the dependencies Im adding (all the dependencies are made local)

<script src="js/twitter/maps/d3.v3.min.js"></script> 
<script src="js/twitter/maps/datamaps.world.min.js"></script> 
<script src="js/twitter/maps/topojson.v1.min.js"></script> 

Following is the code which I am using to generate the world graph:

var map = new Datamap({
    scope: 'world',
    element: document.getElementById('maps-world'),
    projection: 'mercator',
    height: 500,
    fills: {
      defaultFill: '#f0af0a',
      lt50: 'rgba(0,244,244,0.9)',
      gt50: 'red'
    },

data: {
  USA: {fillKey: 'lt50' },
  RUS: {fillKey: 'lt50' },
  CAN: {fillKey: 'lt50' },
  BRA: {fillKey: 'gt50' },
  ARG: {fillKey: 'gt50'},
  COL: {fillKey: 'gt50' },
  AUS: {fillKey: 'gt50' },
  ZAF: {fillKey: 'gt50' },
  MAD: {fillKey: 'gt50' }       
}
  })

  map.arc([
   {
    origin: {
        latitude: 40.639722,
        longitude: 73.778889
    },
    destination: {
        latitude: 37.618889,
        longitude: -122.375
    }
  },
  {
      origin: {
          latitude: 30.194444,
          longitude: -97.67
      },
      destination: {
          latitude: 25.793333,
          longitude: -0.290556
      }
  }
  ], {strokeWidth: 2});

 map.bubbles([
   {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
   {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
   {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},

 ], {
   popupTemplate: function(geo, data) {
     return "<div class='hoverinfo'>It is " + data.name + "</div>";
   }
 });

I'm receiving the following error in my console. Datamap is undefined

Since it was the example that was given in the datamap-github-page named Choropleth,it was expected to be working fine. Can any body help me on this.

Answer 1

I fixed this by including the latest versions of the libraries in the following order.

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="datamaps.world.min.js"></script>

Ran it on my machine it showed the map with regions and few arcs and bubbles.

Hope this helps.