JSFiddle - React, Tailwind, and code Playground

by mram888

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="http://datamaps.github.io/scripts/0.4.2/datamaps.none.min.js"></script>
<body>
  <div id="map_netherlands" style="position:relative; width: 500px; height: 500px;"></div>
</body>

JavaScript

var data = {};
var map = new Datamap({
			element: document.getElementById('map_netherlands'),
      scope: "collection",
			geographyConfig: {
				dataJson: data
			},
 setProjection: function(element) {
    var projection = d3.geo.mercator()
    .scale(3000)
    .center([0, 52])
    .rotate([-4.8, 0])
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  },
		});