JSFiddle - React, Tailwind, and code Playground

by Pablo Rocha

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- I recommend you host this file on your own, since this will change without warning -->
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<div id="container1" style="position: relative; width: 500px; height: 300px;"></div>

JavaScript

$("#container1").datamap({
 scope: 'world',
 done: $(function(datamap) {
  datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
     var countryData = mapData[geography.id];
}),
geography_config: {
 borderColor: 'rgba(255,255,255,0.3)',
 highlightBorderColor: 'rgba(0,0,0,0.5)',
 popupTemplate: _.template([
   '<div class="hoverinfo">',
   '<% if (data.name) { %> <strong><%= data.name %></strong><br/><% } %>',
       '<% if (data.GDP) { %>',
       'GDP per capita: <strong><%= data.GDP %><strong><br/> <% } %>',
       '</div>'
       ].join('') )
},
fills: {
 A: '#fdd0a2',
 B: '#fdae6b',
 C: '#fd8d3c',
 D: '#f16913',
 E: '#d94801',
 F: '#a63603',
 G: '#7f2704',
 defaultFill: 'grey' 
},
data: {
  "QAT": {
    "name": "Qatar",
    "fillKey": "G",
    "GDP": "140649.2"
  },
  "": {
    "name": "Gambia",
    "fillKey": "A",
    "GDP": "1630.5"
  },
  "LUX": {
    "name": "Luxembourg",
    "fillKey": "G",
    "GDP": "98459.5"
  },
  "SGP": {
    "name": "Singapore",
    "fillKey": "F",
    "GDP": "82763.0"
  }
  }()