JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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>
<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 src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<script id="geoSymbolTooltip" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th colspan="2">${item.City}, ${item.Country}</th></tr>
            <tr>
                <td>Population:</td>
                <td>${item.Population}</td>
            </tr>
        </table>
    </script>

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

JavaScript

$(function () {

		function CreateEarthquakes(count) {
		count = count || 50; 
		var data = [];
			for (i = 0; i < count; i++)
			{
				var x = Math.floor((Math.random() * 360) - 180);
				var y = Math.floor((Math.random() * 180) - 90);
				var m = Math.floor((Math.random() * 10) + 1);
				var point = { "Magnitude": m, "Longitude": x, "Latitude": y };
				data.push(point);
			}
			return data;
        }
        var data = CreateEarthquakes(100);
             
        function createMap() {

            $("#map").igMap({
                width: "700px",
                height: "500px", 
                 
                series: [{
                    name: "series1",
                    type: "geographicProportionalSymbol", 
                    dataSource: data,
                    markerType: "circle", 
                    markerOutline: "black",
                    longitudeMemberPath: "Longitude",
                    latitudeMemberPath: "Latitude",
                    radiusMemberPath: "Magnitude",					
                    radiusScale: {
                        minimumValue: 10,
                        maximumValue: 40, 
                    },
                    fillMemberPath: "Magnitude",
                    fillScale: {
                         type: "value",
                         brushes: ["red", "yellow"],
                         minimumValue: 1,
                         maximumValue: 12,
						 
                     }
                }, 
                ]
            });
        };
		
		createMap();

    });