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-data/wind"></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>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<div> 
        <div class="chartContainer">             
            <div class="chart" id="chartPolarScatter"></div>           
            <div class="chart" id="chartPolarLine"></div>           
            <div class="chart" id="chartPolarArea"></div>           
            <div class="chart" id="chartPolarSpline"></div>         
            <div class="chart" id="chartPolarSplineArea"></div>             
        </div>

        <div class="NOAAdata-attribution">
            Weather data from:<br />
            <a href="http://www.noaa.gov/" target="_blank">NOAA</a>
        </div>

    </div>

CSS

.chart
        {
            display: inline-block; 
        }

JavaScript

$(function () {

            function CreateChart(selector, seriesType, title) {
                $(selector).igDataChart({
                    width: "250px",
                    height: "250px",
                    dataSource: data,
                    title: title,
                    subtitle: "Wind Speed vs. Wind Direction",
                    axes: [{
                        name: "angleAxis",
                        type: "numericAngle",
                        interval: 45,
                        minimumValue: 0,
                        maximumValue: 360,
                        startAngleOffset: -90,
                        formatLabel: function (value) { return value + "º"; }
                    },
                    {
                        name: "radiusAxis",
                        type: "numericRadius",
                        innerRadiusExtentScale: 0.1,
                        minimumValue: 0,
                        maximumValue: 10,
                        interval: 5
                    }],
                    series: [{
                        name: "series1", 
                        type: seriesType,
                        angleAxis: "angleAxis",
                        radiusAxis: "radiusAxis",
                        angleMemberPath: "WindDirection",
                        radiusMemberPath: "WindSpeed"
                    }],
                    horizontalZoomable: false,
                    verticalZoomable: false,
                    windowResponse: "immediate"
                });
            }

            CreateChart("#chartPolarScatter", "polarScatter", "Polar Scatter");
            CreateChart("#chartPolarLine", "polarLine", "Polar Line");
            CreateChart("#chartPolarArea", "polarArea", "Polar Area");
            CreateChart("#chartPolarSpline", "polarSpline", "Polar Spline");
            CreateChart("#chartPolarSplineArea", "polarSplineArea", "Polar Spline Area");
        });