JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js/map-helper.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="geoShapeTooltip" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th class="tooltipHeading" colspan="2">
                    ${item.fieldValues.NAME}, ${item.fieldValues.REGION}</th></tr>
            <tr>
                <td>Population:</td>
                <td>${item.fieldValues.POP2005}</td>
            </tr>
        </table>
    </script>

<div id="map"></div>

CSS

#tooltipTable
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }
        #tooltipTable td, #tooltipTable th
        {
            font-size: 9px;
            border: 1px solid #2d87cb;
            padding: 3px 7px 2px 7px;
        }
        #tooltipTable th
        {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #2d87cb;
            color: #ffffff;
        }

JavaScript

$(function () {
function ColorPickerByIndex(min, max) {
             //  Initialize internal state
             var brushes = ["#d9c616", "#d96f17", "#d1150c"];
             var interval = (max - min) / (brushes.length - 1);
             //  Returns a color from the brushes array depending on the input value 
             this.getColorByIndex = function(val) {
                 var index = Math.round(val / interval);
                 if (index < 0) {
                     index = 0;
                 } else if (index > (brushes.length - 1)) {
                     index = brushes.length - 1;
                 }
                 return brushes[index];
             };
         }

         $(function () {
             
             var colorPicker = new ColorPickerByIndex(100000, 500000000);

             //  alternative functions for generating color based on a data value 
             var getColorValue = function (val) {
                 var ratio = val / 1338299500.0;
                 var col = 255.0 * ratio;
                 var colString = "rgba(0,50," + Math.round(col) + ",0.45)";
                 return colString;
             };
             var getLogColorValue = function (val) {
                 var ratio = Math.log(val) / Math.log(1338299500.0);
                 var col = 255.0 * ratio;
                 var colString = "rgba(0,50," + Math.round(col) + ",0.45)";
                 return colString;
             };
             
            $("#map").igMap({
                width: "700px",
                height: "500px",
                windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
                overviewPlusDetailPaneVisibility: "visible",
                overviewPlusDetailPaneBackgroundImageUri: "https://igniteui.com/images/samples/maps/world.png",
                series: [{
                    type: "geographicShape",
                    name: "worldCountries",
                    markerType: "none",
                    shapeMemberPath:...