JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div id="container" style="position: relative; width: 600px; height: 400px;"></div>

CSS

svg {
    background-image: linear-gradient(0deg, #bdf 0%, #000 50%);
}

JavaScript

$(document).ready(function () {

    $('#container').datamaps({
        scope: 'world',
        geography_config: {
            borderColor: '#f0f!important',
            highlightBorderColor: '#ff0!important',
            popupTemplate: _.template([
                '<div class="hoverinfo">',
                '<% if (data.name) { %> <strong><%= data.name %></strong><br/><% } %>',
                '<% if (data.startOfConflict) { %>',
                'Started in <%= data.startOfConflict %><br/> <% } %>',
                '<%= geography.properties.name %>',
                '</div>'].join(''))
        },
        fills: {
            conflict: '#f00',
            defaultFill: '#070'
        },
        data: {
            'MLI': {
                fillKey: 'conflict',
                name: '2012 Northern Mali conflict',
                startOfConflict: 2012
            },
                'LBY': {
                fillKey: 'conflict',
                name: '2011–present Libyan factional fighting',
                startOfConflict: 2011
            },
                'IRQ': {
                fillKey: 'conflict',
                name: 'Iraqi insurgency (post U.S. withdrawal)',
                startOfConflict: 2011
            },
                'SYR': {
                fillKey: 'conflict',
                name: 'Syrian civil war',
                startOfConflict: 2011
            },
                'SDN': {
                fillKey: 'conflict',
                name: 'Sudan internal conflict',
                startOfConflict: 2011
            },
                'MEX': {
                fillKey: 'conflict',
                name: 'Mexican Drug War',
                startOfConflict: 2006
            },
                'PAK': {
                fillKey: 'conflict',
                name: 'War in North-West Pakistan',
                startOfConflict: 2004
            },
                'YEM': {
                fillKey: 'conflict',
                name: 'Al-Qaeda insurgency in Yemen',
  ...