JSFiddle - React, Tailwind, and code Playground

by jatinder_singh02

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js/map-helper.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://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];
             };
         }
var data = [
    {
        data: {
            attribute1: "String value 1",
            attribute2: 3.1415,
            attribute3: "12/21/2012"
        },
        points: [
            [
                { x: 0, y: 0 },
                { x: 30, y: 0 },
                { x: 30, y: 30 },
                { x: 0, y: 30 }
            ],
            [
                { x: 5, y: 5 },
                { x: 35, y: 5 },
                { x: 35, y: 35 }
            ]
        ]
    }, 
    {
        data: {
            attribute1: "String value 2",
            attribute2: 2.71828,
            attribute3: "03/14/2001"
        },
        points: [
            [
                { x: 40, y: 0 },
                { x: 70, y: 0 },
                { x: 70, y: 30 },
                { x: 40, y: 30 }
            ]
        ]
    }
];
         $(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...