JSFiddle - React, Tailwind, and code Playground

by Viet Phan

HTML

<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 500px;"></div>

JavaScript

var map = new Datamap({
    element: document.getElementById('container'),
    fills: {
        HIGH: '#afafaf',
        LOW: '#123456',
        MEDIUM: 'blue',
        UNKNOWN: 'rgb(0,0,0)',
        defaultFill: 'green'
    },
    data: {
        IRL: {
            fillKey: 'LOW',
            numberOfThings: 2002,
            hoverValue: 'true'
        },
        USA: {
            fillKey: 'MEDIUM',
            numberOfThings: 10381,
            hoverValue: 'true'
        }
    },
    geographyConfig: {
        popupTemplate: function (geo, data) {
            if (!data) return;
            return ['<div class="hoverinfo"><strong>',
                'Number of things in ' + geo.properties.name,
                ': ' + data.hoverValue,
                '</strong></div>'].join('');
        },
        highlightOnHover: function (geo, data) {
            if (!data) {return 'false'};
            return data.hoverValue;
        }
    }
});