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="container" style="position: relative; width: 500px; height: 300px;"></div>

JavaScript

//$('#container').datamaps();

var election = new Datamap({
    scope: 'world',
    element: document.getElementById('container'),
    projection: 'mercator',
    fills: {
        defaultFill: '#afa99a',
        Overdue: '#990000',
        Acknowledged: '#80298C',
        Impending: '#FDCD08',
        Active: '#5A9942',
        Completed: '#4863AD',
        UNKNOWN: 'rgb(0,0,0)'
    },
    geographyConfig: {
        highlightBorderColor: '#7d7d7d',
        highlightBorderWidth: 1,
        popupTemplate: function (geo, data) {
            if ( !data ) return;
            return ['<div class="hoverinfo"><strong>',
                'Milestones in ' + geo.properties.name,
                ': ' + data.Tasks,
                '</strong></div>'].join('');
        }
    },
    data: {
        AUS: {
            fillKey: 'Overdue',
            Milestones: 100,
            Tasks: 487
        },
        USA: {
            fillKey: 'Active'
        },
        IND: {
            fillKey: 'Acknowledged'
        },
        RUS: {
            fillKey: 'Impending'
        },
        FRA: {
            fillKey: 'Completed'
        }
    }
});