JSFiddle - React, Tailwind, and code Playground

by mram888

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>
<select id="mapRegion" class="form-control input-sm pull-right mr5"  ng-model="mapRegion" name="mapRegion" onchange="drawRegionsMap()">
            <option value="world" selected="selected">World</option>
            <optgroup label="Americas">
            <option value="019">Americas</option>
            <option value="021">Northern America</option>
            <option value="US">United States of America</option>
            <option value="029">Caribbean</option>
            <option value="013">Central America</option>
            <option value="ME">Mexico</option>
            <option value="005">South America</option>
            </optgroup>
            <optgroup label="Europe">
            <option value="150">Europe</option>
            <option value="154">Northern Europe</option>
            <option value="GB">United Kingdom</option>
            <option value="155">Western Europe</option>
            <option value="DE">Germany</option>
            <option value="FR">France</option>
            <option value="151">Eastern Europe</option>
            <option value="039">Southern Europe</option>
            <option value="ES">Spain</option>
            </optgroup>
            <optgroup label="Asia">
            <option value="142">Asia</option>
            <option value="143">Central Asia</option>
            <option value="030">Eastern Asia</option>
            <option value="034">Southern Asia</option>
            <option value="035">South-Eastern Asia</option>
            <option value="145">Western Asia</option>
            </optgroup>
            <optgroup label="Africa">
            <option value="002">Africa</option>
            <option value="015">Northern Africa</option>
   ...

JavaScript

var e = document.getElementById('mapRegion');
    var myRegion = e.options[e.selectedIndex].value;    
    var map = new Datamap(
        {
        	scope: 'world',
          element: document.getElementById('regions_div'),
          fills: {
              defaultFill: "#ABDDA4",
              win: '#0fa0fa'
          },
          data: {
              'CHN': { fillKey: 'win' },
              'SWE': { fillKey: 'win' },
              'ESP': { fillKey: 'win' },
              'PRT': { fillKey: 'win' },
         },
         setProjection: function(element) {
            var projection = d3.geo.mercator()
            .center([0, 50])
            .rotate([0, 0])
            .scale(100)
            .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
          var path = d3.geo.path()
            .projection(projection);
          return {
            path: path,
            projection: projection
          };
        },
      }
    );
    
    map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-400,-100)");
    
    var countries = Datamap.prototype.worldTopo.objects.world.geometries;
		for (var i = 0, j = countries.length; i < j; i++) {
		  console.log(countries[i].properties);
		}